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.
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.
