Skip to main content
murkf81204167
murkf81204167
Known Participant
August 4, 2022
Question

Being able to animate/morph SVG icons in HTML/JS/CSS?

  • August 4, 2022
  • 2 replies
  • 290 views

Currently struggling to morph between two SVGs: https://jsfiddle.net/vu16bw0z/ but it's not going as intended. Any help would be much appreciated!

    This topic has been closed for replies.

    2 replies

    M
    Community Expert
    mark@headTrixCommunity Expert
    Community Expert
    August 5, 2022

    do you have  to program it  from scratch? If they are both vector shapes (which they are!) you can simply break them apart and then use a Shape Tween to mortph the icons. You can also use Shape Hints to aid  which points from one icon morph into the 2nd icon.

    I created a beginner  Animate series for the Adobe  Animate team --  here is a short  video on Shape Tweens. 
    Once created,  you can export to HTML5 and BOOM!  Much easier then writing all that code!
    https://youtu.be/Hll1Tkqphtc

    Hope this helps!
    Mark

    headTrix, Inc. | Adobe Certified Training & Consulting
      murkf81204167
      murkf81204167Author
      Known Participant
      August 9, 2022

      That is so unbeleivably cool, thank you so much Mark!

        murkf81204167
        murkf81204167Author
        Known Participant
        August 4, 2022

        It's been some good 10-20 years since I last tried tweening in Flash, but maybe this is the way forward?

        Thanks a lot for reading!

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices