Jump to content
GreenSock

robbue

360 draggable slider

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'm making a 360° slider, or actually its more like a 160° slider:

See the Pen 3012fd643e4724963c00cde7975f09a9 by robbue (@robbue) on CodePen

 

It's supposed to animate back to head-on-image on dragend (hammer.js is used for gestures), not only snap. How could I fix this? 

 

I would like some feedback to make it better because it isn't 100% smooth, and is this something Draggable & ThrowPropsPlugin could be used to, if so, how? Would be cool to have it draggable freely around with bounds limit.

 

Why dont I use a plugin like 360slider?

Where is the fun in that? On a more serious note - I may be falling back to a plugin (do you know of any good ones?), but it would be nice to use the power of GSAP to make it.

 

Why seperate images and not a sprite?

Because the final code will have a lot more frames and mobile devices doesn't support to big images.

 

Link to comment
Share on other sites

Looks like a fun challenge. Unfortunately I just don't have time to tackle it right now, but I can offer a few tips:

  1. Instead of applying a class with className and then relying on onComplete and onReverseComplete, I think you could really simplify it and make it perform even better by staggering visibility:"visible" calls. No need for onComplete or onReverseComplete. And I suspect that applying a class (and then removing it later) is more CPU-intensive for the browser because it has to analyze all of the css and figure out which ones apply/cascade/override rather than just setting one single property on the inline style. 
  2. Yes, you could use Draggable and ThrowPropsPlugin. You could create an invisible DIV on top of your content, and the user would drag that invisible DIV. You'd use on onDrag callback to set the visibility of the appropriate element based on the position of the invisible DIV. You could simply look at its _gsTransform.x. 
  3. It looks like there's a lot of extra code that might degrade performance a bit. I wish I had time to fully advise you about how to streamline things. If you need consulting help, we do offer those services (for a fee of course - this isn't something we generally cover in the forums since it could quickly consume all our time). 

I hope that helps at least a little. 

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

You know, I made this not long after your question for this topic, but I definitely remember that rotating vehicle and intended to update you. Sorry I forgot to actually post it!

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

I know it's not that much fun, but you asked for a plugin :P

 

You could try Reel js  ( http://reel360.org/reel)

 

It does exactly what you need, with a lot of options ( and then some ;) )

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.
×