[Resolved] Animated SVG icons

[Dmitry]

Hi!

1) What’s the easiest way to make simply animated SVG icons for Headlines blocks in GB (adding a specific css class to the icon only, for example using the “Animate it” plugin)?

2) What’s the simplest way to make complex animation for SVG icons for Headlines blocks? Like they did it on stripe? (link below)

[David]

Hi there,

Animated SVGs are not a simple thing.
They will either require inline CSS or Javascript ( Stripe uses its own custom JS ) or a JS Framework such as AirBnBs Lotti Files.

GB doesn’t change that but should support any inline SVG HTML that supports animations.

I would suggest looking at first creating some Animated SVGs. Theres a few apps out there for that

[Dmitry]

Thanks David!

I got that! As I see there is smth wrong with animation tag for SVG + headlines block. It works great when I insert SVG via HTML block, but it does not when I paste the same svg tag as an icon for a headline. Check the link.

[Leo]

If you want a custom solution like animated SVG icons then HTML block is the way to go 🙂

[Dmitry]

Is it possible to do smth with headline block disabling the animation tag for svg?

[Elvin]

Hi there,

The animation is directly written in the SVG’s code so you’ll have to modify the SVG itself to not have the animations.

As for animation for SVGs, you may want to consider using SVGator. 😀

[Dmitry]

So there is no way I can use animated SVG in headline blocks?

[Elvin]

It’s possible by editing the Headline block as HTML and applying the icon manually to it by code.

Like this – https://share.getcloudapp.com/OAu4zjBm

[Author]

Posts