[Converting keyframes to JS animation with GSAP]

Thank you very much for your answer ! 

 

This piece of code works perfectly.

[Converting keyframes to JS animation with GSAP]

Thank you very much for the prompt reply.

 

The second method is exactly what I was looking for, so I am definitely going to use the bezier plugin.

 

There is however one thing different from the keyframes :

 

I only need 400ms delay between the first and the second scale instruction (scale:0.2 and scale:1).

 

Thanks again !   

 

Edit : Typo.
 

[Converting keyframes to JS animation with GSAP]

Hello everyone,

 

I am new to GSAP and I need your help to convert a CSS keyframe animation in a javascript one with GSAP.

 

@keyframes elliptical-anim {
   0% {
   transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,0deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,0deg) scale3d(.1,.1,1);
}
20% {
   transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-72deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,72deg) scale3d(1,1,1);
}
96% {
   transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(1,1,1);
}
100% {
   transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(.3,.3,1);
}
}

 

I'm using the 3D version of the animations in order to force the hardware acceleration.

 

 

Thanks in advance for your help !

See the Pen yNKwEo by anon (@anon) on CodePen