How to create circle-transition-like page loading animation

Design help Animations & Interactions
1

Hello dearest Webflow community,

I’m struggling with implementing a circle-transition-like page loading animation in Webflow even though I did my best. I want to create an animation on which I want to start with full size image covering whole div block in the hero section and then I want to reshape it as circle and move it to the right of the section. After realizing that I am not going to manage it, I decided to create it in After Effects, and I upload it here to show you what I want to have as a result.

EDAnimation

However, I had also other difficulties when I tried to bring it to life in Webflow. First, I render it as .json, but the animation did not look what it was supposed to look, the final result in json looks totally different with low quality (you can see it in my public share link below).

Then, I tried to render it as .mp4 and upload it in Webflow as background video, but this time I had problem with quality, resizing it, and margin-padding control (since I want to add text and button on the left empty side of the hero section after on).

And yeah, so far not so good, and I seriously need help to implement this on my project. Any kind of help, recommendation or resource/tutorial (If it exists, I couldn’t find any tutorial related to this animation) are very much appreciated.

Thank you guys, in advance!

@Alkoreiel we have already talked about it, and I hope this post explains my need more clearly, thank you so much!

Here is my public share link: (https://preview.webflow.com/preview/buraks-beautiful-site-e319e6?utm_medium=preview_link&utm_source=designer&utm_content=buraks-beautiful-site-e319e6&preview=78cea3ac892f05cfa157119f875880b2&workflow=preview)
(how to access public share link)

2
  1. Create you mask circle in a program like Illustrator. Use a white box and knock out the circle area in the center.
  2. Make an .svg file of the mask image
  3. Using absolute positioning + z-index to position the circle mask on top of your photograph.
  4. Create a page load animation that uses the size property to “shrink” the savg into position. (do not use the scale property as this will blur your svg)

This is similar but different. The concept should work for your purposes. The mask is animated by scrolling rather than page load.
https://preview.webflow.com/preview/enlarge-the-logo?utm_medium=preview_link&utm_source=designer&utm_content=enlarge-the-logo&preview=2bc6cd505226e17ba37c18cf1e1fd48d&workflow=preview

3

Actually,
Here’s a second option that’s easier to implement. This doesn’t have all of the finer details worked out but should give you the gist of the concept.

https://preview.webflow.com/preview/enlarge-and-shrink?utm_medium=preview_link&utm_source=designer&utm_content=enlarge-and-shrink&preview=7c4c811929090cecc40ed0b25e7e735b&workflow=preview