Horizontal scroll trigger

[Daniel Hult]

Hey (again ) guys,

 

I haven't worked with svg's much, and Im trying to animate the svg paths here as you scroll.. 
I want to physically scroll down, and translate the svg to the left and animate the icons as they come into view. I thought this was what horizontal scroll was for in ScrollTrigger?

Any tips people also have regarding setting up the svg's are also very welcome. I've read through some of the examples on motiontricks.com, which has been very helpful - but didn't see any examples with a horizontal svg.

See the Pen WNwXerd by daniel-hult (@daniel-hult) on CodePen

[ZachSaucier]

Hey Daniel. horizontal: true on a ScrollTrigger means that the scroller goes in the x direction. In your demo your scrolled only goes in the y direction so you shouldn't set horizontal: true. 

 

With that being said, your demo doesn't have any animation code at all so I'm a bit confused what's actually going wrong and what you're seeking help with. Also trigger: "body" is unnecessary.

 

I recommend creating the animation that you want to happen and then think about integrating ScrollTrigger. This will help you understand what's going on.