How To Animate The Gooey Effect

Duration: 04:51

Step 1 - Import Your Artwork

Save your vector design as an .svg file, open the Library Panel, and upload it using the Plus icon. Double-click the imported file to reveal its elements, which appear as nested folders that preserve your Illustrator layer hierarchy.

Step 2 - Explore Animatable Properties

Select your element and click Animate to view its properties. Morph controls the vector path, and Origin works like an After Effects anchor point. Selecting any property adds a keyframe, and you can create additional keyframes by moving the playhead and adjusting that property.

Step 3 - Animate The Morph

Adjust paths or node points to animate the Morph property, then pull the speed-curve handle beyond the graph to add elastic overshoot. SVGator lets nodes extend past final positions, giving the gooey effect its lively feel.

Step 4 - Duplicate And Arrange Folders

Once the motion works, duplicate the top-right folder inside Pose 1 and rotate it 90 degrees from the canvas center. Repeat this to create bottom-left and bottom-right versions, then hide everything except the top-right folder.

Step 5 - Offset And Sync Poses

Duplicate the entire Pose 1 folder and offset the morph timings. Sync all keyframes for each pose so you can later modify the design simply by hiding or revealing subfolders.

Step 6 - Refine With A Base Shape

Place the base squirqle above everything to mask any unwanted path distortions and keep the transformation looking smooth.

Step 7 - Animate The Master Controls

Select the Master Ctrl folder and animate its scale and rotation. Since all subfolders inherit transformations from parent folders, these changes flow through the full structure.

Step 8 - Export And Review

Experiment until satisfied, then export your work as an animated SVG or MP4. Preview the result to ensure the gooey effect behaves exactly as intended.

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!