Search the Community

My problem is quite simple, but I can't find any solution despite reading numerous articles. To quickly explain: When I load the home page of my site or any page for the first time my GSAP animations work perfectly. However, when I change pages and then come back to the page before my annimations find themselves completely crashed... Here is an example script in a component that I use <script setup> import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; let ctx; let timelinePresentation = false; onMounted(()=>{ gsap.registerPlugin(ScrollTrigger) ScrollTrigger.refresh() ctx = gsap.context( () => { if( window.innerWidth >= 786 ) { timelinePresentation = createTimeline_desktop_presentation(); } else { timelinePresentation = createTimeline_mobile_presentation(); } } ) }) onUnmounted( () => { ctx.kill(); } ) function createTimeline_desktop_presentation() { gsap.set('#presentation .rotateOpacity', {rotate: 15, opacity: 0, yPercent: 100, xPercent: 20}); let scrollOnPresentation = gsap.timeline({ scrollTrigger: { trigger: '#presentation', pin: true, start: "top", end: "+=1300", scrub: 1, // markers:true, } }); scrollOnPresentation.to('#presentation .rotateOpacity', { rotate: 0, opacity: 1, yPercent: 0, stagger: 0.2, xPercent: 0, }); return scrollOnPresentation; } function createTimeline_mobile_presentation() { gsap.set('#presentation .rotateOpacity',{rotate : 15,opacity : 0,yPercent:100,xPercent:20}); const elementToScrollAnimate = document.querySelectorAll('#presentation .rotateOpacity'); elementToScrollAnimate.forEach(el => { gsap.to(el, { rotate : 0, opacity : 1, yPercent:0, xPercent:0, duration : 0.25, scrollTrigger : { trigger:el, toggleActions: 'play none none reverse' } }) }) return elementToScrollAnimate; } // ######### // IMG HOVER // ######### const filterImgRef = ref('filter:grayscale(100%);') const onhover = () => { filterImgRef.value = '' } const onleave = () => { filterImgRef.value = 'filter:grayscale(100%);' } </script> Does anyone have a solution? I used several solutions as seen in the code above. It may be messy. I am open to any modification or good practice that I do not apply thank you in advance for your help

Hello, could you please help me. I'm trying to attach tweens to timeline in Nuxtjs like that: tl.value = gsap.timeline({..}); and tl.value.to({...}); but animation not playng, but onStart event fires and tl.value.duration() returns 1. But if I use chain like tl.value = gsap.timeline({..}).to({..}) it's works fine. Here is simple example: https://codesandbox.io/p/sandbox/mystifying-waterfall-i2cwtp?file=%2Fpages%2Findex.vue%3A1%2C1 . Thank you!

I create a simple demo for this issue. https://stackblitz.com/edit/nuxt-starter-nsqfvz?file=pages/index.vue I use scrollTrigger in gsap.matchMedia(), 1. if I add the "pin" in home page (pages/index.vue), 2. and then go to other pages (pages/page2.vue) 3. resize with different breakpoint it will show this kind of error, Uncaught TypeError: trigger.revert is not a functio After I back to the home page, the scrollTrigger will not work anymore. And seems the scrollTrigger should be killed in "onUnmounted" ? Thank you~~~

Hi all I seem to completely stuck on what I hope is a trival mistake/issue on my behalf, but I cannot seem to resolve so any help would be greatly appreciated! Some context... I am building a site with Nuxt 2 + GSAP and working on a simple scroll interaction on the home page. It can be broken into a few small steps to help illustrate the desired outcome: A full-page splash component (logo loading animation) is `positioned: fixed; z-index: -1;` at the top of the page The inner page content is then transformed down by `transform: translate3d(0, 100vh, 0)` and on close of the splash is transformed back up to simulate a parallax effect over the splash page Then, nested inside the inner page content there are three 100vh full-bleed image sticky sections (with nested headline etc) that have predefined `width: 100%'; height: 100vh; position: sticky; top: 0;` styles making them overlap on scroll. We are then using a scrollTrigger to animate the headline and images to show and reveal on scroll i.e. hide first image when next image reaches the top (and should probably be using pinning for the sticky sections?!). My issue is that on first render/load the markers are positioned incorrectly and then work perfectly on window resize or returning to route. I seem to have determined this due to the translate set on the parent container on load (when the splash is active). I have been able to reproduce the issue in a minimal Nuxt 2 + GSAP repo here: https://stackblitz.com/edit/nuxt-starter-qp4xkc?file=pages/index.vue From what I have read in other issues, calling `ScrollTrigger.refresh()` once we know the DOM is ready and/or when the splash transition is complete, should recalculate the scrollTriggers but testing refresh hasn't resolved the issue. Nesting the `ScrollTrigger.refresh()` inside a `setTimeout()` to wait for the splash transition to end works inconsistently and doesn't feel like a production safe solution? I have also tried changing the CSS on the parent i.e. pushing down the content down using padding or margins instead of translating but the issue persists. I know from experience that's always best to go all GSAP and not mix elements with CSS (i.e. the sticky panels) but I just can't seem to get it to work.. Hoping I just have some logic mixed up and would appreciate any guidance!

Hi guys, I attach a codesandbox with the result I would like to achieve with gsap (but smoother). https://codesandbox.io/p/sandbox/charming-leaf-o1w7xb?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A57%2C"startColumn"%3A1%2C"startLineNumber"%3A1}]&workspace=%7B%22activeFileId%22%3A%22cl9zkslmo000hlsgzg75u0gum%22%2C%22openFiles%22%3A%5B%22%2Fpages%2Findex.vue%22%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22spaces%22%3A%7B%22clbdl1aza00103b6g4eqbzi2v%22%3A%7B%22key%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22name%22%3A%22Default%22%2C%22devtools%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22clbdl1aza00113b6gctyx602v%22%2C%22isMinimized%22%3Afalse%7D%5D%7D%7D%2C%22currentSpace%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22spacesOrder%22%3A%5B%22clbdl1aza00103b6g4eqbzi2v%22%5D%7D is it possible to apply this type of animation to the transition component? What I would like to achieve is an animation that comes from top to bottom and with a fade-in effect (I'm using @nuxt/gsap). Thanks to anyone who can help me!