Style and animate SVG graphics
With the latest update, you can now style and animate SVG graphics directly on the page. We've also added powerful stagger animations to animate multiple elements at once, including SVG paths, letters, or words.
Why are SVGs useful?
SVG stands for "Scalable Vector Graphics." Most digital pictures, such as the photos you see on your phone, are made up of tiny squares called pixels. Now imagine a picture made of lines and shapes instead. You can make it bigger or smaller, and it will still look sharp and clear. That's an SVG! Perfect for logos, icons, and illustrations. SVGs usually allow for smaller file sizes, and you can animate them, too!
How to use SVGs
There are two ways you can use SVGs in PAGEGRID. You can either use the image block and upload an SVG file or use the custom code block and paste SVG code. The second option allows you to edit the SVG directly on the page, simply by selecting it. From the panel, you can then change the stroke or fill of your graphics or use the interaction panel to animate those properties. This feature can even be used to create line animations using the stroke dash property.
What is a stagger animation?
Imagine a line of dancers. In a regular dance, they all start and stop at the same time. But in a staggered dance, each dancer begins a little later than the one before, creating a wave-like effect. That's the essence of stagger animations. These animations create a sense of rhythm and flow that can add visual interest and improve the user experience.
How to create a stagger animation
To create a stagger animation, select an SVG, grid, text, list, paragraph or any other item with multiple HTML elements in it. Then click on the interaction panel and type a name for your animation. Open the animation options and choose a target like "children," "words," or "letters". You can also add a delay to control the flow of your animation. Now change a property that you want to animate (e.g. "Move Y"). To preview your stagger animation, view the site on the frontend (click on the eye icon).
Case Study: Enter The Circle website
We recently created a new website for Enter The Circle, an international breakdance event in Hamburg, Germany. It was the perfect time to try out PAGEGRID's new animation features. We had a lot of fun with this one and were able to create the whole site in just 2 days without writing a single line of code.
