Jump to content
GreenSock

rizzy3000

Need help converting a jQuery 3D carousel to GSAP

Recommended Posts

Greetings,

Is there a javascript guru out there that can help me edit my codePen? I need to totally strip out jquery and replace with gsap?

I have a couple of banner projects coming up and neither ad server will allow jQuery. Any help is much appreciated as I am stuck :(

Thank you,

Renard

See the Pen grmmxW by rizzy3000 (@rizzy3000) on CodePen

Link to comment
Share on other sites

Getting rid of jQuery isn't too hard. Here's a good site to help you out.

http://youmightnotneedjquery.com/

 

And here's a fork of your pen to help you get started. Make sure you don't have CSS transitions and GSAP animating the same properties. Note that I didn't convert all your CSS transform stuff over to GSAP. Just enough to get it working.

See the Pen QNppmB?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

OSUBlake, you are the man! Thank you VERY much for jumping in so quickly! I am looking at the revised pen now.

Thanks again!

Renard

Link to comment
Share on other sites

One last question. What is the best way to apply a conditional that determines when each panel is being displayed in the front of the carousel?

(ie; if Panel b is being shown, fire this function, if Panel C is being shown, fire this function, etc.)

Again, thanks for the help.

Best,

Renard

Link to comment
Share on other sites

There's several ways to go about doing that, but the easiest might be to keep track of an index for the items. It's pretty easy to track an index using the remainder/modulo (%) operator. I'm just logging out the textContent of the element, but you could also use something like a data attribute to add more unique data to the element.

 

See the Pen wGJdBE?editors=0011 by osublake (@osublake) on CodePen

 

EDIT: I guess you could rework it where you don't have to use the modulo

See the Pen aNJWZm?editors=0011 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

I guess I didn't fully answer your question about calling a particular function. I was just showing a way to figure out what the current panel is. Once you know that, you can run whatever logic.

 

For example, you could figure out what function to call using a bunch of if/else statements or a switch, but that could get messy if you have a lot of panels. Another way would be to call a function directly. Here's an example of how you could get the name of a function to call by using a data attribute.

 

Let me know if anything I did doesn't make sense.

See the Pen Mypmvw?editors=0011 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Actually you did answer my question! I have been digging through the updated pens to see exactly how you have things set up.

Looking at your last update, it's starting to make more sense to me now. I cannot thank you enough for helping out on this!

You are the man!!!!

Best,

Renard

  • Like 2
Link to comment
Share on other sites

Just to throw my two cents for a GSAP 3D Carousel

 

GSAP Auto Rotate 3D Image Carousel:

 

See the Pen KVmpOG by jonathan (@jonathan) on CodePen

 

GSAP 3D Image Carousel with previous and next buttons (with Blake's prev/next offset fix):

 

See the Pen YwVadY by jonathan (@jonathan) on CodePen

 

Happy Tweening! :)

  • Like 2
Link to comment
Share on other sites

Very nice! One problem with the click example is that rotation gets out sync if you repeatedly click a button because you are using relative values. I don't know if there's a simple solution for that. Here's what I came up with. Store the rotation value on the element, and tween it using cycle.

 

See the Pen QNpxEo?editors=0010 by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Nice fix Blake,  previously had that 2nd example as private but forgot about that offset that was happening. Thanks! :)

Link to comment
Share on other sites

Yeah, it's not obvious. My initial idea was to use _gsTransform to get the rotation value, but that's doing the same thing as the relative value.  :huh:

 

I'd like to see if somebody else can come up with a simpler way to do that.

Link to comment
Share on other sites

I still need to fix my first example in IE11 since it is doing some weird overlapping and stacking behavior. But I don't have time to test and debug it. Sometimes i just want to punch Microsoft, especially IE in their big fat nose. :)

  • Like 1
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.
×