Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

Horizontal scrolltrigger start times

Recommended Posts

Hey guys :D 

Im trying to make a horizontal scrolling section and have some svg paths drawn as you scroll. My problem is that I don't know how to set the start/end times for the DrawSVGPlugin. At the moment they start at 0 (which makes each one of them start at the same time), so when I have scrolled to the second svg, it's already finished drawing the path.

Is it possible to set a left value as a start in scrollTrigger somehow? As in "start when this elements left side is in view"?

I've seen some threads on here about animating children in horizontal scroll section, but I couldn't figure out what to set the values to anyway..

Im trying to make something similar to this (as in the horizontal section here):
https://www.happymaven.co.uk/
 

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

Link to comment
Share on other sites

Hey Daniel.

 

Anytime you're doing something like this you're faking horizontal scrolling. In order to compensate for that, your start times for each section's animations should be offset by the vertical offset of the horizontally scrolling container as well as the offsetLeft position of each section's container. That's what the other examples that you've come across do. In your demo, here's how that would look: 

See the Pen ExKdRLj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

With that being said, I think it'd probably be easier to use a single SVG that fills the entire width of the horizontal section if possible. It'd be easier to keep synced.

  • Like 1
Link to comment
Share on other sites

Thank you! Makes sense when I see your code. One issues with this is if you have a section above it. You can see it starts too soon:

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




Maybe I can try to make an svg for the whole width like you said instead and just plug it in the whole timeline for the full offset.

Link to comment
Share on other sites

If you open that pen in full screen mode the offset is more noticeable. This is whats been happening to me since im working in the browser and not codepen :)

Link to comment
Share on other sites

4 minutes ago, Daniel Hult said:

One issues with this is if you have a section above it. You can see it starts too soon:

Yep. Like I said, 

Quote

your start times for each section's animations should be offset by the vertical offset of the horizontally scrolling container as well as the offsetLeft position of each section's container.

I didn't include the vertical offset because it wasn't needed for your demo. 

 

Just add the .offsetTop of .container to the start.

  • Like 1
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.
×