Jump to content
GreenSock

Sukru

Scrolltrigger svg mask

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

Hey there @Sukru!

 

@iDad5 is right -we don't usually jump in to make stuff for people. But in this case DrawSVG makes things pretty easy.

 

It is a ClubGreenSock perk - but you can use it for free on codepen. Good luck with your presentation!

See the Pen NWYaogg?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

What ca I say - nothing ;-) *bows with a flourish before the magician*

Link to comment
Share on other sites

It's all GSAP 😉 Jack's the magician.

  • Haha 1
Link to comment
Share on other sites

Well he makes the fairy dust, so he probably is the unicorn - which still makes you a magician ;-)

 

unicorn_800x600_5.gif

  • Haha 2
Link to comment
Share on other sites

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 ☺️

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



Good luck!

  • Like 2
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

Hi @Cassie Sorry to bother you again. I'm also doing smooth scrolling project and the line is going too fast. I looked but couldn't solve it. Can you help me? :(

 

See the Pen JjLrVqm by sukruemanet (@sukruemanet) on CodePen

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.
×