artyor Posted February 24, 2021 Share Posted February 24, 2021 Hi all, In this codepen I first use gsap.set to set .line element outside of .box (with yPercent), then I tween it with .to, and after that I use scroll trigger. In all 3 cases I manipulate yPercent. But scrollTrigger doesn't keep going from gsap.to, it resets itself to gsap.set and then it animates. I want scrollTrigger to animate .line starting from position that's been set with gsap.to. How can I acomplish this? (Not sure if it's worth to note that in my non-codepen example I use load event listener to to tween after page is loaded) See the Pen NWbXpqq by madebyigor (@madebyigor) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 Thanks for the clear demo! The simplest solution is to apply immediateRender: false to your tween that has the ScrollTrigger. See the Pen KKNZWWa?editors=0010 by GreenSock (@GreenSock) on CodePen You might also want to use overwrite: 'auto' on the tween with the ScrollTrigger. Another solution is to use the onComplete of the tween that runs on load to create the tween and associated ScrollTrigger. 1 Link to comment Share on other sites More sharing options...
artyor Posted February 24, 2021 Author Share Posted February 24, 2021 7 minutes ago, ZachSaucier said: Thanks for the clear demo! The simplest solution is to apply immediateRender: false to your tween that has the ScrollTrigger. See the Pen See the Pen KKNZWWa?editors=0010 by GreenSock (@GreenSock) on CodePen by GreenSock (@GreenSock) on CodePen You might also want to use overwrite: 'auto' on the tween with the ScrollTrigger. Another solution is to use the onComplete of the tween that runs on load to create the tween and associated ScrollTrigger. Hi Zach, thank you for responding. When I did search on forum I found immediateRender, but video tutorial said it's used only in from or fromTo, so I didn't even try to use it. Thanks, this will sort my problem! I will also take a look into onComplete option as it seems the best practice scenario, but also a bit more advance. Thank you again. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 4 minutes ago, artyor said: video tutorial said it's used only in from or fromTo Yeah, that was the case. A .to() tween with a ScrollTrigger is a special case. What video tutorial are you referencing? 7 minutes ago, artyor said: I will also take a look into onComplete option as it seems the best practice scenario, but also a bit more advance. It's actually pretty simple. Here's how I'd set it up: See the Pen KKNZWeq?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
artyor Posted February 24, 2021 Author Share Posted February 24, 2021 2 minutes ago, ZachSaucier said: Yeah, that was the case. A .to() tween with a ScrollTrigger is a special case. What video tutorial are you referencing? It's actually pretty simple. Here's how I'd set it up: Thank you for another example! I was referencing video from this thread Link to comment Share on other sites More sharing options...
tailbreezy Posted February 24, 2021 Share Posted February 24, 2021 17 minutes ago, artyor said: but video tutorial said it's used only in from or fromTo It applies to ScrollTrigger as well, because it initializes on page load. To verify, if you set it up after the .to have finished it will work as you expect. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 24, 2021 Share Posted February 24, 2021 17 minutes ago, artyor said: I was referencing video from this thread Ah, yeah. That's a very old video. I'll a note about it applying to .to() tweens with ScrollTriggers attached as well. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 24, 2021 Share Posted February 24, 2021 23 minutes ago, ZachSaucier said: I'll a note about it applying to .to() tweens Just a heads up in case you want to add it also. Searching the docs for immediateRender does not return gsap.to() or Timeline.to() either, only from() & fromTo(). It does show .to() referenced in the Tween doc though for immediateRender. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now