javascriptanimationsvgfrontendgsap

How do I replicate the exact animation done on flecto.io hero section

I came across https://flecto.io(use a vpn if the site doesn't open) and the site caught my attention. I want to replicate the animation in the hero section. To be more precise, that is the part where the green rectangle turned into a cross-like shape.

Starting shape enter image description here

Final Shape (I removed unwanted distractions) enter image description here

I understand that this could be done with the use of gsap morphSVG plugin. But I am finding the use of that plugin for this purpose to be difficult. Here is a link to the demo I am working on Here.

HTML

<div class="container">
    <svg viewBox="0 0 1900 1500" fill="none">
      <g>
        <path id="rectangle" d="M0 0H1889V157V758V915H0V758V178.5V0Z" fill="black"/>
       
         <path id="final-stage" class="hide" d="M505.5 125.5H22.5H19C9.05887 125.5 1 133.559 1 143.5V774C1 783.941 9.05887 792 19 792H198.5C208.441 792 216.5 800.059 216.5 810V898C216.5 907.941 224.559 916 234.5 916H1426.5C1436.44 916 1444.5 907.941 1444.5 898V809.5C1444.5 799.559 1452.56 791.5 1462.5 791.5H1872C1881.94 791.5 1890 783.441 1890 773.5V144C1890 134.059 1881.94 126 1872 126H1385.5C1375.56 126 1367.5 117.941 1367.5 108V19C1367.5 9.05887 1359.44 1 1349.5 1H541.5C531.559 1 523.5 9.05888 523.5 19V107.5C523.5 117.441 515.441 125.5 505.5 125.5Z" fill="black" stroke="black" />
      </g>
    </svg>
  </div>

CSS

.container {
  width: 800px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  width: 100%;
  height: 100%;
}

.hide {
  visibility: hidden;
}

Javascript (I am using gsap plugin, and gsap morphSVG plugin on codepen)

gsap.registerPlugin(MorphSVGPlugin);

// MorphSVGPlugin.defaultType = "rotational";

var tl = gsap.timeline();
const rectangle = document.getElementById("rectangle");

  tl.to(rectangle, { duration: 1, morphSVG: {shape: "#final-stage", shapeIndex: -2 }});

This was my result https://streamable.com/mnh46o (this content might not be available in the future)

The thing is that after inspecting the site, the creators didn't morph a rectangle into a cross. They broke down their shape into smaller forms, consisting of two frames with different builds.

enter image description here

Notice that the first frame is a solid shape that has a cut out of a cross, while the second is a combination of several shapes that form the cut out of a cross. Why did they build the hero section this way? I am yet to figure it out. But I believe that this method is what makes their animation smoother than my method of morphing an SVG into a cross.

So, what do you all think? How can I replicate this design? What is the best method to do this?

Solution

  • The Solution

    I finally got to understand the problem and here is the breakdown of my solution. Thanks to @chrwahi answer I was able to understand how to get around this.

    The problem

    The problem was animating from one SVG to another. When thinking of animations between SVGs you need to consider the commands used in creating each SVG. Transaction from the green rectangle to the green cross was messy for me initially because I was animating a rectangle of lesser commands than the cross.

    Rectangle made with lesser commands That was why the animation was so buggy.

    The Fix

    By using the SVG Editor you can see all the commands for the path for both the cross and the rectangle.

    The commands used to form the cross SVG

    After playing with the editor I began to understand what @chrwahi did. He used the used the cross commands to form the rectangle.

    The commands used to form the rectangle

    Notice that this is a rectangle but the commands are similar to the cross. Also notice that the exact values for some of the commands are different for the rectangle. By adjusting the command value to make the SVG look like a rectangle you can then have a suitable SVG that can be animated smoothly from a rectangle to a cross.

    This means the cross has 27 commands(read about the d attribute and the commands here) and the rectangle was built to match the 27 commands. So by adjusting the 27 commands of the cross to form a rectangle, you can smoothly animate the rectangle into a cross. That's the secret!

    Note

    You might need to play around with this approach to get a floorless animation. But this idea should put you on the right track.

    Check out the final result on codepen (Make sure to use the left/right view and not the top/bottom view by changing the layout)

        // Please view the final result on codepen. I can't add a codepen link without adding codes. But this solution is not to showcase the code but to explain the idea.