Jump to content
Search Community

Duplicate a timeline

Guyom test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hi,

 

I'm pretty new on Gsap and I really like to play with it. I apologize if this topic was already covered, but I did not find any solution (perhaps I do not use the correct correct keywords).

 

I am wondering if it exists a way to duplicate an animation before it completed. I would like to play a same timeline multiple time with a certain delay. 

For example, I set up this draft demo pen and the idea would be to use an "option" for copying this timeline and replay the ball animation without using new DOM elements.

cube.gif

 

 

Here an example of expected animation:

expected-animation.jpg

 

 

 

I hope my english is not too poor. Thank you in advance for your interest and your answer. 

See the Pen GWgyBj by guyom (@guyom) on CodePen

Link to comment
Share on other sites

Hey!

I'm pretty new myself, but I tried to solve your case.

 

I updated your CodePen to a working solution. Hope it helps :)

See the Pen zZxWyp by katerlouis (@katerlouis) on CodePen

 

In my opinion you have no other choice than cloning the ball-elements in some way. 

I did it with a simple for-loop and jQuerys .clone() function.

 

The magic you are looking for is GSAPs .staggerTo-function, which animates each element in a given selector and offsets their starting time by a specified value.

I stored this value in the var `stagger` for more convenient edits.

 

So there is no need to copy the timeline.

 

You see that the first ball now waits for the other balls to arrive before the next step of the timeline starts.

If this is not what you were looking for I'm sure there is a way to let each ball move continuously ;)

 

Sidenote: Your codepen bugs in my Safari 9. Anymating between left, top, right and bottom isn't very robust I think. 

With a bit more calculation I'd say you better go straight with x and y values.

 

 

Hope this helps :)

  • Like 2
Link to comment
Share on other sites

Thank so much kreativzirkel!

 

I did not know the existence of .clone() jQuery property. Your Codepen is very clear to me and I am very impressed by your prompt answer (I was totally stuck).

 

P.S: I understand the performance issue about the positionning, I will apply your advices.

  • Like 1
Link to comment
Share on other sites

  • Solution

Here's a version that I think gives the effect you wanted:

http://codepen.io/GreenSock/pen/VpYRzd?editors=0010

 

I just looped through the elements and created a timeline for each. I also wanted to make sure the velocity didn't change when it goes vertically, so I added some math for that (relatively simple). It just affects the duration. 

var el = $(".element");
var width = $(".container").width() - el.width();
var height = $(".container").height() - el.height();
var velocity = 600; //pixels per second
var spacing = 0.12;
var horizontalDuration = width / velocity;
var verticalDuration = height / velocity;


el.each(function(i) {
  var tl = new TimelineMax({repeat:-1, delay:i * spacing});
  tl.to(this, horizontalDuration, {x:width})
   .to(this, verticalDuration, {y:height})
   .to(this, horizontalDuration, {x:0})
   .to(this, verticalDuration, {y:0});
});

Does that help?

  • Like 3
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.
×
×
  • Create New...