Help with Draggable/Scrolltrigger animation

[PTiCA]

Hi everyone, I need to create an animation that will combine 2 gsap plugins and I don't know how to do this task.

 

demo: http://lookbook.wedze.com/winter-2016-2017/

 

This is an animation very similar to the one on this page: 

1. Vertical pull button which will always be able to stretch to a maximum of the number of slides before and after 

2. Horizontal scrolling slides that will accept point 1. 

 

Horizontal button that will scroll 4 slides and when finished dragging will snap to the nearest field. 

Do you have no idea what to break from or a demonstration of a similar solution? 

 

Thank you for your help.

[ZachSaucier]

Hey PTiCA and welcome to the GreenSock forums.

 

I'm not sure what you're really asking. Can you please try to rephrase your question? 

 

If you're asking how to create the same sort of effect as the page that you linked, GSAP's Draggable plugin is going to be key but most of the actual logic you'll need to write yourself. 

[PTiCA]

Hi Zach, thanks for the welcome. I started creating my project and I think I have the foundation ready. I need advice on how to solve: 1. Snapping individual sections when onDragEnd is complete 2. Smooth connection of horizontal scrolling of sections which I control by vertical "drag" button.

 

My example is seen below.

See the Pen YzpKOMM by PTiCA1 (@PTiCA1) on CodePen

 

 

[ZachSaucier]

1 hour ago, PTiCA said:

1. Snapping individual sections when onDragEnd is complete

Have you looked into Draggable's snapping functionality? I would think that would do it, so long as your Draggable is hooked up to your animation properly.

 

1 hour ago, PTiCA said:

2. Smooth connection of horizontal scrolling of sections which I control by vertical "drag" button.

What do you mean by this?