Need help converting a jQuery 3D carousel to GSAP

[rizzy3000 3 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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

[rizzy3000 3 Likes (Newbie)]

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

[rizzy3000 3 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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

[OSUblake 9,990 Likes (Superhero)]

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

[rizzy3000 3 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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!

[OSUblake 9,990 Likes (Superhero)]

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

[Jonathan 5,176 Likes (Superhero)]

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

[OSUblake 9,990 Likes (Superhero)]

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. 

 

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

[Jonathan 5,176 Likes (Superhero)]

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.