Jump to content
GreenSock

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

How to simulate css keyframes?

Recommended Posts

With CSS 3 I am able to use keyframes, which makes animating objects really flexible. For example, with keyframes I can change a object opacity from 0 to 1 at 50% of the animation and then back to 0 at 100% of the animation... that creates a smooth fadein and fadeout. I am trying to accomplish the same with gsap. With TweenMax I can set a fromTo... but how, would I go about doing a fromTofrom?

 

I tried doing something like this:

var mydiv = new TimelineMax()
            .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:0, scale:0}, {opacity:1, scale:1}))
            .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:1, scale:1}, {opacity:0, scale:2}));

However, when using "add", there's a very small delay between the first and the second add. How do I go about removing that delay?

 

Or, is there another way of doing chained animations?

Share this post


Link to post
Share on other sites

I think in time you will find GSAP to be much more flexible than CSS animations, especially for sequencing.

 

A basic fade in / fade out can be accomplished in a timeline like so

var tl = new TimelineLite();
tl.from("#redBox", 0.5, {opacity:0, repeat:1, yoyo:true})
 
 
Also I'm not sure where the delay was in your example, but I'm guessing it was an illusion caused by easing. Feel free to post a codepen demo to illustrate it.
 
let us know if you need any more help.
  • Like 2

Share this post


Link to post
Share on other sites

Yep, and just to clarify (since you asked about sequencing two steps), it might look like:

var mydiv = new TimelineMax()
mydiv.fromTo(".mydiv", 1, {opacity:0, scale:0}, {opacity:1, scale:1})
         .to(".mydiv", 1, {opacity:0, scale:2});

I would HIGHLY recommend checking out Carl's outstanding videos/articles about timelines:

http://greensock.com/sequence-video/

http://greensock.com/position-parameter/

http://greensock.com/css-workflow/

 

Seriously, once you get the hang of the syntax and the concept of timelines (which you can nest), you will never want to go back to using CSS animations :)

  • Like 2

Share this post


Link to post
Share on other sites

Hello gimperdaniel ..

 

Here is a comparison with GSAP and @keyframes.. i wasn't to sure what was the CSS @keyframes animation you were trying to mimic with GSAP?

 

Like Carl said it looks like the illusion of a delay is being caused by the easing... i made the easing linear and the illusion goes away. 

 

I also used Jacks example to create a codepen demo, I made both the GSAP and @keyframes animation repeat forever.

 

See the Pen AsxiI by jonathan (@jonathan) on CodePen

 

Of course it will take longer to create the @keyframes because i had to create almost 4 sets of @keyframes for cross browser. :( Since it requires the webkit prefix. Plus all the vendor prefixes for transforms and opacity for full cross browser compatibility for previous and latest version of Firefox, Chrome, Safari and IE versions IE9 and above. I have to write a bunch of CSS just for a simple animation using @keyframes and CSS Animation. Now that is a whole lot of CSS to write :blink:
 

.mydiv {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    
    -o-animation: animate1 1s linear 0s infinite;
    -moz-animation: animate1 1s linear 0s infinite;
    -webkit-animation: animate1 1s linear 0s infinite;
    animation: animate1 1s linear 0s infinite;
}

/* for Firefox and IE */
@keyframes animate1 {
  0% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    transform: scale(0);
  }
  50% {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    transform: scale(2);
  }
}

/* for Chrome and Safari */
@-webkit-keyframes animate1 {
  0% {
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -khtml-opacity: 1;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}

/* for Opera */
@-o-keyframes animate1 {
  0% {
    -o-opacity: 0;
    opacity: 0;
    -o-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -o-opacity: 1;
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -o-opacity: 0;
    opacity: 0;
    -o-transform: scale(2);
    transform: scale(2);
  }
}

/* for Firefox previous versions */
@-moz-keyframes animate1 {
  0% {
    -moz-opacity: 0;
    opacity: 0;
    -moz-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -moz-opacity: 1;
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -moz-opacity: 0;
    opacity: 0;
    -moz-transform: scale(2);
    transform: scale(2);
  }
}

:

As you can see i had to write more CSS rules and @keyframes multiple times, with various vendor prefixes.. and it becomes very irritating when i need to change timing and or CSS properties. Compared to just those 2-3 lines using Jack and Carl's code example using GSAP.

 

http://caniuse.com/#feat=css-animation

 

I still love CSS Animations but GSAP i can write less and focus more on animating stuff :) .. plus no carpel tunnel B)

  • Like 1

