Cyprian

I'm trying do example app and learn gsap and locomotive scroll. I create sample page, when during scrolling show some animation. In chrome browser all right, but when I'm trying in safari, my animation is flickering. My code: <template> <div class="scroll" data-scroll-container> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim"></div> </div> </div> </div> </div> <div class="section section-lightblue"> <h2>Some section 1</h2> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim1"></div> </div> </div> </div> </div> <div class="section"> <h2>Some section 2</h2> </div> </div> </template> <script setup lang="ts"> import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import LocomotiveScroll from 'locomotive-scroll'; gsap.registerPlugin(ScrollTrigger); let locoScroll: any = null; onMounted(() => { locoScroll = new LocomotiveScroll({ el: document.querySelector('.scroll') as HTMLElement, smooth: true, }); pinType: document.querySelector(".scroll").style.transform ? "transform" : "fixed" locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy('.scroll', { scrollTop(value) { return arguments.length ? locoScroll?.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll?.scroll.instance.scroll.y; }, }); const horizontalSections = gsap.utils.toArray('.horizontal-sections'); horizontalSections.forEach((section: any, i) => { const thisPinWrap = section.querySelector('.pin-wrap'); const thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); ScrollTrigger.create({ trigger: section, scroller: '.scroll', start: 'top top', end: () => '+=' + thisAnimWrap.scrollWidth, pin: thisPinWrap, scrub: true, }); const fakeHorizontalAnim = gsap.fromTo( thisAnimWrap, { x: () => (thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()), }, { x: () => (thisAnimWrap.classList.contains('to-right') ? getToValue() : 0), ease: 'none', scrollTrigger: { trigger: section, start: 'top top', scroller: '.scroll', end: () => '+=' + (thisAnimWrap.scrollWidth - window.innerWidth), scrub: true, }, } ); const tl = gsap.timeline(); tl.to('.block-anim', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); const tl1 = gsap.timeline(); tl1.to('.block-anim1', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl1, scroller: '.scroll', scrub: true, }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl, scroller: '.scroll', scrub: true, }); }); ScrollTrigger.refresh(); }); onBeforeRouteLeave((to, from, next) => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); locoScroll?.destroy(); next(); }); </script> <style lang="scss" scoped> body { margin: 0; padding: 0; overflow-x: hidden; } h2 { position: relative; z-index: 2; margin: 0; } .section { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; flex: 0 0 100vw; background: lightgray; } .section-gray { background: gray; } .section-lightblue { background: lightblue; } .block-anim { will-change: transform; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: lightgoldenrodyellow; } .horizontal-sections { position: relative; overflow-x: hidden; .pin-wrap, .animation-wrap { display: flex; position: relative; z-index: 1; height: 100vh; } } .spacer { height: 50vh; width: 100vw; } </style> And link to page: https://skandynawia-przystan.vercel.app/test. Do yoy know how I can fixed this ?

<template> <div class="scroll" data-scroll-container> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim"></div> </div> </div> </div> </div> <div class="section section-lightblue"> <h2>Some section 1</h2> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim1"></div> </div> </div> </div> </div> <div class="section"> <h2>Some section 2</h2> </div> </div> </template> <script setup lang="ts"> import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import LocomotiveScroll from 'locomotive-scroll'; gsap.registerPlugin(ScrollTrigger); let locoScroll: any = null; onMounted(() => { locoScroll = new LocomotiveScroll({ el: document.querySelector('.scroll') as HTMLElement, smooth: true, }); pinType: document.querySelector(".scroll").style.transform ? "transform" : "fixed" locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy('.scroll', { scrollTop(value) { return arguments.length ? locoScroll?.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll?.scroll.instance.scroll.y; }, }); const horizontalSections = gsap.utils.toArray('.horizontal-sections'); horizontalSections.forEach((section: any, i) => { const thisPinWrap = section.querySelector('.pin-wrap'); const thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); ScrollTrigger.create({ trigger: section, scroller: '.scroll', start: 'top top', end: () => '+=' + thisAnimWrap.scrollWidth, pin: thisPinWrap, scrub: true, }); const fakeHorizontalAnim = gsap.fromTo( thisAnimWrap, { x: () => (thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()), }, { x: () => (thisAnimWrap.classList.contains('to-right') ? getToValue() : 0), ease: 'none', scrollTrigger: { trigger: section, start: 'top top', scroller: '.scroll', end: () => '+=' + (thisAnimWrap.scrollWidth - window.innerWidth), scrub: true, }, } ); const tl = gsap.timeline(); tl.to('.block-anim', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); const tl1 = gsap.timeline(); tl1.to('.block-anim1', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl1, scroller: '.scroll', scrub: true, }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl, scroller: '.scroll', scrub: true, }); }); ScrollTrigger.refresh(); }); onBeforeRouteLeave((to, from, next) => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); locoScroll?.destroy(); next(); }); </script> <style lang="scss" scoped> body { margin: 0; padding: 0; overflow-x: hidden; } h2 { position: relative; z-index: 2; margin: 0; } .section { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; flex: 0 0 100vw; background: lightgray; } .section-gray { background: gray; } .section-lightblue { background: lightblue; } .block-anim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: lightgoldenrodyellow; } .horizontal-sections { position: relative; overflow-x: hidden; .pin-wrap, .animation-wrap { display: flex; position: relative; z-index: 1; height: 100vh; } } .spacer { height: 50vh; width: 100vw; } </style> I use Nuxt3 and gsap and Locomotive Scroll. My first animation called tl working correct, but when scroll down and view second animation called tl1 doen't working. How I can fix it ? my webiste: https://skandynawia-przystan.vercel.app/ my github: https://github.com/cyprianwaclaw/Skandynawia-Przystan

You can see changes in my codesandbox: cyprianwaclaw/nuxt - CodeSandbox

I've made changes, but the scrolling animation still doesn't work

I have a problem with scroll triger when scrolling page, because my text "Animation" text not working animation and in my console is error: codesandbox: cyprianwaclaw/nuxt - CodeSandbox

code sandbox: cyprianwaclaw/nuxt - CodeSandbox

I have a problem with animation open mobile hamburger menu. Before open Logo is black, when menu is open I have logo is white. I have two logo, one is black and one is white: <div class="md:hidden flex absolute left-5 top-4" ref="m_menu_button_close" @click="close"><p class="text-white text-2xl font-mediu">LOGO</p></div> . . <div class="text-2xl font-medium flex md:hidden logocolor" ref="m_logo">LOGO</div> <style scoped> .logocolor{ color: 'black'; } </style> How can I fix it ?

I have a problem with production vercel environment. When I try in dev gsap.timeline is work. Next I send to vercel, i have error 500, gsap.timeline is not a function. How I fix this ? My vercel: 500 - Internal Server Error | Nuxt (cyprianwaclaw.vercel.app) Github project: cyprianwaclaw/Nuxt-Pinia-ts (github.com)

I have problem with import flip, when I try import Flip from gsap/dist/Flip and gsap/Flip I have a 500 error

I have a my problem in my code gsap in vue3. I import gsap, next import ScrollTrigger plugin and finaly I use scrollTrgger in my project and scrolltrigger not work. https://codesandbox.io/embed/adoring-hill-6rn7f9?fontsize=14&hidenavigation=1&theme=dark