Jump to content
Search Community

Timeline - same tween on several elements with offset

kursus test
Moderator Tag

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

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

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

  • 2 years later...

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