Jump to content
GreenSock

kursus

Timeline - same tween on several elements with offset

Recommended Posts

Hi all,

 

I'm trying to simulate moving clouds with Greensock.

 

Here is the codepend :

See the Pen gyCBq by anon (@anon) on CodePen

 

All clouds share the same tween, but they are given different speed and top values. Also the main purpose is a different horizontal offset so that the effects actually works. 

 

This animation has several problems :

 

- I can't make tlCloud.pause(); working. I have tried different techniques for injecting tweens but none seems to work when you add offset. seek() is the best I can do so far.

 

- It seems that looping the animation consume more and more memory over time. I'm not really sure about this though because I id not have the time to test it carefully. Is it something supposed to happen with this kind of calls ?

 

- Different speed on each elements is a nice idea but after several loops it starts to look weird, some area are covered with elements and some are totally blank. I don't expect a GS function to manage this for me as this is a very specific need, but if you have a hint to give I would take it with pleasure.

 

Thank you very much

Link to comment
Share on other sites

Hi,

 

First you're not adding the particular tween instances to your timeline (at least in the codepen), maybe that's why the pause() method is not working. You can use the add method:

var tlCloud = new TimelineMax();

var cloud1 = TweenMax.to('#cloud1', 23, {x: 430, y: 0, repeat: -1, ease: Linear.easeNone, force3D:true});
var cloud2 = TweenMax.to('#cloud2', 45, {x: 430, y: 0, repeat: -1, ease: Linear.easeNone, force3D:true});
var cloud3 = TweenMax.to('#cloud3', 32, {x: 430, y: 0, repeat: -1, ease: Linear.easeNone, force3D:true});
var cloud4 = TweenMax.to('#cloud4', 22, {x: 430, y: 0, repeat: -1, ease: Linear.easeNone, force3D:true});
var cloud5 = TweenMax.to('#cloud5', 28, {x: 430, y: 0, repeat: -1, ease: Linear.easeNone, force3D:true});
var cloud6 = TweenMax.to('#cloud6', 48, {x: 430, y: 0, repeat: -1, ease: Linear.easeNone, force3D:true});
cloud1.seek(1);
cloud2.seek(4);
cloud3.seek(28);
cloud4.seek(18);
cloud5.seek(12);
cloud6.seek(7);
cloud7.seek(32);

tlCloud.add([cloud1, cloud2, cloud3, cloud4, cloud5, cloud6]);

I don't see any memory issue on this side(2 year old laptop, core i5 2.4 GHZ, 4GB ram) with firefox 26, chrome 32 and IE11 all running the codepen and other tabs in chrome, plus thunderbird, skype and sublime tex.

 

Also I don't see any blank areas in the light blue background container, perhaps you could indicate browser and os you're seeing the issue.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hello Rodrigo,

 

Thanks for your answer.

 

1) Thanks, with the add method it works perfectly, I don't know why I did not think to do this before, I still need to work on my GS knowledge !

 

2) Ok, I was talking about several hours of looping, but I'll do some further research and open a post if I find something. Anyway these kind of issues seems more browser-related.

 

3) I meant that over the time, elements can be sometimes packed in a specific area of the container. It's definitely not a GS issue and it's totally related to JS coding (speed should be changed every loop), but I was asking just in case someone had a magic technique.

 

Thanks anyway

Link to comment
Share on other sites

Yep those issues are all browser related, but they had to do with rendering and not code execution, nothing we can do around here to solve that.

 

Although you could give this a try:

http://forums.greensock.com/topic/8491-tweenliteticker-time-frames-reset-or-pause/#entry33187

 

And see if that solves anything.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

This link is very useful, thanks for that.

Link to comment
Share on other sites

Sorry to bother but the add() technique does not work in this case.

 

See updated pen :

See the Pen gyCBq by anon (@anon) on CodePen

 

With TL.pause() elements are where they should be.

 

But without TL.pause(), or with TL.resume(), they are packed at the start position.

 

Is this expected ?

 

Thank you

Link to comment
Share on other sites

Sorry to bump, but I really can't get this working.

 

To be clear I need to add to a timeline (so I can pause) several elements, each of them with the same tween but with a different offset.

 

See the Pen gyCBq by anon (@anon) on CodePen

 

Thanks for you help.

Link to comment
Share on other sites

It seems you had an error as you were tyring to control cloud7 which didn't exist.

Your tweens were not getting added to the timeline so it seems pausing the timeline had no effect.

 

try this: http://codepen.io/GreenSock/pen/erqgn

  • Like 1
Link to comment
Share on other sites

Also, I think there may be a misunderstanding here about where things get added into the timeline. You're doing a bunch of seek() calls before you add the tweens to the timeline, but that's kinda pointless because you're putting them all at the exact same starting spot on the timeline. The reason it looked like it worked when you kept the pause() in place was because that prevented the timeline from ever rendering the first time, so your tweens were all stuck at their previous seek() state that you had done. 

 

To be clear, tl.add([tween1, tween2, tween3]) will put those all at the end of the timeline such that their starting times are aligned. But it seems like you're wanting to offset them all in which case you can define a unique start time for each tween:

tlCloud.add(cloud1, 27)
.add(cloud2, 24)
.add(cloud3, 0)
.add(cloud4, 10)
.add(cloud5, 16)
.add(cloud6, 21)
.seek(28);

I believe that gets you the effect you were after. And you can delete all those seek() calls you made for each tween.

  • Like 1
Link to comment
Share on other sites

Thank you very much guys, this woks perfectly. GSAP is hard to master but it's totally worth it !

Link to comment
Share on other sites

  • 2 years later...

is it possible to make this with a 100% width container?

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