Manojkr

Thanks again for the reply, But I have written a set of keyframes, I want the end users to use Timelinemax to just use the keyframes instead of writing their own code. I am using this on a chessboard, So let's say the keyframes are: move-up-1, move-left-2, move-right-2 In your example, it will be helpful only to me as a developer and not the end user as he will need to find the coordinate position which should not be the case. Again mentioning, something like: timelinemax.to { move-up-1, delay1, move-left-2, delay2, move-right-2, delay3 } Since CSS cannot sequence the animations, I will have to use JS to find `animationEnd` event but this will make the whole process complicated and I just want an alternative with GSAP.

Thanks Carl, I did see the Timeline feature before posting this question. I just need to know how integrate @keyframes instead of specifying the dimensions as you have done in the Codepen example. In my question I have attached the JSfiddle, is it possible to integrate those keyframes inside the timeline code?

I am trying to integrate CSS animation with GSAP. @keyframes animation1 { from { transform: translateX(0); } to { transform: translateX(30px); } } @keyframes animation2 { from { transform: translateY(0); } to { transform: translateY(30px); } } @keyframes animation3 { from { transform: translateY(0); } to { transform: translateY(50px); } } Above code can be achieved directly through Tweenmax, but what I need is to integrate the animation keyframes with the Tweenmax methods. In CSS, the animation3 will overwrite the translate() of animation1 and animation2 which is undesirable. I hope the properties are sequenced when combined with GSAP methods. Something like tweenmax.to { animation1, delay1, animation2, delay2, animation3, delay3 } The behaviour in CSS can also be seen here: http://jsfiddle.net/Manojkr/0z2ehwhd/1/