Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alan0buchanan

Using the same animation on several elements, one after the other

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

In my Codepen is an example of 4 bubbles animating. Each one enters from the bottom and pause in the middle of the page, then leaves upwards.

 

However, I want to be able to achieve this with one animation, so that it doesn't matter how many Bubbles are in the page, it's going to fire them all up one by one just as it is in my example.

 

I had experimented a bit with `staggerTo`, `staggerFrom` and `staggerFromTo` which I understand are intended for this purpose, but I couldn't quite nail the exact desired functionality.

 

Is there a solution for this?

See the Pen EWjzyJ by alanbuchanan (@alanbuchanan) on CodePen

Link to comment
Share on other sites

Hi alan0buchanan :)

 

Welcome to the GreenSock forum.

 

There would be a few ways to go about this. I'll show you a couple of options. You can make it happen with pair of staggers. The first would stagger in and the second stagger out, but using the position offset, we delay the stagger out. Here's that option.

 

See the Pen GWJbqd by PointC (@PointC) on CodePen

 

You could also loop through the array of bubbles and create a timeline for each one.

 

See the Pen gmpJNv by PointC (@PointC) on CodePen

 

For the loop demo, I have them 'chase' each other off the screen. If you prefer your original timing, you can adjust that by making the delay of each timeline i*3 instead of i*2.

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

I would use a combo of a class selector, StaggerToFrom, and Custom Ease. Here is some code to illustrate

 

See the Pen RpPzJY by sgorneau (@sgorneau) on CodePen

 

Most of this code is the Custom Ease plugin because it's not up on a CDN ... so you can pretty much ignore lines 1 - 400 by assuming you would include the plugin via a <script> in your page.

 

So, from 400 - 406 (so little code!) you can see how this happens.

  • Like 4
Link to comment
Share on other sites

Thanks for the assist, Shaun.

 

Here is a hosted, CodePen-friendly version of CustomEase that you (or anyone) can link to in your pens:

//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js?r=2
  • 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.
×