Jump to content
GreenSock

stevensunsunsun

Navigating between pages in Nuxt changes start | end positions

Recommended Posts

Sorry no codepen but everything is working fine except that when navigating to a new page. If you hit refresh it's all good or even just resizing the window a tad. There is an element with bottom -252px and it's positioned fine except that the start | end now appear 252px from the bottom.

 

I've got the following code:
 

  mounted() {
    gsap.registerPlugin(ScrollTrigger);
    this.headingAnimation();
  },

  beforeDestroy() {
    ScrollTrigger.getAll().forEach(t => t.kill());
  },

  methods: {
    headingAnimation() {
      for (let i = 0; i < this.boxes.length; i++) {

        gsap.to(this.$refs.opacityChange[i], {
          opacity: 0.5,
          scrollTrigger: {
            trigger: `.content-${i}`,
            start: 'top bottom',
            end: 'top bottom-=200',
            scrub: true,
            invalidateOnRefresh: true,
            markers: true,
          },
        });


Please let me know if there's another step for Nuxt. Thanks!

Link to comment
Share on other sites

Hi steven,

 

It's hard to answer questions without a minimal demo, like on CodeSandbox. Be aware that Nuxt automatically applies page transitions, so mounted is going to fire before the page is fully ready.

 

Link to comment
Share on other sites

Hi, thanks for getting back to me!

 

It turns out I should have been using bottom instead of top!
 

            start: 'bottom bottom',
            end: 'bottom bottom-=200',
  • Like 1
Link to comment
Share on other sites

Ah no wait. Now it's working if you navigate to the page, but if you hit refresh then the start | end move.

Link to comment
Share on other sites

We can't really answer a question without seeing the problem.

 

11 hours ago, OSUblake said:

It's hard to answer questions without a minimal demo, like on CodeSandbox

 

Link to comment
Share on other sites

Hi, sorry I know :sad: I'm not sure how to recreate in Code pen as it would need to be Nuxt and route between pages. Can I send you a private link to the website where it occurs?

Link to comment
Share on other sites

18 minutes ago, stevensunsunsun said:

Hi, sorry I know :sad: I'm not sure how to recreate in Code pen as it would need to be Nuxt and route between pages.

 

That's why I mentioned CodeSandbox, not CodePen. 😉

Link to comment
Share on other sites

Ah! Thanks! So this is as close as I can get to a recreation:

https://codesandbox.io/s/magical-noether-01edtf?file=/components/Box.vue

This doesn't actually show the error for some reason. Perhaps because I'm using Nuxt.

But when these both start with bottom, the start | stop are correctly positioned offscreen to begin with when navigating to a new page, and the opacity change kicks in as you scroll. But if you refresh the page, they reposition like the attachment. 

The opposite happens if they both begin with top: when navigating to a page, it looks like the screen shot. The opacity is already 0.5 because they've passed the scroller end. But then when hitting refresh, the start | stop are correctly positioned just offscreen at the bottom.
 

          start: () => "bottom bottom",
          end: () => "bottom bottom-=200",

Unfortunately the issue isn't showing up in the codesandbox example.

It's not essential that the user scrubs these. It would still work if when each section was fully in screen then the opacity changed after a small delay. The only problem is that when scrolling back to a previous section, the opacity would have to go back to 0. I can't see a way to do that hence trying it with scrub.

Screenshot 2022-03-31 at 00.08.36.JPG

Link to comment
Share on other sites

I'm not sure what to advise if we can't see the issue. One thing I did notice is that you are animating an element, .content-container-0, that has a trigger element inside of it, .content-0, so I'm not sure if that is messing stuff up. 

Link to comment
Share on other sites

Sorry I'm not sure what you mean. Does the trigger need to be somewhere else?

Link to comment
Share on other sites

Well I don't if that' the issue you are experiencing, but if you animating some element vertically that has a trigger element inside of it, the trigger is going to be off, kind of like what is described here.

 

 

Link to comment
Share on other sites

Like I said, I don't know if that's issue, but you're animating .content-container-0 vertically, and the you are using .content-0 as the trigger which is inside of it, so you are moving your trigger. It's generally a bad idea to do that. You should use something that doesn't move as the trigger, like a parent element or something.

Link to comment
Share on other sites

Hi, thanks – but I've tried that and see exactly the same issue.

 

When navigating to the page the start | stop are 178px above the bottom of the text box.

 

When refreshing the page, they are -178px below the bottom of the text box.

The position is consistent except that it becomes a negative value for some reason.

Link to comment
Share on other sites

Sorry, but I gave all the advise I can possibly think of for an issue I cannot see. 🤷‍♂️

 

Link to comment
Share on other sites

Sure, I understand. So annoying that the codesandbox didn't work!

 

Is there any reason why a refresh would calculate different values than a page navigation? Just trying to troubleshoot from that side.

Link to comment
Share on other sites

10 minutes ago, stevensunsunsun said:

Is there any reason why a refresh would calculate different values than a page navigation? Just trying to troubleshoot from that side.

I'm completely unfamiliar with Nuxt but that certainly seems to be the culprit. The ONLY reason I can think of that start/end positions would be off is if your framework (or something) is shifting those elements around AFTER ScrollTrigger does its .refresh() call. You should make sure to call ScrollTrigger.refresh() when your page is settled (it'll automatically do that on page load, of course, but when you're dynamically loading things that won't work). 

Link to comment
Share on other sites

I'm not familiar with Nuxt, so I have no idea. You just need to make sure the DOM is settled and then call that. 

Link to comment
Share on other sites

Try in a $nextTick or setTimeout. Sometimes with Nuxt you may need to call $nextTick twice.

 

this.$nextTick(() => {
  this.$nextTick(() => {
    ScrollTrigger.refresh()
  })
})

 

Again, it's super, Super hard to advise without seeing the problem.

 

Link to comment
Share on other sites

Hi, thanks but unfortunately nothing seems to work.

 

Is there a way that I can trigger an opacity change with scrolling? I can see that it can be set to happen on delay but I have a series of sections. And then when the user scrolls back up to one it would need to go back to opacity 0.

 

This way I could avoid this particular puzzle all together!

Link to comment
Share on other sites

Why don't you try to recreate the problem on CodeSanbox on using Nuxt? There are several Nuxt templates on there, so I'm not sure why you didn't use one to begin with. It's very difficult to answer questions when I have no idea the issue is.

 

  • Like 1
Link to comment
Share on other sites

I know, sorry! 🙂 But now that I'm using toggleActions as per…

 it's working perfectly. Thank you again for looking at this and helping me get to a solution!

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.
×