[Same element: Timing and transition on TimeLineMax]

Hey Carl, 

 

Thank you for your quick reply !

 

Your response gave me some clue of what I need, therefor i am marking this as solved !

 

Just to share my solution with others :

 

1 - Use: Circ.easeIn (kinda get you the SlowMo with Elastic)

2 - Using label for marking the TimeLine so you can trigger different transitions on the same element

 

Ex:

flyingMessageTimeLine.to(flyingMessage, 1, {
                        ease: Circ.easeIn,
                            top: flyingDestination.top,
                            left: flyingDestination.left
                        })
                        .add("bubble", 0.2)
                        .to(flyingMessage, 2, {'border-radius': '0'}, "bubble");

GSAP is an amazing library !!

 

Again Thank you !

[Same element: Timing and transition on TimeLineMax]

Hey Jonathan,

 

i am familiar with the examples but unfortunately they addressing the scenario of multiple elements.

 

 

 

Maybe i will try to explain my scenario again:

 

 

 

I have an element: #message

 

Which i want to position at some dynamic (X,Y)

 

 

 

The animation TimeLine:

 

 

0----------1------------------------2.5

|            Elastic                 |

|------------------------------------|

|  SloMo                             |

|----------|-------------------------|

 

 

 

 

From 0 sec - 1 sec i want to apply some effects (border radius transition)

[Same element: Timing and transition on TimeLineMax]

Hey,

 

I am animating the position of an element using TimeLineMax with Elastic easing.

 

The destination positioning of the element is dynamic.

 

Animation duration is: 1.5 sec.

 

 

I am wondering if it is possible that the beginning of the animation will start slowly up till a point in time,

 

then to apply some transitions (border radius) and then let the animation continue normal.

 

 

You can think of Elastic with a SloMo start.

 

In that SloMo applying some effects.

 

 

Is it possible to do this easily without breaking the animation into 2-3 parts ? 

 

 

Ex:

 

Element is moving towards destination point

 

0 sec - 0.5 : SloMo

- apply border radius effects etc ..

 

0.5 - 1.5 : Elastic 

 

1.5 - end

 

Thank in Advance