Possible to animate Site Logo like this?

  • Resolved Michelle

    (@michellepace)


    4 months, 1 week ago

    Hello there.

    I saw this wonderful effect on https://www.anthropic.com where the Site Logo “collapses” when scrolling down a page. This company is not using WordPress but I am wondering if perhaps I can achieve a similar effect in WordPress. I am using the Elementor Hello theme and Elementor Pro. I am happy to create a GIFF for my Site Logo if required. I read through these instructions https://elementor.com/blog/how-to-create-animated-emblem-logo but I believe my animation is beyond just “rotating text” as it involves the logo animation “collapsing” into itself. I am not highly technical, just a regular person.

    Question 1
    Whether Elementor or not, is it possible to do this on WordPress somehow, and if so what is the recommended method?

    Question 2
    Let’s say I’ve created a little GIFF where my logo “collapses” into itself. Am I able to replace the Site Logo with a GIFF and then have it animate?

    Question 3
    If GIFF is the way to go, I’m worried how the scaling is going to work on Mobile. Do GIFF’s scale, and if not, would I have to perhaps create a different GIFF for my Mobile Header?

    Thanks in advance,
    Michelle

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • The logo on your example page is an SVG which is animated when scrolling. This is not possible with gif files. This is a very individual solution that certainly cannot be created with the on-board resources of a PageBuilder. If you need help with this, you may be able to find someone here who can help you: https://jobs.wordpress.net/

    Thread Starter Michelle

    (@michellepace)

    thank you @threadi for your reply. What about.. is it possible to limit a giff file to playing just once one initial page load instead of on scroll? Would that be easier ?

    I assume that you mean GIF image files. GIFF doesn’t mean anything to me. You would have to be able to influence the GIF via JavaScript. This is described in more detail here: https://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript – you would have to link this to the scroll event. And if I remember correctly, not all browsers support this for GIFs.

    But here too: there is nothing ready-made for this, you have to develop it individually.

    I guess the solution is a code block, as a matter of fact I was able to upload the code for my animated logo using Divi.

    Thread Starter Michelle

    (@michellepace)

    hi @javm

    thank you for your reply and apologies for my lack there of – I entirely missed it.

    Do you mean to say in Divi you created a code block with the SVG code and then it worked? Again I’m working in Elementor pro, but if this was possible for you in divi I’m sure there must be some similar way in Elementor pro.

    thank you once again. Michelle

    • This reply was modified 1 week ago by Michelle. Reason: Typo

    If you have any questions about Elementor Pro, I would recommend that you contact their support: https://elementor.com/support/ – questions about commercial products are not permitted here in the forum.

    Thread Starter Michelle

    (@michellepace)

    Marking this as resolved as its getting old. @javm would love your answer if you get round to it.

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

Tags