Reveal animation

Design help Custom code
1

Hi guys!
I need some help with my code. I wanted to reveal an image in the hero inside a masked circle. It looks pretty good until the circle hits the side of the viewport, instead of being an even circle, it gets oval in the end. Can someone help me with the code to fix this. I’m not a developer:(

This is how my code look:

Skärmavbild 2023-04-06 kl. 14.13.40
Skärmavbild 2023-04-06 kl. 14.13.401246×928 66.7 KB

Here’s the live site with the reveal animation:
https://devport-enviromental-training.webflow.io/

Here’s my read-only link:
https://preview.webflow.com/preview/devport-enviromental-training?utm_medium=preview_link&utm_source=designer&utm_content=devport-enviromental-training&preview=348a6a570cca00489a3b7885329e16fb&workflow=preview

2

Try border radius in % Usualy we use 50% and a witdht and height fixed to get a pure circle…

BTW you could design element in webflow and target them in the script next. In most case no need for external CSS… It makes thoings more complicate for the guy who come next ( usaly me hahaha )

Have fun

3

Thank you for your help! Can you be more specific what I should do, i can’t get it to work?

4

change the value in custom code tl.fromTo(
targetElement,
{
width: “0em”,
height: “0em”,
borderRadius: “100%”,
duration: 1

},
{
  width: "200em",
  height: "200em",
  borderRadius: "100%",
  duration: 1
}

);

Change 200 em to more
and change the sticky-circle_wrap to overflow hidden.

should work