Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Eugene Mous

How to do this

Recommended Posts

Hello... I'm new  to Green Sock and have some difficulties in a project. I found an interesting example, which i want to insert in a website that i am working on. The example is html and css and i want to make it animate with a tween or timeline. Can someone help me? Thank you in advance.

 

I've put the codepen example and a file with whole code. Can you help to make the animation in example to run in reverse , i would like it to start with the parts of the image scattered and in the end combine them all together to the final image. Sorry if i didn't make my self clear. 

Code.txt

See the Pen rwRLNO by Eugene_m (@Eugene_m) on CodePen

Link to comment
Share on other sites

Hi Eugene Mous,

 

Welcome to GreenSock Forums.

 

One way to do this is:

 

See the Pen OgexzN by mikeK (@mikeK) on CodePen

 

A cool way would be to handle the scattered positions of all parts by staggerFrom and a cycle function.

Have a look to the pen at the bottom of this page: https://greensock.com/docs/TimelineLite/staggerTo()

 

Kind regards

Mikel

  • Like 4
Link to comment
Share on other sites

Thank you very much Mikel. With your help and suggestion i was able to implement it. Have a nice day

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