Share this post


Link to post
Share on other sites

Ughh!!! just looking at all that code Jonathan posted for just one transition made me dizzy :blink:

 

I agree with the guys, you'll love GSAP and will find yourself making amazing stuff with it in little time.

 

Happy Tweening!!

  • Haha 1

Share this post


Link to post
Share on other sites
Hi :)

 

and another great point about GSAP is that greensock use requestAnimationFrame and this means means less CPU, GPU, and memory usage and leading to much longer battery life , and CSS doesn't even know what that means  :mrgreen:

Share this post


Link to post
Share on other sites

In fairness, CSS animations are tied in with the same cycle as requestAnimationFrame (at least that's my understanding). So it isn't as if they're horribly inefficient like jQuery's use of setTimeout(). But I don't think there is any question that GSAP is far, far more flexible and the syntax is much easier and more concise than CSS. 

Share this post


Link to post
Share on other sites

hi jack :)

 

check the Jonathan codepen , same animation , but when going to other tab and came back can see the difference ! i mean that what happend specialy when have an animation to tell a story or other things in sequences . until i know css cant understand when i going to other tab and GSAP can  :mrgreen: 

Share this post


Link to post
Share on other sites

Thanks guys. I will look into all the answers and see what works for me. I will get back to you soon.

Share this post


Link to post
Share on other sites

My problem was indeed the easing method I was using which was giving the impression that it wasn't a continuous animation.  thanks.

Share this post


Link to post
Share on other sites

Hi,

 

I'm very new to GSAP and I'm struggling to get a fluid looping animation right.

I'm trying to get as close as possible to the CSS example (also in the Codepen) and I'm wondering if there's another better approach with GSAP to what i'm trying to achieve that I didn't think of.

 

Thanks for considering this.

 

 

See the Pen YomQdo by barakhov (@barakhov) on CodePen

 

 

Share this post


Link to post
Share on other sites

@Alex Barak Welcome to the forums and very good question :) There's several things that should be explained here.

 

The first is that I'd recommend just using a staggerTo along with a yoyo instead of using two separate staggerFromTos.

 

You can then use a repeat value of -1 on it to make sure that they repeat immediately, not waiting for the other staggers to complete before repeating. 

 

The next thing is to change the ease from Power0.easeNone to match your CSS animation's ease. So change that to Power1.easeInOut.

 

You also need to keep in mind that while CSS transforms translate elements based on the SVG's height, GSAP translates them based on the height of the element you're animating itself (as is arguably more correct). Thus since you have a translateY of 15%, you need to calculate the appropriate yPercent in GSAP: SVG height * percent = 166px * 0.15 = 24.9px. Then to get that same value as a percentage of the path's height, divide it by the height: 24.9px / 43px = 0.579069767 = 57.9069767%. But in GSAP yPercent assumes that you'll give it a percent, so you can just put the decimal value.

 

The last thing you need to do is change the offset to match the one in the CSS. In the CSS it just divides the total time by 10 to get the offset, so you can do that by just putting the time/10, but I would normally do something like time/paths.length in case you add more elements in the future. 

 

Altogether you get something like this: 

 

See the Pen vqoveL by GreenSock (@GreenSock) on CodePen

 

P.S. You can get all of the elements to start at the beginning by using a negative animation delay :)

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

Here's an old demo I made that shows the beauty of using a Sine easing. 

 

See the Pen VjAvBq by osublake (@osublake) on CodePen

 

  • Like 5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×