Add multiple tweens to one timeline, or create multiple timelines?

[chasebank]

Hello!

 

I'm trying to dynamically create "particles" and animate them. As far as I can tell, I can get more or less the same result by running through a loop that creates each particle and either adds it to an existing timeline, OR creates a new timeline for each particle.

 

Is there much of a difference there? I'm assuming creating a new timeline for each particle isn't performant, but am very new to this and have no real knowledge to base that claim on. For all I know, this is perfectly reasonable.

 

Follow up question, and where I'm really getting hung up. I'd like each particle to start off at a randomized position, or (it would seem an easier way of phrasing the problem) a randomized "time".

 

.progress() seems perfect for this, but can this only be applied to the entire timeline rather than an individual tween? I can get that working for the timeline, but not each tween. Which is what lead me down the path of creating a new timeline for each particle.

 

Here's an example of the shared timeline, where the .progress() method is getting ignored.

See the Pen YYyjvR by chasebank (@chasebank) on CodePen

 

 

And then .progress() working but on a new timeline for each particle

 

See the Pen Mrazvj by chasebank (@chasebank) on CodePen

 

And then if there's any other cruel and terrible code crimes I'm committing here... advise is appreciated!

[Sahil]

What you were doing with progress was creative, but the very tiny issue with that is your elements disappear once animation completes. For that you can wrap elements by using Modifiers plugin. You can read about wrapping function here https://greensock.com/forums/topic/15737-modifiersplugin-helper-functions/ and check docs for ModifiersPlugin, it basically lets you modify values before actually applying them. I know this might seem more complex to you than what you had done but if you care about those tiny details you can take this approach.

 

Another thing is, you were using really old version of TweenMax, cdnjs has dropped support for 'latest' links so it is actually old version.

 

Finally, I am not sure if your approach of explicitly calculating boxsize by multiplying with 2 is correct but I have very little experience with SVGs so you know better or someone else might point out.

 

See the Pen OzyrQb?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

As for timeline, timeline is sequential so it will run each tween after another so you can't really use it in this scenario. You can add all tweens in timeline with position parameter 0 which will make them start at same time but you won't be able to take advantage of your progress approach. I often see people use timelines and add tweens to it on hover effect, and they start wondering why animation doesn't stop. That happens because timeline is going to play every single tween added to it.

 

Also timeline just acts as container, so if you create 10 tweens and add it to timeline, you are still creating same amount of tweens. Just timeline makes it easier for you to manage your animation.  Hope that clears your doubts, though feel free to ask if you have any questions.

 

[chasebank]

Thanks so much for all the info. Glad to take credit for .progress being a clever approach . But the more experience I gain the more I realize that's where I often get into trouble... The trick is learning to recognize when clever becomes too clever.

 

And I thought that progress bit seemed a little too easy...

 

Anyway, I also agree that the viewbox multiplying by 2 thing is strange. In my other tests I was explicitly defining (rather than calculating) dimensions and didn't have any issues there. It was only in these reduced test cases I ran into things only calculating half the dimension. Not obvious to me why that is, (I guess because the zero coordinate is centered?) but doesn't seem too important.

 

One last question to add a bit of complication.

 

Let's say each particle doesn't have a hard coded 20 x 20 dimension, but is instead randomized. Your example has that dimension pre-set in the wrap function, which obviously wouldn't work.

 

Is there any way to access the properties of each object inside the animateParticles function? And then maybe pass the unique dimension into the wrap function?

 

Something like 

function animateParticles() {
   animation = TweenMax.to(".box", 2, {
      x: "+=1000",
      ease: Linear.easeNone,
      onComplete: animateParticles,
      modifiers: {
         x: wrapPartial((target.width * -1), 1000)
      }
   });
}

 

See the Pen NXxGXK by chasebank (@chasebank) on CodePen

 

[Sahil]

Quote

The trick is learning to recognize when clever becomes too clever.

 

Still clever, don't worry about it.

 

Quote

Anyway, I also agree that the viewbox multiplying by 2 thing is strange.

 

Create another question about it so someone will suggest right approach. My guess is that your rect has fixed width, so when you resize SVG, the internal "pixels" get calculate relatively, so even though svg is 500px wide the rect is calculated as 1000px. Following thread had similar issue but I didn't find right answer there,

 

Quote

Let's say each particle doesn't have a hard coded 20 x 20 dimension, but is instead randomized.

 

Ya modifier function gets called with two parameters, current value that is going to be applied and the target element. Here is demo, now wrap function will read value from element every time it gets called. In situations, where width is fixed you can use previous approach to save unnecessary calls to get width. In previous example, wrapPartial was returning a function which was taking 'value' as argument. So that returning function was actual modifier, hope this doesn't confuse you.

 

See the Pen MrKjBV?editors=1010 by Sahil89 (@Sahil89) on CodePen