Jquery – How to do a fast slideUp animation using TweenMax

animationgsapjquery

I want to do an animation similar to function slideUp in jQuery using the library "TweenMax". The problem to not use slideUp is that this function to slow in iPad and iPhone.

By using the TweenMax it's 20x fast than jQuery 😀

Can anyone who knows this library give me some help to do it?

Best Solution

To get similar results to jQuery slideUp(), you can just create a TweenLite tween that affects the height of your element:

TweenLite.to(element, 0.5, {height:0})

Here is a CodePen example that lets you toggle slideUp/slideDown functionality.

http://codepen.io/GreenSock/pen/AzHmc

As for the claims, that GSAP runs 20x faster than jQuery feel free to experiment with the speed test: http://www.greensock.com/js/speed.html

It's important to note that the performance increases are most noticeable under moderate to severe stress. Its very likely that for a single tween, you won't notice much of a difference.