Jump to content
Search Community

How to create a keyframe animation with gsap?

Sophia 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

Hello all

 

I want to create a animation like CSS3 keyframe animation with GSAP, but I have encountered some problems.

 

The first is how to set keyframes, see the below css code:

.element{
  animation: ball 2s ease-in-out
}

@keyframes ball{
  25%{
    background:red;
  }

  50%{
   background:yellow;
  }

  75%{
    background:green;
  }

  100%{
    background:black;
  }
}

//or a more complex one
.Shake {
  animation: Shake 3s ease 0s forwards;
}

@keyframes Shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}

I use TimelineLite.to() with accurate time setting to create a similar animation:

var timeline = new TimelineLite();
timeline
.to(element, 0.5s, {backgroundColor:red})
.to(element, 0.5s, {backgroundColor:yellow}, 0.5)
.to(element, 0.5s, {backgroundColor:green}, 1)
.to(element, 0.5s, {backgroundColor:black}, 1.5) 

Is there any better way to create such a animation?

 

And the second problem is how to set a type of ease to the whole timelineLite, not just to one of the tweens?

For example, in css, 'ease-in-out' is applied to the whole animation, not just between two of the keyframes.

.element{
  animation: ball 2s ease-in-out
}

But in gsap, it just works on one of the tweens , not the whole timeline.

var timeline = new TimelineLite();
timeline
.to(element, 0.5s, {backgroundColor:red,ease: Back.easeOut})
.to(element, 0.5s, {backgroundColor:yellow,ease: Back.easeOut}, 0.5);  

Any help very much appreciated! :)

Link to comment
Share on other sites

Hi Sophia,

You are correctly creating a timeline for the first CSS animation, you just don't need to position these tweens absolutely.

var timeline = new TimelineLite();
timeline
.to(element, 0.5s, {backgroundColor:red})
.to(element, 0.5s, {backgroundColor:yellow})
.to(element, 0.5s, {backgroundColor:green})
.to(element, 0.5s, {backgroundColor:black}) 

They will naturally play after each other.

 

And your second question might have a few answers.

 

1. You can overwrite a default ease Power1.easeOut at the top of your js file.

TweenLite.defaultEase = Power3.easeInOut;

All tweens would then by default use this easing.

 

2. You can create another timeline that controls a movement of your elements.

var tlMove = new TimelineMax({repeat: 4});

tlMove
  .to($elGSAP, 0.3, {x:-10, ease:Power1.easeOut})
  .to($elGSAP, 0.6, {x:10, ease:Power1.easeInOut})
  .to($elGSAP, 0.3, {x:0, ease:Power1.easeIn});

And use the right easeOut, easeInOut and easeIn combination.

 

3. You can create a single tween that would control a progress of the timeline, that would be paused by default.

TweenMax.to(tlMove, 4, {progress: 1, yoyo: true, repeat: -1, ease:Power1.easeIn});

The easing specified in this tween will be used for the whole tlMove playback.

 

Hope that answers your question or gives you a few options to create the animation you are after.

 

Here is a

See the Pen 7fadb4b21aabf79307ad3018c392536e by ihatetomatoes (@ihatetomatoes) on CodePen

.

 

Cheers

Petr

  • Like 6
Link to comment
Share on other sites

Oh, Petr, thank you very much ,you are so nice! :)

 

Your answers help me a lot, and let me learn more about gsap.

 

The solutions have solved my problems perfectly!

 

Now, I am facing a new problem. For example, if I want to make a animation like this below:

The left is not changed at the frame of 25% and 50%, but it really start animating from 0 to 200 at the beginning.

.box{
    position: absolute;
    top:0px;
    left:0px;
    width: 100px;
    height: 100px;
    animation:anim 4s both ease-in-out;
}

@keyframes anim{ 
 0%{ top:0; left: 0; }
 25%{ width: 200px; } 
 50%{ top:150px; } 
 100%{ top:200px; left: 200px;width:50px } 
}

I want to create it with gsap, so I write code below:

var tl = new TimelineLite();
tl
.to(box1, 1, {
   width: 200
})
.to(box1, 2, {
   top: 150
})
.to(box1, 2, {
   top:200,
   left:200,
   width: 50
})

But in this way, the left and width doesn't animating like css3,the left only animate at the third Tween and the width animate at the first one and the third one.So I must set individual Tweens for the left and width properties like this:

tl
.to(box1, 1, {
    width: 200
 })
.to(box1, 3, {
    width: 50
})
.to(box1, 2, {
    top: 150
},0)
.to(box1, 2, {
    top: 200
},2)
.to(box1, 4, {
    left:200
},0)

Is there any available way to set the frames just like css,in which if a property is not changed in one of the frames it also can have a smooth animation .I think it will be a tough work if there are many properties in an animation in which the properties may not be set in the intermediate frames. I need set many individual Tweens for these properties.

 

My English is not very well, I hope the code can help me illustrate my question.

 

Thank you again from your help! :D

Link to comment
Share on other sites

Thank you for the demo. It really helps.

 

The GSAP solution can be done with just 2 lines:

tl2.to($gsapBox2, 2, {left:100, width:200, repeat:1, yoyo:true})
   .to($gsapBox2, 4, {top:200}, 0);

http://codepen.io/GreenSock/pen/RaLyWe?editors=0010

 

CSS and GSAP take a very different approach and it may just take a little time to break the "css mindset".

Once you get more familiar with the GSAP syntax and features I'm confident that you will really learn to appreciate the additional features and flexibility.

 

Just one thing to consider, imagine you had to tween properties of another element before and after the animation on the box?

 

With GSAP it is super simple:

 

http://codepen.io/GreenSock/pen/ONxZMG?editors=0010

 

Now consider doing that with CSS and then also needing the ability to play, pause and reverse at runtime? It gets incredibly more difficult.

 

I encourage you to stick with GSAP, if you have any questions we are here to help.

  • Like 4
Link to comment
Share on other sites

Carl points out one of the best parts of CSS vs GreenSock - making rapid changes and additions is so much easier with GSAP. I'd also like to encourage you to stick with GreenSock. After you practice for a bit, everything will start to make sense and you'll never want to touch a CSS animation again. Then you'll dive deeper into really fun stuff like animating timeScale() and building nested timelines with functions. 

 

It's funny - I first started using GSAP because I found CSS animations cumbersome and they look like gibberish to me. Making changes just frustrated the heck out of me too.  :x You couldn't pay me enough to use any CSS animations now.  :-D

 

You're doing great - keep it up. The forum mods and members are more than happy to assist you with all your questions as you continue your journey into the wonderful world of GreenSock.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Thank you all for your help , Carl, Point C and Petr.

 

I'm so moved that you help me patiently and give me a lot of nice advices.It really works.

As you said, it may costs some time for me to break the "css mindset".I'm trying now.

 

The GSAP animation really gives me a new cognition of web animation. I really love it and enjoy the journey.

 

Thank you again.

Best wish to you and your team! :D

  • Like 4
Link to comment
Share on other sites

  • 3 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...