Jump to content
Search Community

SVG Animation Flickers

ukk53 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution


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!

 

  • Like 3
Link to comment
Share on other sites

@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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...