Using Hype Clip Path to mask animations

Hello to All!

Just experimenting with various "organic" types of transitions that I started working with for a short time about a year ago, and just recently picked up again.

Created a scene transition using @MaxZieb's Hype ClipPath extension and a PNG sequence of a billowing satin material placed in a sprite sheet. The PNGs were generated from a video in a Motion demo included in the original Motion (Apple) app circa 2004-5.

Some observations:

Could not get this to work in Safari (14.0)... Max mentions issues with Safari & this extension (or clipping paths in general it seems) in one of his notes - no problem working in Chrome, Firefox,or Opera.

Perhaps things have changed in a more recent version of Safari... "can I use" is not very clear on this situation - but it will be great when it is supported - lots of creative possibilities here!

I think requestAnimationFrame would be a better route than the sprite sheet as the full sequence of 105 images, 720x486 (fully optimized) was only 6.4 MB on my computer but ballooned to almost 18 MB as a sprite sheet. Lesson learned.


The first image (Scene 1) has an animated mask of billowing satin flowing over it. When the second image (Scene 2) is revealed it is actually still in Scene 1 and then makes an instaneous jump to Scene 2. Looks much nicer in Hype's preview mode.

I've exported the Hype project as an MPEG-4 as the Hype file is way too large for here. At any rate, thought some of You might find this interesting.

The animated mask (red outline)... basic sequence.

Clip path 1

Clip path 2

Clip path 3


I remember this file and the connected discussion back then. If I recall you are where not using the latest version. If I am not mistaken Safari Issues have been fixed. Didn't touch the code in a long while, though.

Hi Max!

I'm using v1.7 of the Hype ClipPath extension.

That sounds great about Safari, Mojave~Safari (14.0) is literally a "no show" with this set-up. Sooner or later I am going to have to create a boot-up partition to run Big Sur... updating to a more modern browser is one of those things that nudges You along.

Have you also used the demo file in the thread to verify that the error is not related to the video file involved? Demo:
If I recall you sent me the file once (some time back) but do so again if you want.

1 Like

the sample even works on El Capitan running Safari Version 11.1.2 (11605.3.8.1).


Aha! Now that I have some more time... I discovered that the issue is our old buddy "Use WebKit graphics acceleration". I unchecked it and everything works fine in Safari.

Next up > eliminating the whopping overhead of the sprite sheet. Definitely was pushing its intended use. "setInterval" works as per my trials last year, think I'll see if "requestAnimationFrame" is a noticeable improvement.


If the approach is an videoexport ... please notice that wether setTimeout nor requestAnimationFrame will be synced with hypeanimations. You're better off using a timelineaction then ....

I moved this out of @mikefrost Feature request as this thread was becoming its own thing.

Not sure why there would be an interval involved. The animation of the Mask is done in Hype C Clip Path using the regular shape animation.

@JimScott has an imported png-sequence involved ...

Hi Hans!

If the approach is an videoexport ... please notice that wether setTimeout nor requestAnimationFrame will be synced with hypeanimations.

Actually this demo was intended to suggest possibilities for a Hype project complete with interactivity - not a video export. Additionally, in place of the billowing satin and its significant overhead (6MB) one could have instead an animated vector element - or simply use the clipPath for a highly customizable "wipe" scene transition between two scenes. The billowing satin was just an unusual example and represented an interesting departure from "garden variety" transitions.

If it was just "visual experience" (but no transparency of the moving element in Hype) then Apple's Motion app would be all that was needed and save a considerable amount of time and overhead (Please see Fig.1).

Fig.1 - Satin Transition as exported from Motion (384 K)


all fine, just wanted to mention that using setTimeout can be a pitFall for videoexport ...

1 Like