Jump to content
Search Community

Best Way to use GSAP with Animate.css

WarenGonzaga 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 everyone! I am trying to use GSAP with Animate.css to create flexible animation for banner ads. I know this is possible but I would like to know the best way to use GSAP + Animate.css to improve my coding. I've provided link for codepen! Any suggestion would be great! If you have experience with GSAP + Animate.css please comment here!

 

What is Animate.css?

--> a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

 

Thanks GSAP Masters!

 

HTML:

<div id="circle"></div>

CSS:

#circle {
  width: 200px;
  height: 200px;
  background: #222;
  border-radius: 200px;
}

Javascript:

window.onload = init;

function init() {
  TweenMax.set("#circle", {alpha: 0, x: "+=100px", onComplete: a});
}

function a() {
  TweenMax.to("#circle", 1, {delay: 1, alpha: 1, onStart: aa});
  TweenMax.to("#circle", 1, {delay: 1.5, onStart: ab});
  TweenMax.to("#circle", 1, {delay: 2, onStart: ac});
  TweenMax.delayedCall(2, ad);
}

function aa() {
  $("#circle").addClass("animated wobble");
}

function ab() {
  $("#circle").css("margin-left","100px");
}

function ac() {
  $("#circle").addClass("animated bounce");
}

function ad() {
  $("#circle").removeClass("animated bounce wobble")
}

See the Pen LRGVBK by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

Link to comment
Share on other sites

Hello WarenGonzaga, :D

 

I am a little confused by your question. :blink:

 

Both GSAP and animate.css will be competing against each other. You should choose either or but not both. Just as you shouldn't use CSS transitions and CSS animation with GSAP since both will be competing to animate the same properties. ;) Changing CSS properties outside each other which is just asking for trouble.

 

Also i notice your also mixing jQuery css() with GSAP. That will cause issues since your setting CSS properties outside of GSAP, so it wont know when changes are made outside itself. So you should use the GSAP set() method instead of the jQuery css() method.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

To save headaches i think you should just choose one to rule them all. Either use GSAP or animate.css so you dont have each at war for animating your elements, but of course i would choose GSAP for greater performance and timeline control.

 

Others might have there own opinion but that was just my two cents, Happy Tweening :)

Link to comment
Share on other sites

Hello WarenGonzaga, :D

 

I am a little confused by your question. :blink:

 

Both GSAP and animate.css will be competing against each other. You should choose either or but not both. Just as you shouldn't use CSS transitions and CSS animation with GSAP since both will be competing to animate the same properties. ;) Changing CSS properties outside each other which is just asking for trouble.

 

Also i notice your also mixing jQuery css() with GSAP. That will cause issues since your setting CSS properties outside of GSAP, so it wont know when changes are made outside itself. So you should use the GSAP set() method instead of the jQuery css() method.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

To save headaches i think you should just choose one to rule them all. Either use GSAP or animate.css so you dont have each at war for animating your elements, but of course i would choose GSAP for greater performance and timeline control.

 

Others might have there own opinion but that was just my two cents, Happy Tweening :)

 

Hey buddy! Exactly! I will elaborate my question! I have recently banner project which is rely on animate.css properties such as bounceIn and rubberBand animation. That's the animation I can't improvise using gsap. Can we made plugin for animation from animate.css?

 

You can read the github repo here!

 https://github.com/daneden/animate.css

Link to comment
Share on other sites

Hi Warren,

 

Using GSAP to trigger animate.css is sort of like trying to chop down a tree by hitting a steak knife with a chainsaw. I don't really recommend the approach you are after as you lose so much control and I'm really not sure what Animate.css can do that GSAP can't. I know someone converted all of animate.css to GSAP but unfortunately I can't seem to find the site now.

 

If you really want to go through with this instead of doing a bunch of tweens with onStart callbacks you should just throw your functions into a timeline at specified times using the position parameter:

 

var tl = new TimelineMax({repeat:6});


tl.add(function1, 1)
  .add(function2, 2)
  .add(function3, 3)


function function1() {
  console.log("function1");
}


function function2() {
  console.log("function2");
}


function function3() {
  console.log("function3");
}

http://codepen.io/GreenSock/pen/NRxXVq?editors=0011

 

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

  • Like 2
Link to comment
Share on other sites

Ah ha! @Carl, I knew I saw this before somewhere and thought the same thing, I just can't seem to Google it. Animate.css it terrible for SEO.

 

But to answer OPs questions, I would have to agree with Jonathan and Carl, you shouldn't really need both animation libraries, just pick one and stick to it.

 

In terms of creating banners as you have mentioned, I would really recommend GSAP as it a file weight exemption from the majority of ad server platforms these days, where I doubt Animate.css has that level of support. Looking at the aminate.min.css file is already 50kb https://github.com/daneden/animate.css/blob/master/animate.min.css

 

You can, of course, try to re-create all the animations in GSAP.

 

CodePen: 

See the Pen LRGZxz?editors=0010 by joemidi (@joemidi) on CodePen

  • Like 3
Link to comment
Share on other sites

 

Hi Warren,

 

Using GSAP to trigger animate.css is sort of like trying to chop down a tree by hitting a steak knife with a chainsaw. I don't really recommend the approach you are after as you lose so much control and I'm really not sure what Animate.css can do that GSAP can't. I know someone converted all of animate.css to GSAP but unfortunately I can't seem to find the site now.

 

If you really want to go through with this instead of doing a bunch of tweens with onStart callbacks you should just throw your functions into a timeline at specified times using the position parameter:

 

var tl = new TimelineMax({repeat:6});


tl.add(function1, 1)
  .add(function2, 2)
  .add(function3, 3)


function function1() {
  console.log("function1");
}


function function2() {
  console.log("function2");
}


function function3() {
  console.log("function3");
}

See the Pen NRxXVq?editors=0011 by GreenSock (@GreenSock) on CodePen

 

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

 

 

This is great as snippet for using animate.css with gsap!

Link to comment
Share on other sites

Anyway guys! As you said that choose one library. So I decided to start a project for GSAP - animate.css project that will improvise their animation. I will need your help guys for creating this plugin. @Carl do you have documentation on how to make plugin with gsap? I will make now github repo for this plugin so we can collaborate with improvising the animate.css animations into gsap version. Anyway thanks for helping me and I really appreciate your opinions and help! I will post the github repo for improvising animate.css. Have a great day buddies!

Link to comment
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.
×
×
  • Create New...