CODEWITHSUNDEEP
jqueryanimationgsap
kach
kach

Reputation: 809

How to do a fast slideUp animation using TweenMax?

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 :D

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

Upvotes: 2

Views: 10199

Answers (3)

Geek Ambassador
Geek Ambassador

Reputation: 41

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.

Upvotes: 4

Zaman
Zaman

Reputation: 1

First you should download TweenMax.min.js and jquery.gsap.min.js you can find them here: http://greensock.com/products/

Just add these files to your scripts

src="js/TweenMax.min.js"

src="js/jquery.gsap.min.js"

Then, to animate things, you can use the regular jQuery.animate() method

you can see more details here: http://greensock.com/jquery-gsap-plugin

Upvotes: 0

Andy Gaskell
Andy Gaskell

Reputation: 31761

Geek Ambassador's examples didn't work quite right for me. I ended up animating bottom instead, alternating between -100% and 0.

Slide up:

TweenMax.to(element, 0.3, {bottom: 0});

and back down:

TweenMax.to(element, 0.3, { bottom: "-100%"});

Upvotes: 1

Related Questions