Jump to content
Search Community

using scrollmagic and GSAP to replace wow.js and animate.css

philip_b 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

Hi,

this is probably a dumb question, sorry if that's the case!

I'm currently using wow.js and animate.css to add some movement to a site I'm working on.  It's really easy to implement, i.e. if I want a div to fade in from the left (when you have scrolled down the page so that the div becomes visible on screen) I add the following:-

<div class="wow fadeInLeft">some content here</div>

 

It's so simple to impliment.

 

I'm wanting to use scrollmagic and GSAP to add parallax to my website and wondered how easy it would be to use them to also replace my wow animations.

 

I guess my question is.... is there a way I can add a class name to a div and get GSAP to animate it based on what the class name is.

 

Cheers,

Philip

 

 

 

 

 

Link to comment
Share on other sites

Hi Philip. There are no "dumb" questions around here - don't worry about that. 

 

GSAP can certainly animate to/from class names, but the specific question you're asking sounds much more like a ScrollMagic one than a GSAP one. I'm just not very familiar with ScrollMagic (we didn't author that), but it might be as simple as adding a className tween. Maybe try that and then if you have more ScrollMagic-specific questions, ask the author on github or something. It always helps to have a simple reduced test case too, like in codepen. 

 

Happy tweening!

Link to comment
Share on other sites

Hey Jack, thanks for the incredibly fast response, much appreciated.

 

I don't think I explained myself well in the original post as I'm sure my question pertains to GSAP, not scrollMagic.

 

Currently I'm using wow.js and animate.css, wow is the trigger mechanism much the same as scrollMagic and animate.css takes care of the tween.  to add an animation (based on scroll position) to a div all I add is a class "myDiv wow fadeInLeft".  If I add a class "myDiv animated fadeInLeft" then the animation happens regardless of scroll position.  for want of a better term, animate.css is a 'library' of animations using the webkit-keyframes 'from and to'. As you can see, from a programming point of view it is very easy to add an animation to "myDiv" just by giving the div a class.

Putting the scroll position to one side for now,

 

Using animate.css I can animate 'mydiv' as easily as this

<div class="myDiv animated fadeInLeft">hello world</div>

 

from what I've read, for me to add a similar animation using GSAP I'd have to create a tween for "myDiv" with the two properties for sliding the div and fading it.

<div class="myDiv">hello world</div>

 

TweenMax.to('#myDiv', 1, { x:-100% , autoAlpha: 0  });

 

So (and I think this is a rhetorical question) is there a 'library' of reusable GSAP tweens that can be added to a site and called multiple times simply by adding a class name to the divs I want to animate?

 

I hope I've not confused the question even more!

Cheers,

Philip

Link to comment
Share on other sites

I guess the short answer to your question is "no" :) (there's not pre-baked GSAP animations that just automatically fire off when you add a class)

 

However, it should be relatively easy to just tweak a little code wherever you're adding your class, kinda like:

//OLD:
$("#yourElement").addClass("newClass");

//NEW:
TweenMax.to("#yourElement", 1, {className:"+=newClass"});

Or, of course, you could whip together your own functions that make it as simple as feeding in a particular class and it'll fire off that tween for you. Once you get the hang of how the JS stuff works, it can really open a world of possibilities for you in terms of flexibility :)

 

For the record, I don't generally recommend tweening to class names because there's a slight performance hit on the very first render of that tween (because it has to compare all the styles and isolate the ones that need to change). It's typically better (performance-wise) to specify the properties you want to animate directly in the tween instead, but I totally recognize that some people prefer to chuck everything in CSS for their workflow which is fine too - I just wanted to offer the caveat because I obsess about performance. You'd probably never even notice a difference unless you're animating hundreds of things simultaneously and they all start at the same time using className tweens. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

I'm so impressed with your level of support, there are plenty of forums out there where either I'd have got no reply or a simple 'no' in answer to my question.  You've given me the encouragement to get my teeth stuck into this and have a play around.  Any developments I make, I'll post here.  Cheers once again. P.x

  • Like 2
Link to comment
Share on other sites

It always warms my heart to read responses like yours, philip. The folks around these forums (especially the moderators) are amazing at pitching in and helping folks with a positive tone (nobody shames people here for asking "dumb" questions or anything like that). It's a privilege to have them here. I realize that in this particular thread it was me providing some input, but your response reminded me of others I've heard in the past about our whole community here, and the credit goes to our generous moderators (and admins like Carl of course). 

 

Anyway, thanks again for the kind words, and good luck with the project. 

Link to comment
Share on other sites

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