ScrollTrigger on route change issues #58

Bart-studio · 2023-12-15T14:46:05Z

Bart-studio
Dec 15, 2023

Hi,

On the website I'm building with Nuxt 3, I'm using scrolltrigger to animate portions of the page.
The thing is when I navigate from page to page the animation eventually freezes...

I've seen a lot of post about this issue, and it seems I have to use
$ScrollTrigger.getById('idofscrolltrigger').kill()

It doesn't seems to work so I tried to console.log($ScrollTrigger.getById('uniqueId'))
And in the console I get this message :

ƒ t(n,r){Fi||t.register(G)||console.warn("Please gsap.registerPlugin(ScrollTrigger)"),zc(this),this.init(n,r)}

Is it normal ? If not how can I register the plugin scrollTrigger ?

Below is the code I'm using.

const {  $gsap, $ScrollTrigger } = useNuxtApp()

function indexAnimation() {
  let tlIndex = $gsap.timeline({
      scrollTrigger: {
        id: 'agoraAgora',
        trigger: "#agoraAgora",
        start: "top bottom",
        end: "top -200",
        scrub: 1,
        // pin: true,
        // pinSpacing: true,
          markers: true,
        toggleActions: "play play reverse reverse",
      }
  });
    
  tlIndex.from("#agoraAgora .vertical-line_1", { opacity: 0, height: 0, duration: 0.25 })
          .from("#agoraAgora .pageSection__title", { opacity: 0, scale: 0.5, duration: 0.25 } , "-=0.25")
          .from("#agoraAgora .vertical-line_2", { opacity: 0, height: 0, duration: 0.25 })
          .from("#agoraAgora .content-wrapper", { opacity: 0, scale: 0.5, duration: 0.8 } , "-=0.15")
          .from("#agoraAgora .img-top-right", { opacity: 0,  x:-100, y:100, duration: 0.25 } , "+=0.25")
          .from("#agoraAgora .img-bottom-left",{ opacity: 0,  x:100, y:-100, duration: 0.25 } , "-=0.5")
          .from("#agoraAgora .vertical-line_3", { opacity: 0, height: 0 , duration: 0.25 }) 


  return tlIndex
}

onMounted(() => {
  indexAnimation()
})

onBeforeUnmount(() => {
 console.log($ScrollTrigger.getById('agoraAgora'))
  $ScrollTrigger.getById('agoraAgora').kill()
})

I've been working on it for days, so any help would be great !
Thank's

bonomite · 2023-12-15T17:01:56Z

bonomite
Dec 15, 2023

Be sure your elements have a unique key attribute. <div :key="unique value">

…

On Fri, Dec 15, 2023, 9:46 AM Bart-studio ***@***.***> wrote: Hi, On the website I'm building with Nuxt 3, I'm using scrolltrigger to animate portions of the page. The thing is when I navigate from page to page the animation eventually freezes... I've seen a lot of post about this issue, and it seems I have to use $ScrollTrigger.getById('idofscrolltrigger').kill() It doesn't seems to work so I tried to console.log($ScrollTrigger.getById('uniqueId')) And in the console I get this message : *ƒ t(n,r){Fi||t.register(G)||console.warn("Please gsap.registerPlugin(ScrollTrigger)"),zc(this),this.init(n,r)}* Is it normal ? If not how can I register the plugin scrollTrigger ? Below is the code I'm using. const { $gsap, $ScrollTrigger } = useNuxtApp() function indexAnimation() { let tlIndex = $gsap.timeline({ scrollTrigger: { id: 'agoraAgora', trigger: "#agoraAgora", start: "top bottom", end: "top -200", scrub: 1, // pin: true, // pinSpacing: true, markers: true, toggleActions: "play play reverse reverse", } }); tlIndex.from("#agoraAgora .vertical-line_1", { opacity: 0, height: 0, duration: 0.25 }) .from("#agoraAgora .pageSection__title", { opacity: 0, scale: 0.5, duration: 0.25 } , "-=0.25") .from("#agoraAgora .vertical-line_2", { opacity: 0, height: 0, duration: 0.25 }) .from("#agoraAgora .content-wrapper", { opacity: 0, scale: 0.5, duration: 0.8 } , "-=0.15") .from("#agoraAgora .img-top-right", { opacity: 0, x:-100, y:100, duration: 0.25 } , "+=0.25") .from("#agoraAgora .img-bottom-left",{ opacity: 0, x:100, y:-100, duration: 0.25 } , "-=0.5") .from("#agoraAgora .vertical-line_3", { opacity: 0, height: 0 , duration: 0.25 }) return tlIndex } onMounted(() => { indexAnimation() }) onBeforeUnmount(() => { console.log($ScrollTrigger.getById('agoraAgora')) $ScrollTrigger.getById('agoraAgora').kill() }) I've been working on it for days, so any help would be great ! Thank's — Reply to this email directly, view it on GitHub <#58>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJJ6T5OB7ZJ22TDHCP3VCDYJRPDRAVCNFSM6AAAAABAWRZAUKVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVHE3DIMZRHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

