Jump to content
Search Community

Navigating between pages in Nuxt changes start | end positions

stevensunsunsun test
Moderator Tag

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

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

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

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

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

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.
×
×
  • Create New...