Sukru Posted July 27, 2022 Share Posted July 27, 2022 Hello friends, when i scroll i want the svg to continue as a downward mask. How can i do that? Can you help me i have a presentation tomorrow. thank you so much... Examples; https://www.lemonade.com/giveback-2019 See the Pen dymVwRq by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 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 More sharing options...
Cassie Posted July 27, 2022 Share Posted July 27, 2022 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 2 Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 What ca I say - nothing *bows with a flourish before the magician* Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2022 Share Posted July 27, 2022 It's all GSAP 😉 Jack's the magician. 1 Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 Well he makes the fairy dust, so he probably is the unicorn - which still makes you a magician 2 Link to comment Share on other sites More sharing options...
Sukru Posted July 27, 2022 Author Share Posted July 27, 2022 Thank you @Cassie I have one more question How can I run it at onscroll to svgmask class? See the Pen oNqGmqN by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2022 Share Posted July 27, 2022 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! 2 Link to comment Share on other sites More sharing options...
Sukru Posted July 27, 2022 Author Share Posted July 27, 2022 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 More sharing options...
Sukru Posted July 28, 2022 Author Share Posted July 28, 2022 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 More sharing options...
Cassie Posted July 28, 2022 Share Posted July 28, 2022 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 More sharing options...
GreenSock Posted July 28, 2022 Share Posted July 28, 2022 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now