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.
Overview
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.
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.
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:https://playground.maxziebell.de/Hype/ClipPath/HypeClipPath.html
If I recall you sent me the file once (some time back) but do so again if you want.
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 ....
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)
