theraseus Posted January 9 Posted January 9 (edited) Hi, guys i am trying to make it so in this animation the images appear from the bottom up to the top, I know I have to modify the clip-path, both in the CSS and in the javascript file, but I have been trying to find the right mix and I just cant. 2) what is the best way to allow scrolling when the animation finishes? as the initial state of the body is overflow: hidden; 3) I am setting increasing delays to ensure the sequence is correct of the animations, any way I can set it so each animation starts when a % of the previous one finishes? so even if I change individual durations no everything goes out of whack? Thanks! See the Pen vEBdPqe by Ignacio-Brito (@Ignacio-Brito) on CodePen. Edited January 10 by theraseus better describe the issues
mvaneijgen Posted January 10 Posted January 10 I use the following tool to make my clip-paths https://bennettfeely.com/clippy/ it allows you do just create the clip-path visually. Just draw you clip-path with all points in all corners and then drag the top most corners to the bottom and then it will animate from the bottom top the top. Note that when animating between complex strings you have to help GSAP, so that it know what values to change and what to keep. With clip-path's this is done by adding a % sign to each value, so the 0 number should also be suffixed with a % sign. 9 hours ago, theraseus said: 2) what is the best way to allow scrolling when the animation finishes? as the initial state of the body is overflow: hidden; Remove the overflow: hidden; with the onComplete callback https://gsap.com/docs/v3/GSAP/gsap.timeline()/#onComplete 10 hours ago, theraseus said: 3) I am setting increasing delays to ensure the sequence is correct of the animations, any way I can set it so each animation starts when a % of the previous one finishes? so even if I change individual durations no everything goes out of whack? That is what timelines are for and you can use the position parameter to have things start based on the previous tween. I would advise reading through our learning center to get up and running quickly with all the GSAP tools https://gsap.com/resources/getting-started/timelines Hope it helps and happy tweening! 1
Rodrigo Posted January 10 Posted January 10 15 hours ago, theraseus said: 3) I am setting increasing delays to ensure the sequence is correct of the animations, any way I can set it so each animation starts when a % of the previous one finishes? so even if I change individual durations no everything goes out of whack? Also you might want to have a look at staggers: https://gsap.com/resources/getting-started/Staggers 1
theraseus Posted January 10 Author Posted January 10 thanks for the links guys, i will look into it and get back with what I end up with
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