ScrollTrigger on route change issues #58
Unanswered
Bart-studio
asked this question in
Q&A
Replies: 5 comments 4 replies
-
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: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
1 reply
-
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>
|
Beta Was this translation helpful? Give feedback.
1 reply
-
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>
|
Beta Was this translation helpful? Give feedback.
2 replies
-
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>
|
Beta Was this translation helpful? Give feedback.
0 replies
-
:(
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>
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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.
I've been working on it for days, so any help would be great !
Thank's
Beta Was this translation helpful? Give feedback.
All reactions