Jump to content
Search Community

Timeline animation overlapping

funkage 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

Greetings all,

 

I'm sure there's a very simple solution to what I'm trying to achieve but my eyes and mind haven't been able to identify one. So, here goes.

 

I'm trying to animate a bunch of elements that overlap each other and this is made possible by defining the overlap/offset parameter when adding a new Tween to the Timeline. However, when you bunch up a handful of tweens that overlap each other like this:

tl.from(element1, 3, {top:'-428px', ease: Expo.easeOut});
tl.from(element2, 0.4, {'font-size':'0', ease: Back.easeOut}, '-=1.5');
tl.from(element3, 0.4, {width:'0', height:'0', margin:'0', ease: Back.easeOut}, '-=0.2');
 
The last element (element3) doesn't overlay element2's animation because it waits for the Tween (excluding the offset) to be done. That means it takes element3 3.2 (3 + 0.4 - 0.2) seconds to execute when I'm hoping it would be instantly triggered after element2's completion, which is 1.3 (3 - 1.5 - 0.2) seconds instead of 3.2 seconds. I could easily work around this by setting element3's offset to '-=1.7' but this isn't ideal when you have more animations/tweens queued after it. Here's a jsbin that demonstrates my difficulty: http://jsbin.com/oWeyEKU/1/
 
I hope I've been able to clearly describe my desired result and the hiccup I've encountered. Here's thanks in advance for any help that I may receive!

 

Link to comment
Share on other sites

Here's what that code you've written is doing in a 'graphical' form:
 

// timeline creation
var tl = new TimelineLite();

0

// A
tl.from(element1, 3, {top:'-428px', ease: Expo.easeOut});
// appends to the end of the timeline i.e. at 0

A-----------------------------|
0---------1---------2---------3

// B
tl.from(element2, 0.4, {'font-size':'0', ease: Back.easeOut}, '-=1.5');
// appends -1.5 seconds from end of the timeline
// note: timeline duration is still 3

A-----------------------------|
               B---|
0---------1---------2---------3

// C
tl.from(element3, 0.4, {width:'0', height:'0', margin:'0', ease: Back.easeOut}, '-=0.2');
// appends -0.2 seconds from the end of the timeline

A-----------------------------|
               B---|
                            C---|
0---------1---------2---------3--

This is just how the API for GSAP works, so there's not really any 'fix' for this; it's just something you have to get used to. However, here's a few alternatives:

// using absolute positions
tl.from(element1, 3, {top:'-428px'});
tl.from(element2, 0.4, {'font-size':'0'}, 1.5);
tl.from(element3, 0.4, {width:'0', height:'0', margin:'0'}, 1.7);
// if you need relative positions to be offset from the last tween added,
// rather than the end of the timeline, maybe try something like this?
// ...messy, but it does the job if you don't want like the way GSAP API
// does it
tl.from(element1, 3, {top:'-428px'});
var insertpos = tl.duration();
tl.from(element2, 0.4, {'font-size':'0'}, (insertpos -= 1.5));
insertpos += 0.4; // add duration of last tween
tl.from(element3, 0.4, {width:'0', height:'0', margin:'0'}, (insertpos -= 0.2));
insertpos += 0.4; // add duration of last tween

 
 
Also, check out all the different ways .add() can be used, perhaps staggers could be useful to you?

  • Like 4
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.
×
×
  • Create New...