Motion (Framer Motion V12) Анимация отстает на iPhone 15 Pro Max Safari & Mac Safari (Next.js App)IOS

Программируем под IOS
Ответить Пред. темаСлед. тема
Anonymous
 Motion (Framer Motion V12) Анимация отстает на iPhone 15 Pro Max Safari & Mac Safari (Next.js App)

Сообщение Anonymous »

Мой проект находится на следующем.js 15.3.4, и я также использую движение 12.19.2. На главной странице анимация очень изменчивая и задержка, и эта проблема была замечена только на устройствах iOS (iPhone 15 Pro Max, iPhone 14 - Google Chrome, Safari; на Mac только в Safari). На телефонах Android, Windows и Linux все работает нормально без какого -либо отставания. Это не из -за настроек iOS, которые замедляют анимацию. Я также пытался оставить только один блок с анимацией, и это стало лучше, но лаги остались. /> фрагмент кода для единственного элемента на главной странице < /strong> < /p>

Код: Выделить всё

'use client'
import { motion } from 'motion/react'
import { cn } from '@/shared/lib/css'
import { type Variants } from 'motion'
import Image from 'next/image'

const textAnim: Variants = {
hidden: { y: 30, opacity: 0 },
visible: {
y: 0,
opacity: 1,
transition: {
delay: 0.3,
duration: 0.6,
ease: [0.25, 0.46, 0.45, 0.94]
}
}
}

const lightAnim: Variants = {
hidden: { opacity: 0, scale: 0.8 },
visible: {
opacity: 1,
scale: 1,
transition: {
delay: 0.6,
duration: 0.4,
ease: 'easeOut' as const
}
}
}

const wordAnim: Variants = {
hidden: { opacity: 0, y: 15 },
visible: (i: number) => ({
opacity: 1,
y: 0,
transition: {
delay: i * 0.2 + 0.9,
duration: 0.4,
ease: 'easeOut' as const
}
})
}

const moduleAnim: Variants = {
hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: 'easeOut' as const
}
}
}

const HomeIntro = () => {
return (






Wealth Creation
System


{[...Array(4)].map((_, i) =>  (

))}



Learn.
{' '}

Trade.
{' '}

Earn.




Our mission is to help you find your own way in trading and organize a stable income.

We provide tools to earn with trading, and you choose what suits you best.

Time to take action. Time to evolve.



)
}

export { HomeIntro }
Отредактировано по запросу Esqew.

Подробнее здесь: https://stackoverflow.com/questions/797 ... safari-mac
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Motion (Framer Motion V12) Анимация отстает на iPhone 15 Pro Max Safari & Mac Safari (Next.js App)
    Anonymous » » в форуме IOS
    0 Ответы
    1 Просмотры
    Последнее сообщение Anonymous
  • Motion (Framer Motion V12) Анимация отстает на iPhone 15 Pro Max Safari & Mac Safari (Next.js App)
    Anonymous » » в форуме Javascript
    0 Ответы
    1 Просмотры
    Последнее сообщение Anonymous
  • Motion (Framer Motion V12) Анимация отстает на iPhone 15 Pro Max Safari & Mac Safari (Next.js App)
    Anonymous » » в форуме Javascript
    0 Ответы
    0 Просмотры
    Последнее сообщение Anonymous
  • Приложение Flutter ios зависло на заставке по умолчанию на устройствах iPhone 13 Pro Max и iPhone 14 Max
    Anonymous » » в форуме IOS
    0 Ответы
    118 Просмотры
    Последнее сообщение Anonymous
  • Framer Motion: анимация заставляет веб-сайт расширяться
    Anonymous » » в форуме CSS
    0 Ответы
    24 Просмотры
    Последнее сообщение Anonymous

Вернуться в «IOS»