The Idea
I got inspired by this ad for The North Face, featuring 3D letters flying towards the screen, and wanted to do something similar, but in the shape of my logo and having this custom animation on the homepage of my portfolio, but wasn't sure on how to make a custom scroll animation to move the video frame by frame. I decided to learn and share my results to hopefully help others with achieving a similar effect, troubleshooting, and finding the right approach depending on the type of result you're looking for.
The Design Process
I setup the text in Illustrator using this Bubblegum font from dafont. Making sure to expand it so we can export / import as SVG format into Blender.
For the inflated text, this tutorial helped me figure out how the cloth physics work with collisions.
(Imported SVG extruded and converted to a mesh compared to after adding remesh + subdivision modifiers)
Now I just needed to use my logo instead of the shape in the video, and to have the text fly forward. I moved the text a bit ahead of the logo's outline so it'd still expand into the shape before flying.
(letter placement within the logo outline)
I had some issues with the text absorbing into the outline, and had to adjust the collision's outer thickness to fix it.
Here's how it looked after playing with some of the pressure settings mentioned in the video:
Rendered as a PNG sequence with alpha, and here's how it looks:
Then I just brought it into After Effects, added a white background, and exported as mp4.
Webflow Scroll Animation
My first attempt, I tried using the background video element. Before I got to the scrolling aspect, I noticed the video quality was pretty bad for a full-width video, so I did a bit of research and found that Webflow compresses the video quite a bit with the background-video element, and it's essentially unavoidable.
The next potential solution I found was to use LottieFiles, which allows you to import animations and set up interactions based on the user's scroll. Webflow has a great tutorial on how to do this.
The issue I had this time was with the size of the JSON file, after some research I discovered that 15-20mb is still too large, and mine was sitting at 45mb after compression. I tried changing the frame rate and the PNG image size's before creating the sequence but still no luck.
After some more research, I discovered this Codepen that does exactly what I need, but it requires a bit of setup for the video file before bringing it over to Webflow.
Using this Codepen and the Dropbox solution for the video hosting, I worked on importing all of the info into Webflow. At first I tried using my original video file and having the JS in the page HTML (before the body), but both of these had issues. The Codepen says that the encoding of the video is important in JS comments, so you need to use FFMPEG to encode the video.
I downloaded the FFMPEG essentials from here: Builds - CODEX FFMPEG @ gyan.dev
I exported it into my downloads and added an Environmental Variable by:
Right clicking the Windows logo -> System -> Advanced System Settings -> Advanced -> Environmental Variables
In the System Variables section, find the Path variable, go to Edit, then New, and connecting it to your bin file in the FFMPEG exported folder:
C:\Users\palle\Downloads\ffmpeg-2023-01-18-git-ba36e6ed52-essentials_build\bin
Now I modified the command he put in the JS section (just changing the filenames gave me errors, so I added quotes and a short, direct file location along with not having the video/FILENAME.mp4 separated).
The Codepen format: ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4
My format: ffmpeg -i "D:/test/whitebg-1080p.mp4" -vf scale=1920:1080 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p "D:/test/output.mp4"
After uploading the updated file to Dropbox and including it in the HTML embed with a <video> element, it wasn't showing up, which I found that changing the dl=0 to raw=1 at the end of the link allows you to directly render files on your browser.
Example:
https://www.dropbox.com/s/file.mp4?dl=0
https://www.dropbox.com/s/file.mp4?raw=1
The next issue was with the JS code and the location. I needed to import the functions being called with gsap and ScrollTrigger with the following placed before the Codepen JS code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
The location of the code, because it uses the querySelector, it was giving me an error of the currentSrc being null (not connecting to the video-background element specified in the HTML embed) as it wasn't defined yet since the video-background ID is created after within the body.
I solved this by including the JS script into the HTML embed element (after the video element is called).
Here's the Webflow properties for the HTML embed.
Also created a div afterwards to add space (I used 200vh, but feel free to change this number), just like the Codepen, here's the Webflow properties for this (also went to the settings and set the ID to container).
And it should be done! The main limitation of this is the Dropbox video quality, which isn't ideal. The solution to this would be finding somewhere else to host the video online (I tried Vimeo but my guess is that it changes some of the encoding settings when uploading, I could be wrong though) that allows for full-quality embedding, which might come at an additional cost.