Jump to content
Search Community

Scrolltrigger svg mask

Sukru test
Moderator Tag

Recommended Posts

Sounds like a lot of pressure...
The video isn't that bd in explaining how he did it, using Observer and DrawSVG plugins it might be easier to implement, but what you are asking for isn't so much helping you with a (GSAP) problem but setting you up from the start - that is something out of the scope of this forum.

If you have actually built something that uses GSAP, there will be no better place on the internet to get help, but at this stage it's hard to see where to even start helping you.

Link to comment
Share on other sites

19 minutes ago, Cassie said:

You'll need to change the trigger element and the start and end point of the triggers - you can add markers to fine tune.

You can read more in the ScrollTrigger and DrawSVG documentation ☺️
 

 


Good luck!

 

 

Thank you very muchh :)

Link to comment
Share on other sites

I'm afraid I'm going to bed now, but all I would do is tweak the values until it looks right really - If it's not possible by tweaking the values you may have to do some math, or possibly break your lines up into sections and animate them at different speeds depending on whether they're straight or curved.

I hope you manage by tweaking the start and end triggers and scrub value - the other ways will certainly be more time consuming!

Link to comment
Share on other sites

I noticed several problems: 

  • You're loading 2 different versions of GSAP and ScrollTrigger. Don't do that :)
  • It looks like you split up your path into a bunch of chunks, and you also have a set of them in each of two duplicate <svg> elements. Was that duplicate one intentional? That's certainly messing things up. 

I deleted that second one, cleaned up the URLs and put things in a timeline: 

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

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