Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MLM

Define relative `position` and `label` in TimelineMax

Go to solution Solved by Carl,

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

When working with TimelineMax, is it possible to use a relative position and have a label?

 

I have tried to chain `addLabel` before and after the desired position, but it does not seem to be able to be referenced.

 

Am I falling into some sort of anti-pattern?

 

Here is a barebones demo: 

var tl = new TimelineMax();

var boxNode = $('.box');
tl
	.fromTo(
		boxNode,
		8,
		{
			autoAlpha: 0
		},
		{
			autoAlpha: 1
		},
		'fadeIn'
	)
	// Start the movement alongside the fade
	.addLabel('moveFromTop')
	.to(
		boxNode,
		1,
		{
			top: '200px'
		},
		'fadeIn+=0'
	)
	//.addLabel('moveFromTop')
	// One second after moving from top, move from the left
	.to(
		boxNode,
		1,
		{
			left: '200px'
		},
		'moveFromTop+=1'
	);

See the Pen VLrpQX by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Your code is working as expected. I've noted the start time of each item:

tl.fromTo(boxNode,8,{autoAlpha: 0},{autoAlpha: 1},'fadeIn')//added at time(0)
.addLabel('moveFromTop') //added at time(8)
  //move down while fade in is happening
.to(boxNode,1,{top: '200px'},'fadeIn')//added at time(0)
// One second after the fade in is complete, move to the left
.to(boxNode,1,{left: '200px'},'moveFromTop+=1');//added at time(9)

The "problem" is that your first tween which is 8 seconds long is dictating where the end of the timeline is but you want to align with other shorter tweens that end before that 8 seconds. This behavior is all by design and we have a way to work around it in these types of cases.

 

by using TimelineLite.recent() we can get the most recently added tween and then get its endTime() like so:

tl.fromTo(boxNode,8,{autoAlpha: 0},{autoAlpha: 1},'fadeIn')//added at time(0)
.addLabel('moveFromTop') //added at time(8)
  //move down while fade in is happening
.to(boxNode,1,{top: '200px'},'fadeIn')//added at time(0)


  .addLabel("topDone", tl.recent().endTime()) //added after previous tween ends at time(1)
// One second after moving from top, move from the left
.to(boxNode,1,{left: '200px'},'topDone+=1');//added at time(2)

http://codepen.io/GreenSock/pen/gpXmQq?editors=001

 

The important thing here is to realize that in your original code the "moverFromTop" label is added at 8 seconds.

 

 

Read about recent()

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/recent/TimelineMax/recent/

  • Like 1
Link to comment
Share on other sites

@Carl The `addLabel` behaviour makes total sense now. Thank you for the explanation.

 

I wish you could pass in another parameter after `position` to label it but the `TimelineMax.recent()` workaround works great.

 

See the Pen NqwgNw by anon (@anon) on CodePen

. Carl also has a link to a demo in his reply.

 

@Rodrigo Thanks for the reference, I have watched that video multiple times even before this issue.

 

`TimelineMax.recent` would make a great addition to that page.

  • 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.
×