_josch Posted January 21, 2022 Share Posted January 21, 2022 Hello! My current animation is almost exactly like it should be, yet I would like it to a) end up in the same y-value it was before, just slide up to that spot. Currently it's moving from it's original value up 25px and thereby above where it should be. b) have the animations start shortly after another so they run almost simultaneously, not one after another. The code (screencapture because for some reason I dont have any more file size here) https://gyazo.com/999d0beaf6d7f73e27549bdbf001ced2 How would this be achieved with ScrollTrigger? Thanks! Link to comment Share on other sites More sharing options...
OSUblake Posted January 21, 2022 Share Posted January 21, 2022 Hi josch, Can you put that in a minimal demo? We can't look at a snippet of code and tell what's going on, especially with ScrollTrigger as it very dependent on your layout. Link to comment Share on other sites More sharing options...
_josch Posted January 21, 2022 Author Share Posted January 21, 2022 Hello OSUBlake, I made the minimal demo here: See the Pen OJxeYbL by jorsch (@jorsch) on CodePen Hopefully that clears things up a bit! Link to comment Share on other sites More sharing options...
Solution OSUblake Posted January 21, 2022 Solution Share Posted January 21, 2022 Thanks for the demo! You're animating from it's current position to -25, so you need to switch that around, which you can do with a from or fromTo animation or by using gsap.set() to initially position them and then use a to animation. And to have them staggered, you can use the stagger property. See the Pen bGoPyMp by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
_josch Posted January 21, 2022 Author Share Posted January 21, 2022 I wasn't aware that you could also use the "fromTo" on a timeline, that's a great thing to know for the future - Thank you very much for the tips! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted January 21, 2022 Share Posted January 21, 2022 3 minutes ago, _josch said: I wasn't aware that you could also use the "fromTo" on a timeline Yep! All the methods available for the Timeline are on the left hand side in the docs. https://greensock.com/docs/v3/GSAP/Timeline Just be careful with from and fromTo animations as you may need to use the immediateRender property for animations that don't happen at the start of the Timeline. 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