Jump to content
Search Community

Reveal multiple paths scroll

heavylifting test
Moderator Tag

Recommended Posts

I'm trying to get an array of paths to reveal themselves when the page is being scrolled down. As you can see from the pen I only have one and it isn't even in the middle of the browsers view.

 

I was wondering if there is a way of doing this using Greensock? I would also prefer it if the edges of the lines where circles, would this be achievable if this were some kind big mask reveal?

 

Thanks

See the Pen JjGOapW by heavymessing (@heavymessing) on CodePen

Link to comment
Share on other sites

7 hours ago, heavylifting said:

Maybe it's a scale thing? At mobile size my version seems to work quite smoothly, at the large scale the jerkier it gets.

Performance problems are almost always related to graphics rendering (not GSAP). So it would make sense that if you're using vector graphics, it's gonna require a lot more processing power to render them at bigger sizes (because the browser needs to fabricate a lot more pixels on-the-fly). See what I mean?

  • Like 1
Link to comment
Share on other sites

2 minutes ago, heavylifting said:

Though it's odd that when pine I use 'pin: true' it's quite smooth? The only issue then is because it is pined it doesn't stay in the browser frame?

That's not particularly weird. When something has position: fixed the browser is free to do less calculations because it knows it won't affect the layout of other elements. 

 

You could try adding a vertical translation to keep it in frame. Something along the lines of this:

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

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.
×
×
  • Create New...