Timeline movement (newbie)

[Juc1]

Hi all,

 

In my codepen there is some unwanted delay before the bike moves - how do I get the bike and the wheels to move together (not wheels first then bike)?

 

 

Thanks... 

See the Pen KdvzwE by Juc1 (@Juc1) on CodePen

[Diaco]

Hi Juc1 

 

pls fix by set position parameter to 0 , like this :

.to($container,10,{left:600},0);

and pls check this out too about timeline Position Parameter : http://greensock.com/position-parameter

[Jonathan]

To add to the always fast Diaco's great advice

 

You can also use a label in the position parameter:

tl1
.to($spokes, 4, {rotation:360,transformOrigin:"50% 50%",repeat: 2,ease:Linear.easeNone}, "bike") // same label name
.to($container, 10, {left:600}, 'bike'); //same label name 

So since both tweens have the same label name they will play at the same time

• position : *
  (default = +=0) — Controls the placement of the tween in the timeline (by default, it's the end of the timeline, like "+=0"). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient. Be sure to read our tutorial Understanding the Position Parameter which includes interactive timeline visualizations and a video.

TimelineMax DOCs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

Also check out this great video by Carl on using the Timeline in GSAP:

 

 

Learning page: http://greensock.com/learning/

Blog page: http://greensock.com/blog/

 

[Juc1]

OK thanks @ Diaco and Jonathan and yes those two videos are very helpful...