Over the past year, we’ve seen a new design trend of animated text surrounding an image, including here in the Elementor showcases. For example, Diangelo Santos’s portfolio website, which was featured on the August 2020 showcase and Terrasol, which was featured in the November 2020 showcase.
I’ve seen this animated effect used by creating an animated GIF. However, creating such a GIF requires special knowledge to be able to create the graphic, animate it into a video, and then convert it into a GIF. Beyond requiring graphic design skills, it also takes too much time and effort for most people.
My aim for this tutorial is to show you how anyone can create the same effect without needing a special graphic and using real “live” text (specifically, an SVG).
Better yet, I’ll show you how to create this effect in two different variations – one that animates the emblem text on-scroll and another that automatically animates the emblem right away.
