Jump to content
Search Community

How can I implement timelines in this project

Ishan Shishodiya test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

I have this count down animation I created which once reaches zero gets shifted to the right. Here I am using delay for the container shifting animation but it would be more convenient for that animation to trigger after the number appearance animation is completed. I tried using "-=6.3" instead of that delay in a timeline but it didn't really work. Any ideas on how to implement this?

See the Pen bGxaZwy by sly_of_zero (@sly_of_zero) on CodePen

Link to comment
Share on other sites

@mvaneijgen Thanks for the answer it really helped out. Although I have another question regarding the same countdown. You can see in the code pen code that the final animation that translates the screen by 100% on the X axis has the ease ""back.out(1.7)". By adding that there I expected the screen to have a little back animation when the translation was over but I can't see that in effect.


If I has the translation be something like 90% I can see that the little back animation occurs on the right side instead of the left. Any ideas on how to fix this too?

Link to comment
Share on other sites

With back.out you over shoot the end value * 1.7, so in your case it will move to 170 back to 100 and because 100 is already outside the viewport you don't see it. You have to find an ease that moves back to a value less then 100, bounce could work. I would recommend using the ease visualizer https://greensock.com/docs/v3/Eases and try them all out 


Also if you want percentage based values use xPercent: 100 instead of x: "100%"

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