Need help with bezier animation.

[Bonaca]

Could someone help me to create a bezier animation like this

I tried with this:

TweenMax.to(moon, 10, {bezier:{type:"soft", values:[{x:100, y:100}, {x:200, y:100}, {x:100, y:311}], autoRotate:true}});

But:

- I cannot adjust the path identically

- I tried with plugin-explorer - there is no js code, just as. I tried that code - without success

- The moon needs to be scaling 200% from start to the end point

- z-index should be higher at the and.

- How to adjust the pause between two sessions ?

 

Any help, pls.

[Carl]

Hi and welcome to the GreenSock forums.

 

I didn't have a lot of time to finesse the animation but give this a look:

 

 

 

//create a TimelineMax with repeat and repeatDelay
var tl = new TimelineMax({repeat:4, repeatDelay:2});


//add bezier tween
tl.to("#moon", 4, {bezier:{type:"soft", values:[{x:570, y:100, rotation:100, scale:1.5}, {x:-150, y:311, rotation:200, scale:2}], timeResolution:10}, ease:Linear.easeNone});


//change the z-index of moon
tl.set("#moon", {zIndex:3}, 1.5);

 

live preview:

See the Pen 696ce9aec72beabca04bff816c81936f by GreenSock (@GreenSock) on CodePen

 

 

This example uses TimelineMax to sequence the changing of the z-index and to allow the animation to repeat with a delay.

[Bonaca]

Hi, Carl

 

first - thanks a lot for your time and for your welcome. Your solution is ... - perfect !

second - must say - I still can't believe that this (free) technology exists at all !

I'm sure - this is the future of coding digital animations.