[Resolved] Animated SVG icons

Home Forums Support [Resolved] Animated SVG icons

Home Forums Support Animated SVG icons

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2060554
    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)

    #2060655
    David
    Staff
    Customer Support

    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

    #2060966
    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.

    #2061139
    Leo
    Staff
    Customer Support

    If you want a custom solution like animated SVG icons then HTML block is the way to go ๐Ÿ™‚

    #2061232
    Dmitry

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

    #2061309
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2062093
    Dmitry

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

    #2062256
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.