Jump to content
Search Community

Need help converting a jQuery 3D carousel to GSAP

rizzy3000 test
Moderator Tag

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

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 5
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

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 2
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.
×
×
  • Create New...