Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Manojkr

How to combine multiple keyframes within GSAP animation?

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 post
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})

http://codepen.io/GreenSock/pen/zvPGOb?editors=001

 

let us know if you need something different.

  • Like 2
Link to post
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 post
Share on other sites

I'm not sure what you mean by integrate keyframes instead of specifying dimensions. Isn't this what you want to happen.

 

move to x: 30

delay

move to y: 30

delay

move to y: 50

 

See the Pen meqMae?editors=011 by osublake (@osublake) on CodePen

  • Like 1
Link to post
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 post
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 post
Share on other sites

Just wanted to note for future readers: GSAP has its own keyframes now! For more information, see the GSAP 3 release notes:

 

  • Like 1
Link to post
Share on other sites

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.

×