Animating via CSS in Divi

  • Resolved popvid

    (@popvid)


    5 years, 3 months ago

    (I don’t think this is a problem with your plugin; rather, I don’t know how to correctly place the CSS code.)

    I d/l and installed your plugin today (thanks for your time and effort!) and my SVG’s are displaying as and where they should…except for animations. I designed the SVG with Affinity Designer and ran it through SVGOMG, then created the animation and ran it through CodePen. It’s all good to that point. The problem lies, I suppose, within where to place the CSS code in Divi. If I use the Custom CSS section in a module I get an error with using @keyframe. But, if I put the CSS into the theme customizer I can’t place the @keyframe into a class.

    So, how does one use the CSS animation code in Divi?

Viewing 1 replies (of 1 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Thanks for your support and feedback!

    I always put my CSS in the child theme stylesheet. And then (in Divi specifically, but most page builders) I use a text/code module to place the SVG using an IMG tag. Using the image module won’t allow you to target the SVG and render it inline, just allows you to use SVGs like a normal image.

    So:

    1. place all your styles in your child theme stylesheet.
    2. add a text module to your page.
    3. switch the text module to text/html mode.
    4. add your IMG tag, for example: <img class="your-class style-svg" src="path/to/your/img/src.svg" />
    5. save page and check.

    It should be working at this point. You should see the SVG rendered inline in the DOM, so your custom CSS can now target internal elements of your SVG.

Viewing 1 replies (of 1 total)
  • The topic ‘Animating via CSS in Divi’ is closed to new replies.