Gsap — проблема с анимацией в сафари, как решить?
unikors.agency - донор
https://twin-nine.vercel.app/ - наш сайт
На 3ем слайде в сафари нету плавности, резко и рывками встает слайд а потом уже анимируется вправо, но именно вот эту плавность хочется сделать
Есть у кого варианты?
Дополнительно:
Может донора сделать?
Снимок экрана
Ответы:
Тут для скроллинга не нужен GSAP, используйте CSS scroll-snap-*.
- Мы решили проблему эту, с делали через скрол
Но сейчас новая, слайды которые скролятся в этом блоке они пингуют и не плавно работают
Есть возможность глянуть? - Dmitryusz, у меня текущий вариант на vercel.app вообще не скроллится никак, сразу после загрузки страницы. Полез в код, выяснил, что дело в `html { overscroll-behavior: none }`, если поменять на `html { overscroll-behavior-y: none }`, то скролл работает. В баг-трекере такой баг не нашел. Странное.
Safari 17.0 в приватном окне, без расширений. Вы на каком Сафари тестируете, только на мобильном? - arsenty, Нет, десктоп сафари ласт версия мак м1 13
- arsenty, https://youtu.be/q3rItUZvnco - вот такие заторможености происходят
- Dmitryusz, как я уже писал, GSAP для такого перебор, у вас нет множества хитрых анимаций, чтобы он был обоснован (либо займитесь оптимизацией производительности). Конкретно такой горизонтальный скролл вообще можно сделать на CSS, что-нибудь в таком духе, если на минималках: https://codepen.io/arsenty/full/rNoGvxg Ну и немного js если хотите обрабатывать какие-то события.
ЗЫ: баг с прокруткой был по старой ссылке, в новой все Ок.
https://dist-alpha.vercel.app/
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, давайте разберемся, в чем может быть проблема с анимацией Gsap в Safari. Возможно, это связано с тем, что Safari имеет свои особенности и требования к анимациям, которые могут отличаться от других браузеров.
Один из способов решить проблему с анимацией Gsap в Safari - это убедиться, что вы используете последнюю версию библиотеки Gsap. Новые версии могут содержать исправления ошибок и улучшения, которые могут помочь совместимости с Safari.
Также, убедитесь, что ваш код написан правильно и оптимизирован для работы в Safari. Некоторые особенности JavaScript могут вызывать проблемы в Safari, поэтому стоит внимательно проверить свой код на наличие ошибок.
Если проблема все еще не решена, попробуйте использовать вендорные префиксы для CSS свойств, которые могут быть необходимы для корректного отображения анимаций в Safari. Например, для анимации transform вы можете использовать следующий код:
.element { -webkit-transform: translateX(100px); transform: translateX(100px); }
Также, не забывайте тестировать вашу анимацию в различных версиях Safari и на разных устройствах, чтобы убедиться, что она работает корректно.
Надеюсь, эти советы помогут вам решить проблему с анимацией Gsap в Safari. Если у вас остались вопросы или проблемы, не стесняйтесь обращаться за помощью.