Jump to content
GreenSock

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

Multiple selectors with a single delay on first tween

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 and thanks for your very nice work, discovering GSAP was a relief.

 

Sorry if this seems trivial but I've searched everywhere with no luck :

 

I have a single time line with multiple selectors. They share the same teens, except I'd like to have a single delay on the first tween only.

 

My goal is to simulate a train a several wagons. The first wagon starts, then 0.5s later the second wagon start, then 0.5s later, the third wagon starts, etc.

 

Here is where I am so far :

var delay = 0.5;
for (var step in tlTrain) {
    tl.appendMultiple(TweenMax.allTo([wagon0, wagon1, wagon2, wagon3],
    tlSpeed, {
    x: tlX,
    y: tlY
    }, delay));
    delay = 0;
}

It works at first but after the first teen, all the wagons stop and gather before resarting all together.

 

Thanks in advance for any advice.

 

Edit : I have discovered a semi-workaround : put a negative delay number, and reverse the selectors order. But but there is a pause at the end of the loop, and aniamtion becomes sometimes laggy.

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

I'm not very sure if this fits somehow to what you need:

 

See the Pen ineuB by rhernando (@rhernando) on CodePen

 

Please feel free to fork it and adapt it to your scenario and let us know if you need anything else.

 

Also the appendMultiple method has been deprecated in favour of the add method, which works in the exact way:

for (var step in tlTrain) {
    tl.add(TweenMax.to([wagon0, wagon1, wagon2, wagon3],
    tlSpeed, {
    x: tlX,
    y: tlY
    }, delay));
    delay = 0;
}

As well for this cases JS conditional operator comes in handy to set the delay between tweens:

delay = 0.5
for(var i = 0; i < value; i++)
{
  delay = i == 0 ? 0 : delay;
}

This works as follows: if the value of i is equal to 0 (i == 0) the value of delay will be 0, if the value of i is not 0 the value of delay will be the one assigned previously (0.5).

 

Best,

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo,

 

And thank you very much for your answer.

 

My problem is still present on your codepen. I'd like the animation to be smooth when the delays have loaded. On the pen, the first wagon (for example) starts and stops 5 times, 1 time for each wagon, but I'd like it to tween smoothly after the first delay. Same for every wagon, so that you feel the train just starts and move away.  For now it feels that the train starts and stop 5 times.

 

That is precisely what I can't come up with.

 

Don't hesistate to tell me if it's unclear, I'll make a pen.

 

Thanks a lot

Link to comment
Share on other sites

Hi,

 

I've updated the codepen:

See the Pen ineuB by rhernando (@rhernando) on CodePen

 

That scenario is quite easier as you can see. Instead of a single relative delay we use an absolute positioning based on the element's index and the duration based on the amount of wagons left to animate.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Great job on that demo, Rodrigo!

Link to comment
Share on other sites

Thanks Rodrigo for this demo !

 

However I'm still afraid it doesn't fit, or at least I didn't manage to adapt your technique.

 

Here is a fiddle of the whole stuff :

http://jsfiddle.net/LBDAB/5/

 

The animation is supposed to loop without that ugly stop on each turn (top left corner).

 

As you can see the loop is based on the number of coordinates points, when your demo loops on the number of targets. I have to do it that way because of the massive number of coordinates I have to inject. I don't know if this has an impact on how GSAP handle the animation ? Also I can't use Bezier because I need callbacks and css properties every step.

 

Also after the first loop there are some minor glitches visible (on the real project which is  more complex), always at the same coordinates (they shifts if I shift coordinates, so it doesn't seems to be my code). 

 

If you have any advice that would be very kind.

 

Thanks a lot

Link to comment
Share on other sites

Well Carl beat me to it, nice job!!

 

I have a different approach though:

 

See the Pen GCgjH by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

@Karl thanks this is great, nice technique. But this kind of loop starts glitching from the second lap, same problem I mention above, I don't know why. But I was lucky enough to have a opacity:0 step inmy animation so I can quietly clear the timeline at each loop.

 

@Rodrigo thank you that is neat, I will keep this for next time. If I have time I will port my anim to your technique and see if glitches are still here.

 

Thanks for awesome support.

Link to comment
Share on other sites

Hi,

 

Perhaps using force3D:true might help with the glitch:

for (var step in tlTrain) {
    var tlParam = tlTrain[step];
    tlX = tlParam[0];
    tlY = tlParam[1];
    tl.add("insertion" + insertion, insertion);
    tl.add(TweenMax.allTo(wagons,
    1, {
    x: tlX,
    y: tlY,
    force3D:true,
    ease: Linear.easeNone
    }, 0.1), "insertion" + insertion);
    insertion++;
}

You can see it here:

http://jsfiddle.net/fvyS7/2/

 

Rodrigo.

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