subvikr Posted January 30, 2022 Share Posted January 30, 2022 Hi, I am pretty new to greensock. I am trying to move a Line (svg) from up to down or viceversa. I am unable to do it. I can do it along the xaxis.No issues. I am also able to move any object up and down but not the line. I know i am doing something wrong but couldnt able to figure it out. <body> <svg width="1177" height="654" viewBox="0 0 1177 654" fill="none" xmlns="http://www.w3.org/2000/svg"> <line id="svg1" class="cone" x1="236" y1="186.5" x2="701" y2="186.5" stroke="black" stroke-width="4.3" fill="none" /> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script> gsap.to('#svg1', { duration: 3, y: '50%'}); </script> Link to comment Share on other sites More sharing options...
Solution Cassie Posted January 30, 2022 Solution Share Posted January 30, 2022 Hey @subvikr, welcome to the forums If you check the console in this pen you'll see that the line has a height of 0, You asking the line to animate by a percentage of it's own height. 50% of 0 is nothing, so it doesn't move at all ☺️ You can use y without a percentage value instead. gsap.to('.shape', { duration: 3, y: 500 }); Also, it's worth nothing that you don't need to pass in a string for the value, you can use y:50 (animate 50 SVG units on the y axis) or yPercent: 50 (animate 50% of the elements height on the y axis) depending on what you're after. See the Pen WNXQLeb?editors=1111 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2022 Share Posted January 30, 2022 Hey @subvikr, You can also tween an SVG line like this. (more to 'attr:{}' here) See the Pen wvPKRmG by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
subvikr Posted January 30, 2022 Author Share Posted January 30, 2022 2 hours ago, Cassie said: Hey @subvikr, welcome to the forums If you check the console in this pen you'll see that the line has a height of 0, You asking the line to animate by a percentage of it's own height. 50% of 0 is nothing, so it doesn't move at all ☺️ You can use y without a percentage value instead. gsap.to('.shape', { duration: 3, y: 500 }); Also, it's worth nothing that you don't need to pass in a string for the value, you can use y:50 (animate 50 SVG units on the y axis) or yPercent: 50 (animate 50% of the elements height on the y axis) depending on what you're after. Thank you so much.Really appreciate your help. Link to comment Share on other sites More sharing options...
subvikr Posted January 30, 2022 Author Share Posted January 30, 2022 1 hour ago, mikel said: Hey @subvikr, You can also tween an SVG line like this. (more to 'attr:{}' here) Thanks Mikel. Its awesome. Thanks again. 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