Clean diagonal swipe transition using HTML file overlaid on a transparent clip

It WORKS! Woo-HOO! Perfect transitions revealed by the blue diagonal swipe.
First, here’s the result:

https://streamable.com/4zaww

How I did it:
I adapted the HTML code to make it black and white (it must start all white and end all black), then applied it to a 4-second colour clip in SC, then exported it as an Mp4. I named it the same as the HTML file but added MATTE PAIR to the file-name for identification.:

https://streamable.com/70ra3

Then set the time line up like this:

Step-by step instructions:

  1. Make 4 video tracks;
  2. Put clip 1 on V1;
  3. Put the Matte Pair mp4 on V4. Use this as a template only for guiding where to split clip 2 (hide V4 with the eye icon). Line up the end of this clip with the end of Clip 1.
  4. Put clip 2 on V2. Overlap it and line it up with Matte clip on V4. Split at position= end of clip 1. This gives clip 2A and 2B.
  5. Apply a Mask:from file filter to Clip 2A. Select custom and point to the Matte pair MP4.
  6. Put a transparent colour clip on V3. Make it 4 seconds long. Apply the Text:HTML filter (v.19.06 onwards), select webvfx and point to the original blue sliding HTML file.

Preview - it should work.

Then - move clip [(Edit) 2B] down to V1 and repeat for all other clips in your sequence:

Ta - Dah!

It may look a complex procedure when written out like this, but it didn’t take long once I had prepared the HTML file and the Matte pair MP4. I used the copy feature to copy the transparent clip, and the copy filters feature to ad the “Mask:from file” filter to each clip.

Of course, I would need to make more Matte Mp4s if I wanted to change the angles of the diagonal swipe to add variety.

I also made a FAST matte MP4 to make this demo:

https://streamable.com/rx8tt

One more point: It’s easy to change the colours of the swipe bar by adapting the original HTML file.

3 Likes