Can I play an SVG animation like this sample on enterViewport

1

corner-border-tl.svg.zip (925 Bytes)

2

Yes, you can. Create an element like a rectangle or ellipse make it transparent while on it, go to the action panel select “On Enter Viewport” Choose “Next Scene” “Instant” create a new scene and drag and drop your svg to project window on scene 2

example.hype.zip (15.5 KB)

1 Like
3

I can’t get it to work with your SVG. For these purposes, I like to use Vivus Instant. With this tool, you can animate static SVGs “line by line.”

You need to insert the SVG code of the animated SVG into the innerHTML of a Hype element (so not as a background image). The animation is started by first making the SVG invisible and then visible.

In the example, I implement this very simply: the enterViewport event does nothing more than exactly that—starting a new timeline, that switches the SVG from invisible to visible.

Hope, this helps.

lineAnimation.hype.zip (31.3 KB)

1 Like