[menu like macOS dock help]

Wow, it's perfect. Thank you so much!

[menu like macOS dock help]

I would like to make the menu with the smooth magnification effect like the dock in macOS.

 

I took this example as a basis 

See the Pen BZNGyd by osublake (@osublake) on CodePen

 but the animation does not work smoothly and only starts when you move to the next or previous element.

 

Is it possible to make the animation work smoothly and work at the slightest mouse movement? As in this example 

See the Pen bNZrEN by icebob (@icebob) on CodePen

 

Any help with this question would be great.

 

See the Pen zmybJa by berikiushi (@berikiushi) on CodePen

[how to define a variable in the timeline?]

his own answer

.call(function(){ console.log('call.3'); }, [], this, 3)

thanx

[how to define a variable in the timeline?]

the documentation says that i can call at any time

tl.call(func, ["param1"], this, 2);  //appends it at exactly 2 seconds into the timeline (absolute position)

I try to do so and does not work:

.call(function(){ console.log('call.3'); }, 3)

help please.

[how to define a variable in the timeline?]

Thank you, did not think that need to wrap a function.

[how to define a variable in the timeline?]

var state = true;

var tl = new TimelineLite();

tl.to(element, 1, {width:"50%"})

.to(element, 1, {backgroundColor:"#FF0000"}, "-=0.5")

.set(state = false) //something like for example

.to(element, 1, {width:"50%", onComplete:state = false}); //or as

 

[How start playing TimeLine from another TimeLine?]

please tell me how start playing TimeLine from another TimeLine, for example:

 

var tl1 = new TimelineMax({paused:true});
tl1.append( TweenMax.to($('.bg'), 2.2, {css:{autoAlpha:1, scale:1}, ease:Power2.easeOut}) );
// here need start playing tl2
tl1.append( TweenMax.to($('.logo'), 1, {css:{right:"+=89", autoAlpha:1}}) );

var tl2 = new TimelineMax({paused:true});
tl1.append( TweenMax.to($('.frame'), 1.5, {css:{left:+=100}, ease:Power2.easeIn}) );
tl1.append( TweenMax.to($('.bullet'), 1, {css:{top:"+=120", autoAlpha:1}}) );