Morphing animation in Storyline
Dec 07, 2020
As Storyline now includes GSAP 3 this offers so many possibilities for great animations. GSAP has several bonus plugins with which you can animate SVG's easily. One of these is MorphSVGPlugin. With this plugin you can animate a morph from one SVG shape to another. All Storyline shapes are SVG so with some nifty Javascript tricks you can create morphing animations like seen here.
https://360.articulate.com/review/content/a447cc04-524a-40cb-8345-aa86660f3637/review
Next step for me to try is whether i can use imported elements and animate them. I do think Storyline converts images to inline SVG images, so there is no converting paths and points there...but shapes and lines in SL no problem as you can see.
4 Replies
Wow. Pretty cool. I can't believe I'm the first to comment on this post as the MorphSVG plugin is so cool. Is there a special step one needs to take to register the bonus plugin to make it work in Storyline?
Hi, Robert!
Jurgen might not be subscribed to this discussion, but you're welcome to contact them directly through their profile by clicking on their name and selecting Contact Me.
The GSAP Morph SVG plugin is part of Greensocks plugins. You need to get a Club Greensock license for the plugins. Then add those to Storyline as WebObject ( https://community.articulate.com/discussions/articulate-storyline/how-to-add-jquery-or-anyother-external-javascript-library-to-storyline ) and then you can 'register' the plugin and use it in your code.
One big thing to keep alert on. SVG in Storyline is not always proper SVG. Make sure it is the proper type.
Thanks Math. This is exactly what I was looking for.