grouping parallel tweens in a timeline more conveniently

[katerlouis]

Yep, it's me again

 

Again I hope there is a more conenient way of doing things.

But I learned my lesson! Here's a codepen: 

 

I have looots of lil tweens in a timeline which should have equal position and duration.

Writing these two down for every lil tween isn't just annoying. When you need to update it, it gets even more frustrating.

 

Regarding the position value, labels are a quite okay solution.

But I find it annoying to type the label at the end of every new tween I add (yes, nitpicky!)

 

Different story when it comes to the duration value.

Of course I could add a variable somewhere at the beginning. But I'm talking huge animations; always scroll up to the variable when I want to change the value? Annoying. And the code readability suffers with so many durationXY-variables.

 

And yes, I could make multiple timelines and then call them in a master timeline.

But that's unnecessary clutter-code. 

 

What I imagine is something like this:

tl = new TimelineMax();
tl

.to(".someElement", 0.5, { scale: 2 })
.from(".someOther", 2, { rotation: 90 }, "+=1")

// a group would somehow just append to the main timeline
// or we call it .sameDurPos() D:
.group(5, "-=0.5", function() {
	// .to, .from etc. would need to be overwritten 
	// this.to(...) would call tl.to() and mix it with the .group() parameters
	this.to(".box1", { ...animation properties... }); // does this. even make sense? 8)
	this.from(".box2", { ...animation properties... });
	this.fromTo(".box3", { ...animation properties... }, { ...animation properties... });
	this.staggerTo(".box3 span", { ... }, 0.5);
})

.to(".justGoOn", 2, { ... }, "labeeeel")
;

I am just looking for ways to focus more on the concepts behind the animation and less on the actual code.

And as awesome as GSAP is (and it is, .. jeez) I find that some things feel unnatural. 

 

Is there a way to enhance the TweenMax object with own functions? So maybe I'm dope enough to implement my own .group() function 8)

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

[GreenSock]

I really don't think we need to bloat the official API further with that type of thing when it'd be relatively easy to just build your own functions around whatever you need to parameterize, like:

//parameterize whatever you want...whatever changes often
function scene1(d) {
  var tl = new TimelineLite();
  tl.to(".box1", d, {...})
    .to(".box2", d, {...}, 0)
    .fromTo(".box3", d, {...}, {...}, 0);
  return tl;
}

//create a master timeline and drop in whatever you want, nesting scene1()...
var master = new TimelineLite();
master.to(...)
 .add(scene1(2), "+=1")

That way, you can just tweak the duration (or whatever you find yourself needing to change often) via simple parameters. This approach also makes your code much more modular and easy to shift around. Like if you want to put scene1() later or earlier, it's trivial. Also remember that if you're doing the same tween to a bunch of stuff, you can just pass them all in as the target (array or selector text). And have you seen the function-based values? Those might also come in handy at times. Read more at https://greensock.com/1-19-0/

 

Does that help at all? 

[OSUblake]

If you don't like tweaking your animations with code, you should look into using some sort of gui library like QuickSettings. If you check out their demos, you'll see how you can make a control for practically anything.

 

Is this better? When you're done, you can safely remove the library and it will work the same.

See the Pen 1d41e4a147b32a0de8dd934cbeebc10b?editors=0010 by osublake (@osublake) on CodePen

 

.

[katerlouis]

I didn't think of a parameter for a sub-timeline. Nice! 

Function-based values also sound promising.

 

This definitely helped. Thanks!

 

 

I completely agree that with your suggested solutions in mind it would be just bloaty code for the GSAP library.

But still I find the thought to stay right inside my timeline-flow, not needing to scroll / jump back and forth to change things, tempting.

 

Just for fun and learning I'd like try the .group() idea implementation for myself.

Is there a way to enhance the TimelineMax object with custom functions?

 

Thank you very much, Sirs

[OSUblake]

While not always a good idea, every object in JavaScript has a prototype that you can add methods and properties to. For your group idea to work, it will require some work, and might not be worth the effort, but here's the basic idea. You'll have to create an object with the methods of a timeline you want to use, but without a duration and position parameter. Basically a fake timeline. You'll use that fake timeline to add tweens to the real timeline.

See the Pen 336146a07bb599bb5c895d860fbc4615?editors=0010 by osublake (@osublake) on CodePen

 

.

[katerlouis]

Thank you very much!

 

"but here's the basic idea" – You just made the thing; I wanted to do this myself :'(

But hey! I still could add the other timeline methods; Woop Woop!

 

I appreciate the effort and can tell you it works like a charm and is in production 8)

 

 

Case Closed!