Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sonix

ScrollTrigger startpoints not working properly.

Recommended Posts

Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case.

 

If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I don't know whether this i a vue, webpack or gsap bug, or do i miss something?

 

How it should look like and does on reload.           On first load

Correct-Startpoint.thumb.jpg.4ba9aeaabe492cfbbc297a6f9c127e66.jpgWrong-Startpoint.thumb.jpg.73d0e8af89f1e7c1c9decb805b6b3d25.jpg

 

 

mounted() {
        gsap.utils.toArray(".anim").forEach(anim => {
                gsap.from(anim, {
                    scrollTrigger: {
                        start: "top bottom",
                        end: "top center",
                        markers: true,
                        scrub: 1,
                        trigger: anim
                    },
                y: 120,
                opacity: 0.3
                })
            })
    }
Link to comment
Share on other sites

This is just a guess as I'm not a vue guy and it's hard to troubleshoot just from code and an image but the fact that it works on reload might suggest that scroll triggers are trying to intialize before items are fully loaded in to the DOM. On reload the elements may be already cached so scrollTrigger can find their positions and properities straight away.

 

 

  • Like 2
Link to comment
Share on other sites

I'm guessing this is an issue of you not destroying and setting things up properly as Visual-Q talked about. Please make a minimal demo using something like CodePen if you'd like our help debugging:

 

Link to comment
Share on other sites

Hi, back with a code pen:

See the Pen GRqoqav by sonix875 (@sonix875) on CodePen

So in the CodePen demo everything works fine. I think i need to somehow rerender the Dom with vue after the Gsap animation is called. I tried to add a window.addEventListener('load', () => {}or document.onreadystatechange but non of these worked.

 

Here is the Page with the issue. Again the issue only appears if the visitor is rerouted from home to the project("/bildprache" in this case). Thanks already!

 

 

Link to comment
Share on other sites

It's pretty hard to debug something that we can't reproduce. Can you try modifying the demo that you made to recreate the issue? 

Link to comment
Share on other sites

Here is the Github code, so you can reproduce the issue precisely.

Link to comment
Share on other sites

Please recreate the issue in minimal form using something like CodePen or CodeSandbox. Asking us to clone a repo, figure out how to get it running (I tried to do so with your repo but got errors when running the resulting index.html file after I built it), then debug it is asking a lot of us for free.

Link to comment
Share on other sites

Sorry that the repo didn't work, I thought it would be easier and more precise if you have the same code as I. I simply can't reproduce the code in a codepen or so, because i use vue router and also the structure would not be the same. So I will invest more time and probably find the issue... Thanks for the support!

Link to comment
Share on other sites

  • 1 month later...
On 10/13/2020 at 2:00 AM, Sonix said:

Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case.

 

If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I don't know whether this i a vue, webpack or gsap bug, or do i miss something?

 

How it should look like and does on reload.           On first load

Correct-Startpoint.thumb.jpg.4ba9aeaabe492cfbbc297a6f9c127e66.jpgWrong-Startpoint.thumb.jpg.73d0e8af89f1e7c1c9decb805b6b3d25.jpg

 

 



mounted() {
        gsap.utils.toArray(".anim").forEach(anim => {
                gsap.from(anim, {
                    scrollTrigger: {
                        start: "top bottom",
                        end: "top center",
                        markers: true,
                        scrub: 1,
                        trigger: anim
                    },
                y: 120,
                opacity: 0.3
                })
            })
    }

I am facing the same issue while using scrollTrigger in NUXTjs . 

Link to comment
Share on other sites

This sure sounds like you're loading content in dynamically or something, so just make sure you call ScrollTrigger.refresh() when all your stuff is loaded and ready to go. That'll force ScrollTrigger to recalculate all the start/end positions. Does that help?

  • Like 2
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.
×