Animate.css: Scrollbar appears during animations

Created on 9 Mar 2017 · 3Comments · Source: animate-css/animate.css

I have really enjoyed this project; I just have one issue, whenever the animations are coming from the bottom up, for e.g. bounceInUp, the scrollbar seems to come up and then disappear, if it is not needed, at the end of the animation.

I have added a simple JS line to remove the overflow-y:hidden; when the animation ends; however, is there a better way to permanently fix that issue?

This is what I have at the bottom of the body:

    $('.centerMe').one('webkitAnimationEnd mozAnimationEnd oanimationend animationend', function(){
        $('body').removeAttr('style');
    });`

The opening <body style="overflow-y: hidden;"> tag I added the style attribute to remove the overflow. Once the animation is complete then it removes that style.

Source

samuel-fonseca

👍3

Most helpful comment

Any animation on browsers will just move elements around the page and might cause overflow issues that the developer will have to take care of. There's no generic way to solve this in a css library.

One thing that usually help is to put your animated elements inside a wrap (like a div) and set overflow hidden to it. But every case deserves its specific solution.

eltonmesquita on 9 Mar 2017

👍3

All 3 comments

Any animation on browsers will just move elements around the page and might cause overflow issues that the developer will have to take care of. There's no generic way to solve this in a css library.

One thing that usually help is to put your animated elements inside a wrap (like a div) and set overflow hidden to it. But every case deserves its specific solution.

eltonmesquita on 9 Mar 2017

👍3

Thanks man! I will try to play with the overflow element with javascript and see what I can make happen.

samuel-fonseca on 10 Mar 2017

Alright. Closing the issue, but feel free to reopen it if needed.

eltonmesquita on 10 Mar 2017

Was this page helpful?

0 / 5 - 0 ratings