MrJL Posted July 30, 2023 Share Posted July 30, 2023 Hi everyone. I've put together a pen with an svg path that's animated on scroll. I'd like to develop it so that it's an image with an animated clip-path rather than a flat svg. Is there a simple guide somewhere on how to do this? I looked but all I found were other people's pens and I'm still pretty new to gsap so reading them and understanding them is still out of my reach. But if there's a simple tutorial or guide on how to do this I'd love to read it! See the Pen zYMLMEW by mrjonoces (@mrjonoces) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 30, 2023 Share Posted July 30, 2023 Hey there! Before we get into clip paths, there's a few things I picked up on in your code, you may be overcomplicating some things 1) quad.easeInOut isn't valid - I think you're looking for "power4.out" 2) Timelines are for sequences of multiple animations - you only have one animation so this would be best acheived with a tween. 3) You seem to be trying to control the animation using ScrollTriggers callbacks, while also controlling it on update. This is causing conflicts, and more importantly... it's a little bit like trying to reinvent the wheel by making a big wheel made from wheels... ScrollTrigger already does this all. Here's an example of a scrubbed animation. (like using onUpdate to tie the progress to the scroll value) See the Pen Jjeeqvo?editors=0010 by GreenSock (@GreenSock) on CodePen And if you don't want it scrubbed you can use toggleActions (like calling play and pause on enter/leave callbacks) See the Pen vYQQovB?editors=0010 by GreenSock (@GreenSock) on CodePen Does this help clear things up a little? 1 Link to comment Share on other sites More sharing options...
MrJL Posted July 30, 2023 Author Share Posted July 30, 2023 Thanks Cassie that makes perfect sense. I'm still getting a bit lost in the myriad different ways of achieving things with gsap, hence why I'm building wheels out of wheels haha! 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 31, 2023 Solution Share Posted July 31, 2023 No worries! The docs are always a good source of info. Sometimes trying to extrapolate out from demos can get a bit confusing. Also if you feel like something's too complicated - it probably is. So now that's out of the way - Clip path wise, the GSAP stuff stays the same but the SVG markup changes ✨ Nice and simple See the Pen Jjeeqvo by GreenSock (@GreenSock) on CodePen This is an evergreen article https://css-tricks.com/masking-vs-clipping-use/ And dev reference here!https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath If you have questions I'm happy to answer them ☺️ 2 Link to comment Share on other sites More sharing options...
MrJL Posted July 31, 2023 Author Share Posted July 31, 2023 Thanks Cassie! I actually figured that out yesterday with a little reading so things are moving in the right direction for me. Now I've got it working I'm pretty underwhelmed with the effect and wondering if it would be more interesting to tween from the arch shape to full screen on scroll. I've seen it done before and it looks pretty good. Can an svg path be set to 100vw/100vh? Link to comment Share on other sites More sharing options...
Cassie Posted July 31, 2023 Share Posted July 31, 2023 There's no such thing as viewport widths in SVG land. The units are SVG units, which are determined by the viewbox viewBox="0 0 450 400" 450 units wide, 400 units high You can set the SVG itself to 100vh / 100vh though, then you can set the SVG shape to fill the whole SVG. Depending on how you want it to scale, you may need to look into preserveAspectRatio, it's kinda like background size and background position, but for SVG scaling rather than background images https://www.svg.fyi/#/preserveaspectratio 1 Link to comment Share on other sites More sharing options...
MrJL Posted July 31, 2023 Author Share Posted July 31, 2023 Thanks Cassie I'll give it a go 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