Issues with Animate on Scroll

[The-Real-JoshuaSugar]

Describe the bug A clear and concise description of what the bug is. I have been trying to figure out what is wrong with the animation on scroll functionality. In particular, I have an issue when animated elements are in the window on load. The execution is very unstable and from what I can see, browser specific. My assumption is that the elements are actually loaded by the browser before the AOS.init({}) function is added to the DOM? So presumably a faster internet connection might catch some of the elements before they are loaded. This is also evident when the page is reloaded consecutively (cache) - everything works perfectly (on safari only).

To view the issue with correct styling (Sandbox also created):

Visit my development site using Firefox: https://odq.mqb.mybluehost.me/ (I am yet to get Firefox to work once). The animation effect is meant to be applied to all of the elements in the hero section.

Then visit the same site with Safari and reload the page once or twice (Safari is the most stable that I have found).

You can also see that the animation is actually working by scrolling down the page and letting the "Login" and "Get Started" buttons fade in (this is completely stable), in the top right hand side of the window (center on mobiles)

Have you tried all the steps at https://oxygenbuilder.com/documentation/troubleshooting/troubleshooting-guide/? Yes

Are you able to replicate the issue on a Sandbox install at https://oxygenbuilder.com/try? If yes, provide the link to a Sandbox install where the issue is present. If the issue only exists on a specific post or template, provide a direct link to that post or template. Yes: https://oxygen-qq6qwj2apfr9k.oxygen-demo.qsandbox.me/test/ (Please excuse the lack of styling, I have been trying to figure out why this isn't working for 14 hours straight.) Note: Remember to try on both Safari and Firefox multiple times

To Reproduce Steps to reproduce the behavior: Add animate on scroll (without global settings) on multiple elements that are loaded IN VIEW on window load.

Expected behavior A clear and concise description of what you expected to happen. The document is completely loaded before the animation delay is triggered after which the animation takes place with the correct timing.

What actually happens A clear and concise description of what happens instead of the expected behavior. Sometimes the animation fires, sometimes it doesn't. It is very intermittent and browser specific. But for the most part, the animation does not fire at all. At certain times, the animation is loaded half way through execution and then either jumps to the end or starts again.

Screenshots If applicable, add screenshots to help explain your problem. Not really applicable - but the issue can be seen for yourselves.

Desktop (please complete the following information):

• OS: MacOS
• Browser Safari, Chrome, Firefox
• Oxygen Version 3.1.1 release

Smartphone (please complete the following information): I haven't even started on mobile yet.

Additional context I wouldn't think that this should have anything to do with it but 2 elements on the page that are being animated do not have static positions; 1 absolute (Div sliding right, revealing "Think Education." and 1 fixed ("Login" and "Get started" button in top right that only fires after an anchor in the "services" section.

[KittenCodes]

1053

[The-Real-JoshuaSugar]

Hi @KittenCodes ,

Thanks for reviewing this so quickly! Just a quick question - do you perhaps know what the turnaround time is for a fix? Obviously the scope of this fix in particular is not yet known and I am aware how frustrating it is when people ask for ETA's without knowing the extent of work that goes into a fix but I plan to deploy this site in the next week or two. I just wanted to know whether I should refrain from using animations throughout the site (and remove the current ones) until after the launch and a fix has been implemented?

Thanks in advance!

[KittenCodes]

@DeepMedia-Joshua

I'm sorry, but we can't give estimated times for bug fixes. This one may also be related to the AOS bug here: https://github.com/michalsnik/aos/issues/468.

[The-Real-JoshuaSugar]

Hi @KittenCodes ,

Thank you for getting back to me. It appears that quite a few people are experiencing this issue. I have reviewed the ticket that you have linked to but unfortunately it has not brought any luck after trying a couple different scenarios. I am going to remove the functionality for now and will revisit it once an update has been released. Hopefully a fix is slipped in there somewhere ;)

I assume that this ticket will remain open until the bug is seen to and I will be notified on any updates posted in here?

