Jump to content


Question about executing multiple overlapping tweens on a timeline

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts



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

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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!

  • Like 1
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.