GSAP Looping Carousel with Flip

[Tony Geek]

Hi all,

I've been building up some work with GSAP, but I'm struggling a little bit regarding some logistics in Flip. What I'm trying to achieve is a looping carousel that applies transforms based on the positions of items in relative to the central item. I've been trying to take from the Card Loop demo, but I seem to be having a hard time controlling the DOM. Via logging, I've determined that there's some issue where I'm animating the items before the duplicate is removed, which then tries to set up the active item based on an inaccurate number of items. The animation also appears to be a bit jumpy, which I'm also confused about.

Any pointers or solutions would be greatly appreciated!

See the Pen vEXLGzp?editors=0010 by tonycre8-the-bold (@tonycre8-the-bold) on CodePen.

[Rodrigo]

Hi,

 

A few things regarding this. When working with Flip, ideally the changes/updates should be working before applying Flip to the Mix. I commented out this from your demo:

const observer = Observer.create({
  target: window,
  type: "wheel",
  onWheel: (self) => {
    const state = Flip.getState(".box");

    moveItem(self);

    // Flip.from(state, {
    //   targets: ".box",
    //   onLeave: (element) => {
    //     const items = gsap.utils.toArray(".box", container);
    //     container.removeChild(element[0]);
    //     animate(items);
    //   }
    // });
  }
});

And this is the result:

You should be able to look at the other items with their respective transforms and rotations in order to have this working. Also when I scroll up and down I just keep seeing the first element over and over. My first suggestion would be to get this working without the animation first and then add Flip to the mix.

 

Another suggestion would be to try a different approach for this, using just 3D transforms without Flip, perhaps this article by David DeSandro can help:
https://3dtransforms.desandro.com/carousel

 

Also have a look at these demos:

See the Pen Jjzyjbm by GreenSock (@GreenSock) on CodePen.

See the Pen xxNgMMz by GreenSock (@GreenSock) on CodePen.

See the Pen eYKWzwv by GreenSock (@GreenSock) on CodePen.

See the Pen RwLepdQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Tony Geek]

Hello! Sorry about my late reply, and thanks for sending all that over - it's been very insightful. Definitely a lot of reading for me to do.

I've had a little go at re-doing the animation with the provided links and have got something together.

See the Pen EagvZzL by tonycre8-the-bold (@tonycre8-the-bold) on CodePen.

I guess my only problem is that from a stylistic perspective, I can't set an angle size by preference. Otherwise, I'd have to make sure that the number of items within the carousel itself would match the angle. That and if I don't get the angle & number of items right, there would be spacing on the left like there was in the first demo you introduced.

I think that's why I went with Flip, is that I could have the number of items I wanted and then just reorder them as the user scrolls through - on the premise of the Card sort demo I introduced at the beginning of the thread. Although I think it's possible that the performance would get tanked in this kind of scenario - constantly flipping elements on scroll that is.

I guess my question from here would be about how you (or others) would tackle that? The balance between stylistic control and logic. So far all these demos rely more on the latter, with little flexibility on the former which is more of what I'm trying to achieve.