Split slider vertical

[mathieu38150]

Hello, 

 

I would like to create a vertical slider that splits when I scroll down with the mouse. Currently, it splits, but I have to scroll all the way down, whereas I would like the animation to be triggered only when I scroll down.

Thank you for your help.

 

 

See the Pen yLQRoYo by limitstation (@limitstation) on CodePen

[mvaneijgen]

Hi @mathieu38150 welcome to the forum!

 

There were a lot of errors in your Codepen that I first had to fix before I could even take a look at what your issue was. It is best if you ask strangers on the internet for help that you give them the best starting off point, so that helping you is a frictionless as possible. Seen that you're new here I've fixed the issue for you. 

 

ScrollTrigger has a property called scrub if you set that to true it means you want the animation to happen on the visitors scroll interaction. You can also set it to false, then the animation will just play. I've given your start value a small offset of 10px, so that it will start as soon as you scroll just a little, which you can see because I've set markers: true. Hope it helps and happy tweening! 

 

Small side note: it is better to use yPercent instead of y: "100%", it will become yPercent: 100,

 

See the Pen oNQadxV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

This is how ScrollTrigger works, but a lot o people are looking more for this effect which you can create with the Observer plugin https://greensock.com/docs/v3/Plugins/Observer 

 

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

[mathieu38150]

Thank you !