Charlyta Posted August 8, 2022 Share Posted August 8, 2022 Hi! I want to update the path pf a SVG while scrolling. I supose that I have to use 'PositionInViewport'. I have seen an oficial GSAP example form Codepen explaining 'PositionInViewport' and 'isInViewport' here: My Codepen trying to perform this is: See the Pen mdxLZPg by charlyta (@charlyta) on CodePen I tried to update the value of data path in this way: gsap.to(curve.setAttribute( "d", "M 800 300 Q 400 " + myposition + " 0 300 L 0 0 L 800 0 L 800 300 Z") ); Where 'myposition' is from: let myposition = ScrollTrigger.positionInViewport(box, "center").toFixed(2); The question is: How to get the position to pass this var to the path. Thanks in advance positionInViewport: Scroll down See the Pen WNOzrqg by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 8, 2022 Share Posted August 8, 2022 Hey there! Could you explain a little more about what the goal is with the myposition variable? Why do you want to feed that into the path? What's the visual outcome you're hoping for? I would usually just suggest using scrollTrigger to animate something on scroll. Like so. gsap.to(curve, { attr: { "d": "M 800 300 Q 400 " + myposition? not sure what this is for + " 0 300 L 0 0 L 800 0 L 800 300 Z" }, scrollTrigger: { trigger: svgElement, start: 'center center' } } Link to comment Share on other sites More sharing options...
Charlyta Posted August 8, 2022 Author Share Posted August 8, 2022 Hi Cassie! This SVG is positionated on the top of a div to be transformed from a line to a curve while scrolling. You could see an example here of what I mean: See the Pen ZyZWVZ by armantaherian (@armantaherian) on CodePen Sorry if I explain it not clearly Link to comment Share on other sites More sharing options...
Cassie Posted August 8, 2022 Share Posted August 8, 2022 No worries! Thanks for the additional info. Ok, so you just need to provide the starting path (in the HTML) and the destination path (in the tween). Then we just tell GSAP to animate between them on scroll. No need to update a value in the path manually - that's what GSAP does ☺️ See the Pen QWmxgJd by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Charlyta Posted August 8, 2022 Author Share Posted August 8, 2022 It's really amazing!! Thanks Cassie!! 😃 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 8, 2022 Share Posted August 8, 2022 Haha. No worries! 🥳 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