Jump to content
Search Community

How to change direction of images?

theraseus
Moderator Tag

Recommended Posts

theraseus
Posted (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 by theraseus
better describe the issues
mvaneijgen
Posted

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! 

  • Like 1
Posted
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

  • Like 1
theraseus
Posted

thanks for the links guys, i will look into it and get back with what I end up with

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