Animations not working correctly on scroll

  • Hello!

    To begin with, I’d like to say that your plugin is TOTALLY AWESOME! I love the functionalities it provides, it makes my pages so much more lively! Great job guys!

    Unfortunately, I have a problem with scroll animations (my scroll offset is 75). As you can see on my website (https://babiec.com/d30), scroll animations are not working correctly.
    The problem is, when I scroll the page, I can see the animated element before it gets animated.

    To show you what I mean, I have animated some text and an image.
    The animated objects are:
    1) Everything you see on the white background at the very top of the page (this section works perfectly fine, nothing is wrong with it).
    2) The headline: “Poznaj Dreamz. Wybierz si? w podró? do wirtualnego ?wiata.” (scroll animation).
    3) The block of text just below that headline: “DreamVR 3.0 to ju? (…)” (scroll animation).
    4) The photo of the gogles in the section with this headline: “Graj. Ogl?daj filmy w 360°. Odkrywaj ?wiat.” (scroll animation).

    I added some delay to my animations look nicer. Some were added via class generator, others by creating shortcodes in new posts and then pasting them into the page, whose address I gave above. If everything worked correctly, I should not see any of the objects listed above until they are animated. The problem is that I first see them, then they disappear and get animated, and reappear again.

    I suspect that the problem occurs because there is a conflict between Animate It and Divi or Divi Builder from Elegant Themes, which I use. The challenge is, I have no idea how to troubleshoot and fix it. I would tremendously appreciate your help with this issue. Could you please give me a hand with that?

    My sincerest regards,
    Tomasz.

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

    (@eleopard)

    Dear thomascrowd,

    Thank you for using Animate It!.

    Regarding point 2, please increase the value of scroll offset to 100.

    For point 3 and 4, CSS class et_pb_animation_off added by theme is creating problem. Please add the following CSS classes in “Custom CSS” field under
    Settings -> Animate It

    .eds-scroll-visible {
    opacity: 1 !important;
}
.eds-scroll-hidden, .edsanimate-sis-hidden {
    opacity: 0 !important;
}

    Please let us know if it works.

    Thread Starter thomascrowd

    (@thomascrowd)

    Hello,

    Thank you for a quick response and for your help!

    I changed the scroll offset of the headline in point number 2. It works for smaller screens; however, when I checked it on 1080p, it was still animated on pageload. What could I do to prevent it from appearing until scrolling occurs on bigger screens?

    Points 3 and 4 were fixed by this code, thank you. Unfortunately, when I checked it on my phone (iP 6s with Chrome and Safari), images were not animated. I guess that perhaps the animation of images is somehow turned off for mobile, but I don’t know where to check it. Could you please help me with that?

    I also noticed that the button “Zamów teraz” doesn’t get animated on mobile. When the page loads, it is not there, and after some time (there’s delay so it’s fine) instead of entering from the right of the page, it just appears without any animation. Do you know what could cause this problem?

    Lastly, I added several new animations (in the section “Zobacz co mówi? nasi klienci” and in the price table). After they get animated, they disappear again. A quick troubleshoot found that the error is caused by the code you asked me to enter. It seems that it fixes some problems, but sadly causes others. Is there any other way to fix it universally, or is it necessary to enter custom CSS for every animated object?

    Thanks again for helping me, it is very kind of you!
    Have a good day,
    Tomasz.

    Plugin Author eleopard

    (@eleopard)

    Dear thomascrowd,

    Regarding your issue, could you please contact our technical team at [email protected]?
    They will further look into this.

    Thread Starter thomascrowd

    (@thomascrowd)

    Hello,

    Of course, I’ll get in touch with them. I’ll post the solution here once we figure it out so that more people can benefit.

    Thanks,
    Tomasz.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Animations not working correctly on scroll’ is closed to new replies.