Jump to content
GreenSock

Code32

ScrollTrigger issues in Nuxt components when navigating pages

Recommended Posts

Hey, I'm having an issue whereby adding a ScrollTrigger with animations into a component is causing issues when navigating to different pages using the same component. The ScrollTrigger works fine when refreshing each page, but when you come from a previous page the trigger points are all way off as they haven't recalculated.

 

Interestingly, when navigating to a new page and then resizing the window, it seems to rebuild and loads the ScrollTrigger in correctly.

 

Does anybody know how to get this working correctly? I've tried previously suggested solutions such as killing the ScrollTrigger instance but nothing has yet worked successfully. My code in the component is below:

 

data() {
  return {
    animation: null,
    st: null,
  };
},
mounted() {
  this.animation = gsap.timeline();

  this.st = ScrollTrigger.create({
    id: `featured-${ this.blok._uid }`,
    trigger: `#featured-${ this.blok._uid }`,
    markers: true,
    start: 'top 75%',
    end: 'bottom bottom',
    pin: false,
    scrub: 2,
    animation: this.animation
  });

  this.st.refresh();
  this.st.enable();

  this.animation.from(
    this.$refs.heading,
    .8,
    {
      autoAlpha: 0,
      y: 100,
    }, '-=.6'
  );

  this.animation.from(
    this.$refs.title,
    .8,
    {
      autoAlpha: 0,
      y: 100,
    }, '-=.6'
  );

  this.animation.from(
    this.$refs.content,
    .8,
    {
      autoAlpha: 0,
      y: 100,
    }, '-=.6'
  );

  this.animation.from(
    this.$refs.buttons,
    .8,
    {
      autoAlpha: 0,
      y: 100,
    }, '-=.6'
  );

  this.animation.from(
    this.$refs.additional,
    .8,
    {
      autoAlpha: 0,
      y: 100,
    }, '-=.6'
  );
},
beforeDestroy() {
  this.st.kill();
},
Link to comment
Share on other sites

2 hours ago, Code32 said:

when navigating to a new page and then resizing the window, it seems to rebuild and loads the ScrollTrigger in correctly.

It sounds like you need to call ScrollTrigger.refresh() when the new component loads then :) 

 

If you're still having issues and would like code help, please provide a minimal demo that recreates the issue using something like CodeSandbox.

Link to comment
Share on other sites

Hey, thanks for the reply. I have managed to solve using ScrollTrigger.refresh(), however I've only been able to get it working when used on the actual page templates in the beforeRouteEnter and beforeRouteUpdate hooks (inside of a setTimeout which I'd rather avoid, but anything less than a timeout of 600 doesn't work). Is there a reason it won't work inside the component files themselves?

Link to comment
Share on other sites

Without seeing your full set up I have no guesses.

Link to comment
Share on other sites

Yeah, that must be a Nuxt-related issue, totally unrelated to GSAP/ScrollTrigger. Some frameworks take a while to perform their updates. You'd have to tap into their lifecycle events to make sure you run the ScrollTrigger.refresh() at the appropriate time. Hard-coding 600ms sounds very dangerous to me because on slower devices it could be longer - it's much better to figure out what event Nuxt will fire when things are ready/done, and tap into that. Obviously I'm not a Nuxt guy, so I have no idea which part of their API to tap into for that. Perhaps you'll need to reach out to the Nuxt folks for that. 

  • Like 1
Link to comment
Share on other sites

Exactly yeah, the hardcoded timeout is definitely not a good idea, it's just what I added to get around the issue while in development. I'm still trying to work on a solid solution. The mounted hook is where the refresh should go as that occurs when the component is ready, but it seems it doesn't do the refresh without that timeout. I'll keep looking for the answer but thanks for your response.

I haven't got a CodePen setup for it but if I continue to fail at finding the solution, I'll spend some time putting one together.

 

Link to comment
Share on other sites

  • 4 months later...

@Code32 Did you find a solution for this issue? I am facing the same one

Link to comment
Share on other sites

Hey pal, do you have time to put together a little codesandbox?

If you put a simple demo together outlining the issue clearly I can forward it on to some nuxt peeps for advice. We should definitely be able to find a better solution than a timeout.
 

Link to comment
Share on other sites

Hi,

 

When I developped something like that I had some issues too.

 

On nuxt every time you destroy your component, you need to kill your timelines and your ScrollTrigger instances.

 

I didn't build my timeline like you. Maybe can you try like that ?

 

mounted () {
            this.animation = gsap.timeline({
                scrollTrigger: {
                    id: `featured-${this.blok._uid}`,
                    trigger: `#featured-${this.blok._uid}`,
                    markers: true,
                    start: 'top 75%',
                    end: 'bottom bottom',
                    pin: false,
                    scrub: 2,
                },
            })

            this.animation.from(
                this.$refs.heading,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.title,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.content,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.buttons,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )

            this.animation.from(
                this.$refs.additional,
                .8,
                {
                    autoAlpha: 0,
                    y: 100,
                }, '-=.6',
            )
        },
        destroyed () {
			const scrollTriggersInstances = ScrollTrigger.getAll()
            scrollTriggersInstances.forEach(el => {
                if (el && el.kill) {
                    el.kill(false)
                }
            })
            this.animation.kill()
        },

 

  • Like 1
Link to comment
Share on other sites

3 hours ago, Ozzy said:

@Code32 Did you find a solution for this issue? I am facing the same one

I didn't find a solid solution, only the unsuitable timeout unfortunately (I only did this for debugging purposes). I'll try the above solution and see if that has an impact.

Link to comment
Share on other sites

2 hours ago, Cassie said:

Hey pal, do you have time to put together a little codesandbox?

If you put a simple demo together outlining the issue clearly I can forward it on to some nuxt peeps for advice. We should definitely be able to find a better solution than a timeout.
 

Hey Cassie!
I did put one together back when I raised this issue, but annoyingly it wasn't replicating the issue so I scrapped it.

  • Haha 1
Link to comment
Share on other sites

There should never be a need to use setTimeout in Nuxt, but it's really hard advice without seeing a working demo of the problem.

 

Link to comment
Share on other sites

25 minutes ago, Code32 said:

Hey Cassie!
I did put one together back when I raised this issue, but annoyingly it wasn't replicating the issue so I scrapped it.

Oh frustrating. That's gonna be something in your setup then. Hate it when that happens.

Link to comment
Share on other sites

Yeah, it is frustrating when that happens.

Oddly enough though, I did only really experience this issue on one project. Websites I’ve built since seem to be alright.

 

You’re right, it may be an issue with the setup, or possible the versions of gsap/Nuxt I was hosting on that project. The site isn’t yet live so I’ll revisit it and compare and see what’s causing the problem on that one before I launch it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×