3D Card Flip in Carousel not aligned to scroll/drag snap points.

[blackKojak]

Building on top of my previous scroll-based carousel, I'm working to make the carousel draggable/scrollable on mobile devices.

Currently I've tried two approaches:

ScrollTrigger (Snap Property)

scroll-snap demo

 

Pros

• Already compatible with mobile scrolling
• Animations are spaced will between snap points

Cons

• The scroll snapping doesn't centre the cards
• The snapping behaviour isn't "snappy" like native snapping. Even with the snap options (object).

See the Pen yyebNBW?editors=0110 by Pensive1 (@Pensive1) on CodePen.

 

---

 

Drag + Inertia Plugin (Snap function)

 

Pros

• Has great snapping
• Great inertia control
• Also works on mobile devices

Cons

• Repositions (TranslateX) the element instead of scrolling it. This leaves sibling elements behind and follow the dragged item.
• When a container is dragged then scrolled (via arrow nav buttons), it goes way beyond the boundaries.

Unknowns

• I'm not sure how to prevent or limit "throw dragging". When done on snapped drags, the script doesn't know which one to snap to.

See the Pen VYebeWe?editors=0111 by Pensive1 (@Pensive1) on CodePen.

 

---

 

I feel the ScrollTrigger method would be better but I'm not sure how to achieve what I aim to do.

See the Pen yyebNBW by Pensive1 (@Pensive1) on CodePen.

[Rodrigo]

Hi,

 

I think this demo is most likely what you're looking for:

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

 

Hopefully this helps

Happy Tweening!

[blackKojak]

Hi @Rodrigo, by any chance, would you know of a scrollable version? What I've made in Codepen is a mini demo of my actual project in React.

 

In my actual project, I have a list of links (.link-list) presented vertically as the last slide. This list is contained in a div AFTER the slide container.

 

Using drag would drag the slide container and leave this link-list behind. Also, I'm using the ScrollTo plugin to automate scrolling to all slides when the arrows and pagination dots are clicked.

 

Combining the two would clash and cause position bugs when scrolled then dragged.

[Rodrigo]

Hi,

 

It could be something like this:

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

 

Is worth mentioning that what you're trying to achieve is not the simplest thing to do though.

 

Also you might want to check this part of the demo I added in my previous post:

var draggable = new Draggable(proxy, {
  // allowContextMenu: true,
  type: "x",
  trigger: picker,
  inertia: true,
  onDrag: updateProgress,
  onThrowUpdate: updateProgress,
  snap: {
    x: snapX
  },
});

function snapX(x) {
  return Math.round(x / cellWidth) * cellWidth;
}

function updateProgress() {
  animation.progress(wrapProgress(this.x / wrapWidth));
}

Basically that ties the Draggable value on the X axis to update the progress of the animation. Also the Draggable instance is working on an element that is not even in the DOM:

var proxy = document.createElement("div");
//...

var draggable = new Draggable(proxy, {
  type: "x",
  // ...
});

That proxy element is created but is not on the DOM, so essentially you have an endless looping Timeline whose progress is being updated with a Draggable instance that uses a proxy element and the trigger config option to trigger the Draggable instance using a different element:

https://gsap.com/docs/v3/Plugins/Draggable/#trigger

 

Here is a far simpler demo of this approach:

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

 

Also here is a simple demo of updating the progress of a GSAP Tween/Timeline using a Draggable instance:

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

 

Finally is worth noticing that if you want to include ScrollTrigger on something like this, you have to keep the progress of the Draggable instance, the Tween/Timeline progress and the scroll position in perfect sync in order to have everything working together as expected. Again all of this is not the simplest thing to achieve.

 

Hopefully this clear things up

Happy Tweening!