Animations restart

  • Resolved lausianne

    (@lausianne)


    5 years, 5 months ago

    On this site I have various animations, works perfectly. Just one issue: When the page loads for the first time (reload with Ctrl-F5), the animations start, then restart after a fraction of a second.
    My impression is, that the animations start while the page is still loading, and then they restart once the page is fully loaded.
    Therefore this only occurs on a fresh reload. There are some files that take much time to download, but when the page is reloaded without clearing the cache, it loads much faster and the animation restart does not occur.

    Is there a way to make animations begin only once the page is completely loaded?
    I mean globally, not just adding a random delay to each element.

    Thank you!

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author eleopard

    (@eleopard)

    Dear La,

    Thanks for using Animate It!

    I cannot pinpoint on the issue, but it is related to the scripts not laoding on time.
    These maybe the Plugin or Theme sripts.

    Try this workaround:
    1. Go to Settings > Animate It! > Advanced Tab > Custom CSS Box.
    2. Paste the following:

    .eds-on-scroll{
    opacity: 0;
}

    and Save.

    Now the animations should only happen once.
    Let me know if this works for you

    Thread Starter lausianne

    (@lausianne)

    Hi eleopard,

    Thanks for checking and your suggestion. What happens when I enter that code is that the elements slide in and then disappear. And it happens twice on every load.
    It is more clearly visible when I throttle the connection speed. At “mid-tier mobile” speed, the animations finish completely before restarting.

    Any other ideas?

    Plugin Author eleopard

    (@eleopard)

    Dear Lausianne,

    Along-with the above CSS. Please do the following:

    With the existing classes that you are adding, please add eds-scroll-hidden class as well.

    So instead of
    eds-on-scroll animated fadeInRightBig duration2

    Please make it
    eds-on-scroll animated fadeInRightBig duration2 eds-scroll-hidden

    Let me know if this works.

    Thread Starter lausianne

    (@lausianne)

    Thanks eleopard. Tried it, makes no difference, elements just gently fading out after each of the two animations.

    EDIT: Also tried on Twentynineteen, to see if it’s just the theme. But same there.

    • This reply was modified 5 years, 5 months ago by lausianne.
    Plugin Author eleopard

    (@eleopard)

    Dear Lausianne,

    I still cannot see the extra class “eds-scroll-hidden” on the page.
    Could you please keep it, and let me know.

    Thread Starter lausianne

    (@lausianne)

    Yes, I removed it after testing. I cannot leave it like this, it is a live site.
    So I created two pages for testing, that only contain one of the animations.
    Both have “eds-scroll-hidden”.

    https://www.watskin.com/animation-1-on-scroll/ – has .eds-on-scroll{opacity: 0;background:red;}
    https://www.watskin.com/animation-2-not-on-scroll/ – doesn’t have it

    Plugin Author eleopard

    (@eleopard)

    Hi ,

    Apologies for the inconvenience.
    I did some more testing on my end, and found the following solution to be working out:

    1. Remove the previous CSS and add the following to Settings > Animate It! > Custom CSS Block:

    .eds-scroll-hidden{
visibility: hidden !important;
}

    2. Now, again, please make sure the class eds-scroll-hidden is added with the other animation classes.
    Note: I viewed the source code of https://www.watskin.com/animation-1-on-scroll/ and I did not find the eds-scroll-hidden class added with the animation classes. You have to add it manually by hand.

    3. Save.

    You can see this workaround in action here: https://animateitdemo.wpdevcloud.com/demo-for-lausianne/

    Please let me know if this resolved the issue.

    Thread Starter lausianne

    (@lausianne)

    Hi eleopard,

    1. Your new CSS seems to work, I now added eds-scroll-hidden to all elements, looking good

    2. The classes are there: https://cl.ly/d2d379fe244e
    They don’t appear in the dev tools, but in the original source code they do

    3. Yes, looking good there

    Thanks a lot for your efforts and for finding a solution!

    Kind regards,
    Ralf

    Plugin Author eleopard

    (@eleopard)

    Dear Ralf,

    Glad to know it worked ??
    Marking this issue resolved now.

    Please feel free to let me know if you face any other issues.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Animations restart’ is closed to new replies.