1 reply

Bart-studio Dec 16, 2023
Author

Thank you . I changed the ID and the console displays now data on my scrollTrigger, but the animation remains frozen when I navigate from page to page (in fact, the first time the page is displayed, it works as expected, but when I return to a page I've already visited, the animation is buggy). Do I have to use the refresh function or something else ?

bonomite · 2023-12-17T04:23:36Z

bonomite
Dec 17, 2023

Share the repo... or share a stackblitz with the issue recreated. I've seen this kind of issue before when routing, and it has always been a key issue. I'd be happy to take a peek.

…

On Sat, Dec 16, 2023, 1:33 PM Bart-studio ***@***.***> wrote: Thank you . I changed the ID and the console displays now data on my scrollTrigger, but the animation remains frozen when I navigate from page to page (in fact, the first time the page is displayed, it works as expected, but when I return to a page I've already visited, the animation is buggy). Do I have to use the refresh function or something else ? — Reply to this email directly, view it on GitHub <#58 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJJ6T6MBJMWVUGBSYJ7KS3YJXSPFAVCNFSM6AAAAABAWRZAUKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQNZSGQYDO> . You are receiving this because you commented.Message ID: ***@***.*** com>

1 reply

Bart-studio Dec 18, 2023
Author

I will have to test further but it seems that I have resolved my issue simply by adding a Transition component around my page content - and by doing this it looks like you don't even need to refresh or kill the scrollTrigger...

bonomite · 2023-12-18T18:20:15Z

bonomite
Dec 18, 2023

Oh. Interesting. You doing this on the page level, or in a template?

…

On Mon, Dec 18, 2023, 3:37 AM Bart-studio ***@***.***> wrote: I will have to test further but it seems that I have resolved my issue simply by adding a Transition component around my page content - and by doing this it looks like you don't even need to refresh or kill the scrollTrigger... — Reply to this email directly, view it on GitHub <#58 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJJ6T4GLRMIZ55PBATVVBLYJ76FDAVCNFSM6AAAAABAWRZAUKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQOBTGM3TE> . You are receiving this because you commented.Message ID: ***@***.*** com>

2 replies

Bart-studio Dec 19, 2023
Author

It seems to work on both levels. BUT I've tried the same thing on another site I'm building and if the page has more than one Scrolltrigger it no longer works - even if I use .kill or .refresh... I'll try to put a transition component around each element that is being animated to see what happens...

Bart-studio Dec 19, 2023
Author

... I tried today and nothing works anymore so back to starting point...

bonomite · 2023-12-19T12:30:00Z

bonomite
Dec 19, 2023

Maybe try using refs instead of ids

…

On Tue, Dec 19, 2023, 4:59 AM Bart-studio ***@***.***> wrote: It seems to work on both levels. BUT I've tried the same thing on another site I'm building and if the page has more than one Scrolltrigger it no longer works - even if I use .kill or .refresh... I'll try to put a transition component around each element that is being animated to see what happens... — Reply to this email directly, view it on GitHub <#58 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJJ6T55TWXGGV42OSPB3MLYKFQOJAVCNFSM6AAAAABAWRZAUKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQOJVGU3TQ> . You are receiving this because you commented.Message ID: ***@***.*** com>

0 replies

bonomite · 2023-12-19T22:15:05Z

bonomite
Dec 19, 2023

:( Recreate the issue in a Stackblitz project and share it with me.

…

On Tue, Dec 19, 2023, 9:01 AM Bart-studio ***@***.***> wrote: ... I tried today and nothing works anymore so back to starting point... — Reply to this email directly, view it on GitHub <#58 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJJ6TYMKEWAHUFCAWKXN3LYKGMZ3AVCNFSM6AAAAABAWRZAUKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TQOJXG42TK> . You are receiving this because you commented.Message ID: ***@***.*** com>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

ScrollTrigger on route change issues #58

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

ScrollTrigger on route change issues #58

Uh oh!

Bart-studio Dec 15, 2023

Replies: 5 comments · 4 replies

Uh oh!

bonomite Dec 15, 2023

Uh oh!

Bart-studio Dec 16, 2023 Author

Uh oh!

bonomite Dec 17, 2023

Uh oh!

Bart-studio Dec 18, 2023 Author

Uh oh!

bonomite Dec 18, 2023

Uh oh!

Bart-studio Dec 19, 2023 Author

Uh oh!

Bart-studio Dec 19, 2023 Author

Uh oh!

bonomite Dec 19, 2023

Uh oh!

bonomite Dec 19, 2023

Bart-studio
Dec 15, 2023

Replies: 5 comments 4 replies

bonomite
Dec 15, 2023

Bart-studio Dec 16, 2023
Author

bonomite
Dec 17, 2023

Bart-studio Dec 18, 2023
Author

bonomite
Dec 18, 2023

Bart-studio Dec 19, 2023
Author

Bart-studio Dec 19, 2023
Author

bonomite
Dec 19, 2023

bonomite
Dec 19, 2023