Jump to content

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

How to do this

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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. 


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


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