Jump to content
Search Community

I need help implementing coverflow using Draggable.

bs.choi test
Moderator Tag

Recommended Posts

hello.

I am implementing coverflow.

 

The codeSandBox below is my current implementation.
https://codesandbox.io/s/keen-keller-yci76t?file=/src/App.js

 

Navigation and when clicking on each item, it goes over and works properly.
However, if you try dragging, coverflow starts working when the dragging ends.

 

I tried several methods, but I didn't know how to give an animation while dragging, so I only implemented it with onDragEnd() as the next best solution.

 

Below is what my example would look like.

See the Pen WNRvqJP by jh3y (@jh3y) on CodePen

 

I want to implement a coverflow that moves naturally when dragging like the example above.

 

However, I want to make the item index move from the first to the last and then from the last to the first instead of an infinite loop like the example above.

 

For example, { loof: false } in swiper.js.

 

I've tried gsap's codepen and a lot of googling, but I haven't been able to solve it yet.
can you help me?

 

Lastly, I borrowed the help of a translator because I am not good at English.
So it can be difficult to read.

 

thank you.

See the Pen App.js by s (@s) on CodePen

Link to comment
Share on other sites

This is a pretty complex functionality, but I'll try and point you in the right directions...

 

18 minutes ago, bs.choi said:

I tried several methods, but I didn't know how to give an animation while dragging, so I only implemented it with onDragEnd() as the next best solution.

For this, you'll want to create a timeline and use the position of your drag proxy to link 'scrub' the progress of the timeline.

 

These are different ideas, but use draggable to control different timelines, which is more or less the same concept you're looking for:

See the Pen eYRgXpd by elegantseagulls (@elegantseagulls) on CodePen

See the Pen GRxNJGK?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

  • Like 3
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...