Jump to content
Search Community

How to simulate css keyframes?

gimperdaniel test
Moderator Tag

Go to solution Solved by GreenSock,

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

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?

Link to comment
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
Link to comment
Share on other sites

  • Solution

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
Link to comment
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
Link to comment
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. 

Link to comment
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: 

Link to comment
Share on other sites

  • 4 years later...

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

 

 

Link to comment
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
Link to comment
Share on other sites

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