Trying to create Scrolltrigger based Cards(Fan out arrangement) infinite slider

[Krishnakant]

I have a Cards layout (Fan out arrangement) - though it is not taking the screen-size into account right now. That is something which I want to see later. But basically, I have to display 3 cards at a time (with one more card hidden, which should slide on mouse-wheel scroll/drag) creating infinite loop with snapping.

 

https://www.avaa-architectes.fr/ this is something I want to achieve with GSAP/ScrollTrigger. Is it possible to  have that slide movement on scroll just the way its done here?

See the Pen oNQRozO by designjuice (@designjuice) on CodePen

[mvaneijgen]

Hi @Krishnakant welcome to the forum!

 

Sure, that is possible. Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

You'll probably want to use the Seamlessly loop elements along the x-axis (found here https://greensock.com/docs/v3/HelperFunctions) to not reinvent the wheel. 

 

Keep in mind that this certainly isn't the simplest functionality, certainly not if you're not yet familiar with the tools. Check out the following getting started guides and I can't emphasise enough, don't worry about ScrollTrigger, first get the animation working that is the most importend part. 

 

https://greensock.com/get-started/
https://greensock.com/get-started-2

 

Give it a shot and if you're stuck, post back here with the minimal demo's you've tried. Note I said minimal demo's, personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

This demo is way over the top, but maybe it inspires you. Hope it helps and happy tweening! 

 

See the Pen eYEXmJm by GreenSock (@GreenSock) on CodePen

[Krishnakant]

Hi,

 

Thank you for your reply.

 

I have created a circular carousel to implement the same functionality, which listens to mousewheel event (and works fine). Here is the demo of it.

See the Pen Jjwdxmq by designjuice (@designjuice) on CodePen

 

Although this works fine in all other aspects, I am not able to implement 'Drag/Snap' functionality to this demo, there is some glitch as you can see while dragging and snapping it to a slide that is being dragged (to nearest Slide).

 

I am also not sure whether Draggable plugin can be used in this situation - as I do not have much knowledge on it. Please guide me.

 

[Rodrigo]

HI,

 

Nice work, looks really good.

 

Unfortunately we don't have time to go through complex examples trying to solve complex logic issues or create custom solutions.

 

A good starting point would be this helper function and example Jack made some time ago:

See the Pen JjZdPWj by GreenSock (@GreenSock) on CodePen

 

Hopefully that helps and provides a good starting point.

Happy Tweening!

[Krishnakant]

Hi,

 

Thanks for replying. In fact I had gone through this example before posting the question.

 

There was one issue I couldn't solve. When Dragging (without Inertia plugin - as do not want to use it here) - once the element crosses a certain point, it needs to be snapped to 'active' position (like it snaps/becomes active when clicked).

 

Also, I have updated the Codepen with Draggable plugin to achieve desired output.

See the Pen Jjwdxmq by designjuice (@designjuice) on CodePen

 

But while dragging again, after snapping to a particular slide - it is not animating smoothly. This is probably because of Custom Easing, but I am not sure how to fix it.

 

Could you please update the example to achieve the desired behavior? That would be really helpful.

 

Again, thank you so much for your time. I appreciate it.

[Rodrigo]

Hi,

 

Sorry I don't have enough time to go through all the code in your example. Maybe you mean something like this:

See the Pen WNLrYOZ by GreenSock (@GreenSock) on CodePen

 

That basically is using the liveSnap functionality Draggable has, plus the snap Utility method:

https://greensock.com/docs/v3/GSAP/UtilityMethods/snap()

 

Hopefully this helps.

Happy Tweening!