Just as a side note: I would like to express how mind blown I am with what you guys are doing - the sheer scope of the product had me speechless when I thought about how much work has gone into it. So seriously, fantastic job!

[KittenCodes]

@DeepMedia-Joshua Thank you for your comments.

I assume that this ticket will remain open until the bug is seen to and I will be notified on any updates posted in here?

Yes, this bug report will remain open until it's fixed. We'll then tag it with "bug fixed".

[Contributolo]

When I set the Animation Anchor in global settings to for example center center it is not applying the settings on the elements. I have to set center center for all elements...

[swinggraphics]

This is currently a passable workaround for me until michalsnik/aos#468 has a solution: EDIT: Improved, more reliable:

CSS

.delay-aos,
[data-aos][data-aos-delay]:not(.aos-init) {
    transition: none !important;
    visibility: hidden;
}

JS

$('[data-aos]').addClass(function(){
    if( $(this).offset().top < $(window).height() ) {
        return 'delay-aos';
    }
});
$(window).load(function(){
    $('.delay-aos').removeClass('aos-animate');
    setTimeout(function(){
        $('.delay-aos').removeClass('delay-aos').addClass('aos-animate');
    }, 50);
});

There still could be a flash of the element before it's hidden (?) but this is working very reliably in my tests.

UPDATE:

Turns out this can conflict with other animations, such as menus, because Oxygen uses the AOS library for those, too. You may need to adjust the code for your specific use. I am using the presence of data-aos-delay, but you could just as easily add the delay-aos class manually to those that are problematic and remove the second selector in the CSS.

[swinggraphics]

The way to get around this is for the element to start off with a class that adds visibility: hidden, then remove that when the animation classes are applied. This is the way Elementor does it, and the animations work for elements that are already in the viewport on load.

I'd like to see Oxygen ditch AOS (or to maintain backward compatibility, add a new option that is the default) and use a library (or simply roll its own) that uses named animations (and possibly lets us build our own or at least enter a custom name) and doesn't depend on waiting for AOS to fix their problems. Using named animations also fixes #852.

[niroma]

@swinggraphics Hi, thank you for the workaround, it's working though not firing the callback.

[swinggraphics]

Hi, thank you for the workaround, it's working though not firing the callback.

Can you clarify?

[niroma]

document.addEventListener('aos:in', ({ detail }) => {
        console.log('animated in', detail);
});

is not firing (but I don't need it personnally, this is just for the info)...

I also noticed that if you scroll down the page and refresh it, it's not working as intended (I use data-aos-delay to chain animations of visible elements) as it takes $(window).height() without considering eventual scroll position.

By now, while not really optimized I switched to this in plain js :

var delay = 0,  
    aosList = document.querySelectorAll("[data-aos]");  
    for (var i = 0; i < aosList.length; i++) {  
        var element = aosList[i];  
        if( isInViewport(element) )  {  
            element.classList.add('delay-aos');  
            element.setAttribute('data-aos-delay', delay);  
            delay += 500;  
        }  
    }

function isInViewport(el) {  
    var top = el.offsetTop;  
    var left = el.offsetLeft;  
    var width = el.offsetWidth;  
    var height = el.offsetHeight;  
    while(el.offsetParent) {  
        el = el.offsetParent;  
        top += el.offsetTop;  
        left += el.offsetLeft;  
    }  
    return (  
        top < (window.pageYOffset + window.innerHeight) &&  
        left < (window.pageXOffset + window.innerWidth) &&  
        (top + height) > window.pageYOffset &&  
        (left + width) > window.pageXOffset  
    );  
}

[swinggraphics]

@niroma If what you've got seems like a fix to the underlying problem, it would be great if you could contribute it to AOS: https://github.com/michalsnik/aos/issues/468

[BenSampo]

Including the CSS separately from the JS fixed this issue for me.

Try this for yourself by temporarily following the Basic install instructions instead of the package manager instructions.

Presumably bundling the CSS with the JS has some effect on the initial animation state which means the browser doesn't have a chance to start from the beginning of the animation, but rather half way through.