Jump to content
Search Community

Draggable coverflow slider

piyush walia 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

I am trying to make an coverflow slider like used on the HomePage of this website http://www.onedayinmyworld.com/. For reference, I am sharing the codepen demo of my progress and there are a lot of things with which I am struggling. I want to add dragging feature to it with center element highlighted i.e active class added to the center div. Can anyone help in solving this problem?

See the Pen MQwNZK by piyushwalia (@piyushwalia) on CodePen

Link to comment
Share on other sites

I'm sorry that is quite an advanced effect. It would probably take me a few hours to get something working in a rudimentary fashion from scratch.

 

It does remind me quite a lot of what @OSUBlake is doing in the demo below:

 

See the Pen YrXdGZ by osublake (@osublake) on CodePen

 

It has the same effect of dragging and throwing a bunch of things and they get bigger when they get to center and will snap so that one item is "highlighted" when done animating.  A bonus feature of Blake's demo is that it wraps infinitely in both directions.

 

This thread (which people should favorite :) ) has some great discussion points

 

 

 

 

 

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