Same element: Timing and transition on TimeLineMax

[TheLaz]

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 

[Jonathan]

Hello TheLaz, and Welcome to the GreenSock forum!

 

Sorry to hear your having an issue. Do you have a code example of what you have tried so we can see your code example in context?

Here is a video tut on how to create a codepen example.

This way we can test your code live on codepen to better help you!

 

Usually you can just add another tween to animate the border radius during the other tween going into slow mo. and have that border-radius tween start using the position parameter so you can use relative positioning += or -=.

 

 

Thanks!

[TheLaz]

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)

[Carl]

Hi and welcome to the GreenSock forums,

 

Just to clarify, Jonathan asked for a CodePen demo so that we could roughly see what you are trying to achieve so that you wouldn't have to create an ASCII art representation.

 

It saves us a lot of time and makes things much easier if there is at least some code we can work with in a live, editable environment. 

 

If you want to have overlapping tweens of different properties of the same element at the same time, you can achieve that with TimelineMax by adding 2 separate tweens

var tl = new TimelineLite();
tl.to(".grey", 2, {x:500})
  .to(".grey", 1, {rotation:360, ease:Back.easeOut}, 0); //rotate for only the first 1 second of animation

 

http://codepen.io/GreenSock/pen/EyqrOd?editors=1010

 

I'm not entirely sure but it almost seems like you are asking for a way to combine eases together so that an Elastic.easeOut ease might start much slower than normal or something. Unfortunately, that isn't currently possible but there is a good chance that type of flexibility will be added in the future. 

[TheLaz]

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 !

[Jonathan]

Thank you for sharing your solution TheLaz