Jump to content
Search Community

ScrollTrigger startpoints not working properly.

Sonix test
Moderator Tag

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

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

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

  • 2 years later...
On 11/30/2020 at 6:51 AM, GreenSock said:

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?

You are the best. ScrollTrigger.refresh() helped me with responsive layout in React as well!

Link to comment
Share on other sites

On 12/5/2022 at 4:25 PM, Rodrigo said:

Hi @MCP,

 

If you are using React I recommend you to stop by and have a look at this article:

 

Also we strongly recommend using GSAP Context when working with React:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

Thank you!

Absolutely love GSAP. I'll dive deeper into it.
First time I found GSAP was not so long ago while deconstructing someone's website from awwwards. 

  • Like 1
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...