ukk53 Posted June 16, 2021 Share Posted June 16, 2021 Hello, Can anyone help me with this svg animation? I am trying to move this bulb up using the attr: {} property of gsap but I am unable to do it fluently. The animation works, but there is a small time frame in which the bulb vanishes and then reappears. And Secondly, I'd like to ask, what is the best way to animate d path of svg using gsap?(like translate,rotate,skew etc..) I know we can use transform for <rect />, <circle /> etc... but that doesn't seem to translate in d path animations. I specifically need to do d path animations because I use icons from websites like font awesome which are mostly made using the pen / curvature tool. I do know how to use Adobe Illustrator to create SVGs(if that can help in anyway). See the Pen MWpZNmw by utkarsh-kumar384 (@utkarsh-kumar384) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted June 16, 2021 Solution Share Posted June 16, 2021 You can use transforms (x, y, xPercent, yPercent, rotate) etc to move elements around. See the Pen 2d11cc626340b774c81d6f029722fcf0?editors=1010 by cassie-codes (@cassie-codes) on CodePen Path animations are quite complex, but a lot of fun to dig into. I find they're often overkill for small icon animation though and you can achieve the same visual effect using clever opacity fades between shapes. If you want to go that route, we have a plugin for shape morphing - This is also a good thread should you want to try and animate points by hand. Good luck! 3 Link to comment Share on other sites More sharing options...
ukk53 Posted June 16, 2021 Author Share Posted June 16, 2021 @Cassie That actually worked! I am really surprised as to how it worked because I tried using the yPercent initially but it just didn't work. Anyways thank you for the help I'll try figuring out as to how it worked on my own. 2 Link to comment Share on other sites More sharing options...
Cassie Posted June 17, 2021 Share Posted June 17, 2021 No probs pal. 🥳 Look forward to seeing what you make 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