Visibility set to hidden after animation

  • I have a group block which wraps two 50-50 columns. Nothing special. I used to have an animation (zoom) on the group block and it worked fine. At some point in the last few months things changed (it’s a development project which had a quiescent phase, now moving on again). Now the animation runs, but at the end of the animation an inline style is added to make the whole group block hidden.

    So we end up seeing the animation run, and then – poof, it’s gone )-:

    To be able to continue work on the site I’ve turned off the animation, which solves the visibility problem… but I would like to have the animation.

    I’ve tried deactivating the few plugins which could possibly have interfered, no change. It’s an ultra-lightweight site, with very few plugins, and a theme which I programmed myself to be ultra-light. So I find it very unlikely that the problem is caused outside of Editor Plus.

    The website is in coming soon mode, as it’s still being developed, but I could arrange for it be online briefly if you tell me when you could look at it.

    Many thanks for a fantastic plugin and your support!

    Tim

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Munir Kamal

    (@munirkamal)

    Hi @tim-reeves

    I just did a test on a fresh install with the latest version of EP, and the animation seems to work fine. Here’s a quick screencast.
    https://share.getcloudapp.com/12u0vK0x

    Could you make sure you are using the latest version of the plugin & WordPress?

    Also, I would advise testing again after disabling all other plugins and if the problem remains, try switching your theme to a default WP theme.

    Cheers

    Thread Starter Tim Reeves

    (@tim-reeves)

    Hi @munirkamal

    that’s really kind of you to look at it promptly. I’ve now tried it with
    a) the standard theme Twenty Twenty-One
    b) all other plugins deactivated

    But that’s not changed the symptoms. And yes, I really do keep everything up to date.

    Here’s the source code of the page, as sent to the browser, at the problem position:

    <div class="entry-content">
<div class="wp-block-group eplus-wrapper eplus-styles-uid-5f87cb">
<div class="wp-block-group__inner-container">
<div class="ep-custom-column edplus_anim-3EeDTd wp-block-columns eplus-wrapper eplus-styles-uid-ae04b8">
<div class="wp-block-column eplus-wrapper eplus-styles-uid-ca675a">

    And compare that to the page code displayed by the brwoser debugger after JS has run:

    <div class="entry-content">
<div class="wp-block-group eplus-wrapper eplus-styles-uid-5f87cb">
<div class="wp-block-group__inner-container">
<div class="ep-custom-column wp-block-columns eplus-wrapper eplus-styles-uid-ae04b8" style="visibility: hidden;">
<div class="wp-block-column eplus-wrapper eplus-styles-uid-ca675a">

    The fourth DIV has got an inline stlye added to it, “visibility: hidden;”.
    Looks like we’ll be debugging JS…

    Best,

    Tim

    Thread Starter Tim Reeves

    (@tim-reeves)

    Well, I reckon it’s this line in frontend.js which hides the block:

    animationElem.style.visibility = "hidden";

    The modern JS which follows is beyond me (the IntersectionObserver()), but that’s obviously where it should be made visible again, but is not. Or something like that.

    I tried commenting both style.visibility lines out: The block is then visible, but the animation does not happen.

    Can this be some sort of timing problem? As I mentioned, my website is unbelievably, yea ridiculously minimal – there’s virtually no JS at all running on it. In other words, pretty much nothing more happens after the load event is triggered.

    Cheers!

    Thread Starter Tim Reeves

    (@tim-reeves)

    Hi @munirkamal

    since I really need to see what I’m developing, I have added this line to frontend.js after the lines 13 to 26 – the ones I don’t understand starting “const observer = new IntersectionObserver”:

    animationElem.style.visibility = "visible";

    Now the animation works on a complete page reload (Ctrl-F5) but not on a simple relaod (F5). But in both cases at least the element remains visible.

    Would really appreciate it if you could look into this!

    Cheers,

    Tim

    Plugin Author Munir Kamal

    (@munirkamal)

    Hey,

    Thank you for sharing all the details, we’ve done some tweaks and hope this should be fixed in the latest update. Could you please update the plugin & test again and let me know.

    Cheers,
    Munir

    Thread Starter Tim Reeves

    (@tim-reeves)

    Hi @munirkamal

    many thanks for looking at this so quickly – and YES, the fix works, now the animations happen and the end result remains visible.

    But I now notice the following (with zoom animation, but also for fade, probably others too):

    • Initially the block in question appears very small and starts to zoom out
    • But then there’s a hiccup, and the whole process starts over, from a very small rendering the zooming out starts again. This time there is no more interruption and the effect finishes as expected.

    Interested to hear what you can say about this. I don’t know if it will be visible on “heavy” websites, the one I’m working on is still ultra-light.

    Cheers,

    Tim

    P.S. for ultra-light I recommend the plugins “WP Featherlight” for lightbox and “No BS Image Slider” for sliders – latter uses no JS at all, fantastic. And for everyday purposes “WP Statistics” suffices, and only needs 4 DB tables.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Visibility set to hidden after animation’ is closed to new replies.