Question about executing multiple overlapping tweens on a timeline

[ryan_brwn]

Hi!

 

I'm working on a single timeline animation that involves several elements. I want one element to execute a long tween while other element(s) proceed with multiple tweens. I've attached a codepen link where I tried to explain what I'm trying to accomplish and the issue I'm running into. I'm pretty sure I'm just running up against my own limited understanding of how tweens work on a timeline, but I figured I'd ask for help. Thanks!

 

 

See the Pen QWrvdpQ by ryankbrown (@ryankbrown) on CodePen

[GreenSock]

What a great minimal demo, @ryan_brwn! I wish every forums poster was as thoughtful as you. Isolating the issue like that is key to getting a quick and accurate answer. 

 

The problem:

by default, tweens are placed at the END of the timeline. You can use the position parameter to control exactly where you place things, but several of your tweens didn't use the position parameter at all, so they were placed at the end. You inserted the red tween first, and it had a duration of 5 seconds, so the timeline's "end" is at 5 seconds at that point. You put a shorter tween on the blue block overlapping it, starting at the beginning, but the overall timeline is still 5 seconds, so when you put another tween in there and don't specify any position parameter, it puts it at the end (the default). 

 

Solution 1: 

Just use the position parameter: 

See the Pen KKRGBQa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Solution 2: 

I find this a better/easier way to mentally organize things: create a sub-timeline that just handles your blue element's motion. Then add() that timeline to the main timeline wherever you want (at a time of 0 in this case). This approach modularizes your animations better and lets you just focus on one piece at a time, and then combine them however you please in a master timeline and tweak the timings in a more intuitive way: 

See the Pen wvjYxjM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

 

Here's an article about the position parameter: 

 

Have fun!

[ryan_brwn]

Ahhhhhhh, Ok this makes perfect sense. I think you're right in that solution 2 is the best way to mentally organize things. I really appreciate how gsap tends to offer lots of different ways to solve common problems. Thank you so much for your help!