Drexel Posted November 29, 2021 Share Posted November 29, 2021 I have a simple animation of a red box. I have a main timeline and each animation is broken into different functions and those functions return their timeline and that is added to the main timeline. Since I am using .from for each call I would think that the red box will animation from the position it is sitting in the DOM originally. This works for the first one as expected, but the 2nd .from seems to use the "+=500" as the ending point. So when moveTwo is called the red box ends up at the +=500 position. Why doesn't the red box animation from the position of 0 each time? Do I have to use a set to capture that original position because the first .from is actually setting the x position of the red box? Thanks for clearing this up for me. const mainTL = gsap.timeline(); function moveOne(){ const tl = gsap.timeline(); tl.from("#red",{x:"+=500", duration:1}) return tl; } function moveTwo(){ const tl = gsap.timeline(); tl.from("#red",{x:"-=200", duration:1}) return tl; } mainTL.add(moveOne()) .add(moveTwo()); See the Pen bGoGGjP by icekomo (@icekomo) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 29, 2021 Share Posted November 29, 2021 Hi @Drexel .from animations can be a little tricky to work with in timelines. Check out this guide on immediateRender to learn about what's going on. 1 Link to comment Share on other sites More sharing options...
Drexel Posted November 29, 2021 Author Share Posted November 29, 2021 Thank you for sharing this! 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