Jump to content

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

Slideshow plugin?

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 currently use jquery for everything, but I am sold on the advantages of GSAP.


The one thing stopping me moving everything over, is there seems to be a lack of established plugins (understandable). Before I try doing this myself, is there anything out there like cycle.all or flexslider that helps create simple slideshows? Failing that, are there any tutorials for creating plugins for GSAP?




Link to comment
Share on other sites

TweenPlugin might help you get started. Don't forget that GSAP JS is very very new and still technically a beta. I'm sure once more users get on board and genuine use cases for Greensock plugins come up you'll start to see more of them.


I haven't written any plugins for GreenSock myself, but I too use jQuery a lot and I wrote a simple jQuery plugin (not permitted to share this one sorry :|) that turns a jQuery selection into a slideshow using GSAP commands for all of the actual 'sliding'. In someways For me at least, a jQuery plugin with GreenSock animation actually makes more sense than a totally GreenSock plugin; GSAP does not include a selector engine (although it works wonders with jQuery selections) so you will probably want to hang on to jQuery for non-animation tasks anyway.

  • Like 1
Link to comment
Share on other sites

ok, thank you very much. It sounds like I might have got the wrong idea about GSAP - if you still need jquery to achieve things outside animation, than I am not sure the increased filesize & complexity workflow would be worth it?

Link to comment
Share on other sites

Well GSAP is an animation platform first and foremost, so for things like DOM selection and editing, and events, and ajax etc, jQuery or another framework would be used.


About the filesize: if you are loading jQuery with a CDN then the filesize issue just about goes away very quickly thanks to caching. I'm not sure what your target market is like, but the internet is getting faster everyday and ~33kb for jQuery and ~21kb for TweenMax doesn't seem like too much to leverage the powerful animations that GSAP provides.


That said, if your only intention is to replace a working jQuery slideshow with a GSAP slideshow, then maybe go with whats working for you? If you haven't seen them yet, the GSAP showcase and jump start guide might give you a better picture of what GSAP offers.

  • Like 1
Link to comment
Share on other sites

Thank you very helpful. Every site we create now is responsive so filesize and performance are very important - I thought I could gain the performance of GSAP, but not sure it is ready quite yet.

Link to comment
Share on other sites

Hey Gareth,


I think you are the perfect candidate for our new jquery.gsap.js plugin!

It allows you to use jQuery.animate() but GSAP will handle all the animation behind the scenes giving you much better performance.


Not only does it boost performance significantly, but since GSAP’s CSSPlugin is doing all the work under the hood, it instantly empowers jQuery.animate() to tween more advanced properties like borderRadius, boxShadow, 3D transforms, textShadow, backgroundColor, color, backgroundPosition, and lots more.




Take it for a spin, we'd love to hear how it works for you.



  • Like 1
Link to comment
Share on other sites

Hi Carl,


Thank you, it sounds like your CSSplugin is a bit similar to the CSS3 transition plugin I am using for jquery to squeeze a bit more performance on mobile: http://playground.benbarnett.net/jquery-animate-enhanced/


my only concern is my file size will increase 10x (from 5kb to 54kb) and as i understand it slideToogle, scrollTop etc.. will default to jquery animate anyway.

Link to comment
Share on other sites

The problem with all-in-one solutions is that...well...they're all-in-one, so they have a very hard time being EXCELLENT at all of those things. Plus they can tend to get extremely bloated over time as they try to be all things to all people. Nothing against jQuery - I think it's fantastic. But when it comes to animation it's...well...not even close to delivering what GSAP does. Seriously, no contest. Look at the example that was whipped together pretty quickly here: http://www.greensock.com/css3/ and try doing that with jQuery. Or any other scripted animation tool. Notice the scrubber at the bottom too.


If your goal is to just fade some things in or animate the top/left of a few divs, you'll be fine with jQuery.animate(). But once you start needing to do something more aggressive or innovative, you'll quickly run into a wall.


As far as file size goes, you don't need TweenMax. Just load TweenLite and CSSPlugin. Those are less than 18kb combined (gzipped). And like Jamie said, with caching the file size issue quickly goes away.


Have you seen the speed test at http://www.greensock.com/js/speed.html?


I didn't quite understand your comment/question about "and as i understand it slideToogle, scrollTop etc.. will default to jquery animate anyway." - could you explain? The only things that defaults to the native jQuery.animate() method are "toggle", "show", "hide", and anything that has a "step" function defined (which is pretty uncommon).

Link to comment
Share on other sites

What I meant, was I would have to create gsap versions of slideToogle etc.. Thank you for all your   help, I am going to give it a whirl. 

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.