corner-border-tl.svg.zip (925 Bytes)
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)
3 Likes
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)
2 Likes
Thanks Peter, jumping to another scene may not be practical for my use.If I could trigger a timeline it would work but it seems I cant do that. Thank you
Since I was curious myself, I had ChatGPT explain the matter to me:
‘My’ version (via Vivus Instant) works because the animation in the SVG file is a CSS animation. These start when the browser actually renders the element (e.g., because it changes from display:none to visible or gets newly added to the layout flow). In Hype, visibility is often toggled exactly this way → CSS animation starts running.
Your version of the SVG uses SMIL (Synchronized Multimedia Integration Language) for the animation. SMIL is treated like this in many setups: start time = when the SVG is parsed/inserted into the DOM, not “when it becomes visible.” If Hype, for example, adds the SVG to the DOM during scene setup (just invisible), then begin="0s" has already elapsed by the time it becomes visible. When you make it visible later, the animation is already over (or it’s already “frozen” in the end state).
To make your version (SMIL) work, you'd have to do two things:
Change in your SVG: begin="0s" to begin="indefinite" → otherwise, the animation runs automatically right away
Define a small function in Hype:
function playSVG(hypeDocument, element) {
var anim = element.querySelector('animate');
if (!anim) return;
// Reset + restart
var clone = anim.cloneNode(true);
anim.parentNode.replaceChild(clone, anim);
clone.beginElement();
}
... and then call this function from your SVG when it enters the viewport.
lineAnimation_smil.hype.zip (28.7 KB)
2 Likes
Understandable, that was one of the examples, but it can be done via a new Timeline or within the Main Timeline. This example uses a Main Timeline simplest using hypes UI to Display “Hidden and Visible” ways similar to @ktewes 1st method without relying on a new timeline or trigger of scroll. The button acts as a reset which reloads the scene making the animation rerun.
That said, If its still not something your looking for, I would need to know what it is you are trying to accomplish to get you something that works for your project. You can use Hype UI to accomplish so many tasks which you’d think requires scripting which you can however you’d be surprised what it can do on its own without the use of scripting.
timlinedisplay.hype.zip (28.1 KB)
wow you have done a deep dive
Hi Peter. Your example only displays the SVG but doesn’t start the animation. Maybe take a look at my recent post — I tried to explain the reason for that there.
1 Like
Yes I’ve looked at your posts. It does start on my end on safari, not sure if we’re seeing the same thing, however I’ve tested it a few times and it did start the animation. Will attempt to look at it again. I saw your reasoning for start and stoping.
Update new findings:
Interesting, Safari On Sequoia plays the SVG animation once, hitting restart the button doesn’t but then waiting 30 seconds after it does reload the animation.
When testing Safari on Tahoe it actually does react to restarting the scene which plays the animation - What?
Chrome/Firefox doesn’t play at all just shows the SVG already played out.