Jump to content
GreenSock

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

Anybody wanna help reproducing Animate.css w/ 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

I've got a project where I'm using Animate.css a lot, due to the fact that they are super easy to plug in, and the quality of these animations is very good. For anybody not familiar, Animate.css is just a pre-done CSS file that you can plugin really easily by just adding these animation classes to your element. The guy has a nice page showing what each animation looks like, so you don't have to spend all of the time experimenting yourself. 

 

But...Greensock would of course be better! For a slideshow like I'm doing now using TimeLineMax, I've found that trying to integrate Animate.css is really a challenge. While probably doable with a couple more hours of tweaking, I think I'd rather replace them with Greensock versions.  I'd be happy to post what I come up with here.  Is there anybody else who might like to have a list of Greensock compatible replacements for some of these? Or just even a master list of animations sort of like Animate.css has,  people can use to plug in animations quickly? Seems like a worthy idea anyway!

 

best wishes

Stacey

Link to comment
Share on other sites

Ah 1 note - I've stripped all vendor prefixes out of my Animate CSS file, i'll attach it here in case anybody would like to see.

Link to comment
Share on other sites

Hi Stacey,

 

Nice to see you here again. Yeah, animate.css is a pretty cool tool and does what it is supposed to do very well: make it real easy to drop in cool effects.

 

The trouble, as you are finding, is that customizing or controlling those effects is very difficult if not impossible.

 

Unfortunately we don't have a batch of "common effects" laying around. It's something we've considered and we know it could be helpful if folks could do

something like: TweenLite.flipSlow("#header").

 

I don't have the time to get deep into doing the type of css to gsap conversion for you. Maybe someone else here would like to take a stab at it. If you do have a common effect you would like to re-use, you could do something like this

 

function fadeInRotateFadeOut(element){
  var tl = new TimelineLite();
  tl.fromTo(element, 1, {alpha:0}, {alpha:1})
    .to(element, 1, {rotation:360})
    .to(element, 1, {alpha:0})

return tl;
}

//somewhere else in your code do
fadeInRotateFadeOut("#header");

//or add the effect to an element in a timeline

mainTimeline.to(something, 1, {left:200})
.add(fadeInRotateFadeOut(someOtherElement))
.to(somethingElse, {rotationX:180});
see example:

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

 

make sense?

 

Thanks again for the suggestion. Hopefully we'll have some time to develop some new methods or plugins that can handle some useful canned effects.

 

-carl

  • Like 1
Link to comment
Share on other sites

Hey Carl, great to hear from you! Hope the kids are doing great. We had our last this October, she's now nearly 4 months and smiles most of the day. I guess God can be generous if you are crazy enough to have a 3rd! I was super delighted to see that you are officially part of Greensock now - what a great team. Congrats to all of you. I enjoyed reading the About Us page, what a wonderful group of guys. It's wonderful to see you mention your faith in your bios as well (not sure if faith should be Faith or not). I've not exactly cranked out the apps this year like I did last year, but instead I've dedicated the past 5 months or so to learning JS, playing around with SVG and about a billion JS libraries/frameworks, lol. The problem is a person could spend all day learning new things, every day! I've been building a kind of boilerplate in Visual Studio's Blend, rewiring everything w/out using the Win8 specific JS stuff, WinJS. While you can't avoid it completely for some things, I'm pretty close to the point there my apps will be easily ported to IOS and Android, with minimal impact. I'm using Knockout and some other very cool JS plugins, and of course Greensock. Still just can't beat it for ease of use and massive feature set. Such great work has gone into it. Anyway about the plug and play idea - I was hoping this thread might produce some posts from the community - if 10 or 20 people could throw up a solution they've found, we'd have a pretty nice list going. So here's my first contribution - the smooth Greensock powered Flip Card.

 

I've put it on CodePen - you can check it out here!

 

See the Pen DsCEt by mspanish (@mspanish) on CodePen

 

Let me know if you can't reach the Pen by this address

Edited by mspanish
Link to comment
Share on other sites

Ok for me the CodePen is working in IE 10 Desktop version, just not the mobile Win8 "app" IE version.

 

Not sure what is the problem with IE 10's RT version - or whatever they are calling it - something with skewY not being fully supported?

 

Anyway hopefully we can gather some good Pens and Fiddles on this thread so that people can jump into animating with Greensock even faster!

Link to comment
Share on other sites

Thanks for sharing the pen. Very cool. Have your tried rotationX? It works great in modern browsers. 

You can read a little more about the 3D transforms here: http://www.greensock.com/css3/

 

Here are pens of some of those demos:

 

See the Pen 8ce6d59776cfdf8e6e29b87ef522ed13 by GreenSock (@GreenSock) on CodePen

See the Pen 1e7b3c573ae478e7d9e68afd582bb63f by GreenSock (@GreenSock) on CodePen

 

Congrats on the baby. Wow, i admire your ability to learn a zillion js libraries while juggling 3 kids; especially an infant. My little ones(2.5yrs and 9mos) are doing great but they keep us very busy. Thanks for asking. 

 

Looking forward to seeing some win8 apps from you. I have no idea what that odd flavor of IE10 is choking on, I'll poke around. I don't have a device to test on but I know that even in the full-blown desktop version of IE10 the don't have support for the "preserve-3d" keyword... which is very disappointing. Who knows what shortcuts they took with their RT / metro / windows-8-style / whatever-they-call-it version. 

Link to comment
Share on other sites

  • 1 year 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.
×