Jump to content
Search Community

Simultaneous y-axis animation?

_josch test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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

 

  • Like 3
Link to comment
Share on other sites

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

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...