How you can improve the animation of the transition between shapes?

[.mdl]

I get a bad transition between the first and second figure, I need to do as on the website https://readymag.com/evrone/2744381/3/

Please help me figure it out. I guess that I have problems with the scroll trigger somewhere.

See the Pen LYydVGK by mdl95r (@mdl95r) on CodePen

[mikel]

Hey @.mdl,

 

Try a specific position for the SVGs.

 

svg {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
}

 

Your code could be simplified a lot more.

 

See the Pen bGWKWwV by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

[.mdl]

17 hours ago, mikel said:

Hey @.mdl,

 

Try a specific position for the SVGs.

 

svg {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
}

 

Your code could be simplified a lot more.

 

 

 

 

Happy scrolling ...

Mikel

@mikel Thanks a lot for this example!