Jump to content
Search Community

How to combine multiple keyframes within GSAP animation?

Manojkr test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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/

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


For sequencing it is best to use TimelineLite.

Please watch video and study demos here: http://greensock.com/timelinelite


This demo is good starting point.


var box = $("#redBox")
var tl = new TimelineLite()

tl.to(box, 1, {x:400})
  .to(box, 1, {y:50})
  .to(box, 1, {x:0})
  .to(box, 1, {y:0})



let us know if you need something different.

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Using a timeline to do CSS animations is not something I have ever tried. I think what you are trying to do would be much easier to do by just using relative units. Your end user wouldn't have to figure out the coords. If each move were 50px you could create that sequence by doing this.

tl.set(box, { x: 275, y: 200 }) // Some random position
  .to(box, 0.5, { y: "-=50"  }, "+=0.5") // Up-1
  .to(box, 0.5, { x: "-=100" }, "+=0.5") // Left-2
  .to(box, 0.5, { x: "+=100" }, "+=0.5") // Right-2

See the Pen epeVRX?editors=001 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 4 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...