Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Firstly, thanks for your support and choosing my plugin!
    It’s hard to say without having the file or a link to your site.
    If you can shoot me a link to your site, I can take a look. Or a link to download the file, I will try it on a fresh install.

    I might be a bit though, 2am and I’m done for the night. But will take a look as soon as I can.

    Thread Starter berniebee

    (@berniebee)

    That was quick!
    The static version of the logo is to be seen at http://www.carmtd.com/
    The animated one which doesn´t work over the video is at http://www.carmtd.com/contacto/
    Scroll down a bit to see it move.
    Thanks!

    Plugin Author Benbodhi

    (@benbodhi)

    Thank you.

    I can see the logo in both links. And I can see the one in the header has hover effects, while the other one in the post/page does not.

    I think it might be to do with your SVG file itself.

    When I save the SVG code, it doesn’t work exactly.

    Can you please provide the SVG file itself so I can test it on my end? I was unable to download a copy of it because it’s already rendered inline.

    Plugin Author Benbodhi

    (@benbodhi)

    To be clear, if you send me the animated version of the logo, I will test with twentyseventeen theme using it as a logo in the customizer.

    Thread Starter berniebee

    (@berniebee)

    Here´s the direct link to the animated svg file. Hope you can get it to work!
    http://www.carmtd.com/wp-content/uploads/carmtd-logo-white-plain-249px-export.svg

    Plugin Author Benbodhi

    (@benbodhi)

    Thank you.

    It looks to me like the animation works fine, but it only runs once.

    I’m able to get it to run again by doing a hard refresh (CMD+SHIFT+R in Chrome on Mac), but not a standard refresh.

    I would suggest putting all your animation in a separate JS or CSS file rather than embedded in the SVG. In saying that, I have successfully used animated SVG’s before without issue, so I believe it’s something to do with the SVG itself only playing once through.

    Thread Starter berniebee

    (@berniebee)

    Thanks for that! Let me try and change it to a loop and see if that works. The idea is that it only runs on page load, but I can change the design to something more subtle if need be.
    I used inkscape to draw it and then svgator to animate it, just for your info.
    I´ll try that Monday, have a good weekend!

    Plugin Author Benbodhi

    (@benbodhi)

    I personally still think separating animation from image elements is important and always avoids this sort of stuff. But give that a go and see if it is indeed working. The initial animation might be happening before the page has finished loading… another reason to use JS or CSS for the moving parts.

    I’ll be interested to see if it is just happening before you get to see it. Because it works fine elsewhere like in the media library. But you’ll notice that you see it animate just once, then when refreshed, it doesn’t animate again, unless you do a hard refresh or clear cache.

    Thank you! Hope you have a great weekend as well!

    Thread Starter berniebee

    (@berniebee)

    Morning,
    So I just made it loop in svgator (great app by the way) and it now renders fine on top of the video.
    We live and learn.
    I will try and see how to separate the functions from the coordinates in the future.
    Thanks for your help.

    Plugin Author Benbodhi

    (@benbodhi)

    Great news!

    It does actually look cool! I’ll be sure to have a play with it.

    I’ve actually been thinking about including something like this in my plugin for a few years… but it may be a bit bulky. I’m a fan of doing all that offline to keep websites as minimal as possible.

    Thanks for your support.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Animated SVG logo in header’ is closed to new replies.