Animate Line Shape Appearing As If Being Drawn

Feb 26, 2021

Hello,

I'm trying to animate a line showing up on the page as if it's being drawn from a certain point on the page. I tried using an Entrance Animation but it's not working quite how I'd like it to appear.

For example, I don't want the line to fly in from the very top of the page. Instead, I would like it to be revealed from the beginning of the line to the end of the line over a span of time.

Any help would be greatly appreciated.

8 Replies
Math Notermans

And combining Matthew's and Walt's ideas is even better. Use Powerpoint to get the exact shape as you want it in Storyline. Then its SVG and you can use GSAP and especially the GSAP SVG Plugins ( those are not included in Storyline actually ) to animate your SVG. This is a sample using MorphSVG that might do what you want..
https://360.articulate.com/review/content/a447cc04-524a-40cb-8345-aa86660f3637/review

Math Notermans

Allthough i didnot figure it out completely, here is a first attempt to get this working with a combination of Powerpoint and GSAP DrawPlugin. As you can see when you click the 'Change Arrow' button the setup using GSAP works and changes color and the stroke on the arrow.

Gonna experiment a bit more to get the wanted result.

https://360.articulate.com/review/content/f219b4fc-5f1a-4879-b21a-60a2e1699c80/review

Math Notermans

This is what you want.
https://360.articulate.com/review/content/d1f72be2-35a9-4d18-a106-88bbf0680d99/review

As it uses GSAP's Plugin DrawSVG i cannot share the source. If you get a Greensocks account ( https://greensock.com/docs/v3/Plugins/DrawSVGPlugin ) you can get the plugins. Its worth every penny. I use the plugins daily.

How to get it working in Storyline360 ( in Storyline3 i think the latest GSAP isnot included, so you have to add it )

First you need to add the DrawSVGPlugin to your published Storyline folder... either by using a WebObject or by manually adding it or by manipulating your html-files in your Programme Folder. I did the latter so all my published projects have that available.

Then you need to make sure your project loads the plugin. I have a 'generic_functions.js' script thats also in the Programmes Folder and gets loaded in every Storyline i publish.

gsap.registerPlugin(DrawSVGPlugin);

I also added several functions in there for randomizing colors and numbers so i can call that anytime.

Then on the 2 buttons the SVG needs to be selected and changed. As SVG in Storyline is somewhat tough to select because Storyline generates a unique id for any SVG anytime you publish it... you have to jump through some Articulate hoops to get it.
As DrawSVG works only on strokes and lines..i created a line-shape in Storyline and gave that an accessibility-name of 'SL-curve01'.

var svgArrow = document.querySelector("[data-acc-text='SL-curve01'] > div > svg > g > path");
var svgArrow2Animate = document.querySelector("#"+svgArrow.id);

These 2 lines above then select the path for the line/arrow and we then can change it with gsap.

The first button that animates the stroke back to 1% is like this then..
gsap.to(svgArrow2Animate, {drawSVG:"1%", duration:3 , stroke: randHexColor(),ease:"power1.inOut"});
I noticed animating it to 0% makes it disappear completely and thus changing it back to 100% isnot possible anymore. Do think this is Articulate related and not GSAP.

And then on the 2nd button you can show it again at 100%
gsap.to(svgArrow2Animate, {drawSVG:"100%", duration:3 , stroke: randHexColor(),ease:"power1.inOut"});

So thats it basically. You would need to set the 0% at the start of your slide...
For the arrowhead you could make use of GSAP's Motion Path Plugin and ensure a triangle stays nicely to the end of the path.
Nice explanation of that here...
https://www.motiontricks.com/piggy-bank-motion-path-basics/

Math Notermans

As i always like this kind of challenges i couldnot resist going one step further and making this work perfectly so the lines hide completely... and some more randomness in the speed.

https://360.articulate.com/review/content/d8ad38e3-c07e-4711-83ab-af0ffb768604/review

Next challenge is indeed adding an arrowhead that follows a line ;-)