[Resolved] Start animation when div comes in viewport

[Manuel]

hi all,
it’s not a specific GP question. i’m looking for a code snippet to start an animation when the div comes in viewport.

This is what i have:

@keyframes fadeIn{
    0% { opacity:0; }
    100% { opacity:1; }
}

.test-animation {
    animation: fadeIn 2s
}

Anoyone can help?
Best regards an thanks to Tom and the crew for a very nice Theme 🙂

[Tom]

I assume that CSS isn’t working? Without javascript, using keyframes is probably the way to go.

[Manuel]

Thanks for the fast reply!
All the JavaScript I’ve found didn’t seem to work.
So, if someone have a working code to show animation when it comes in viewport please let me know.
Thanks a lot and best regards.

[Tom]

You could give the div a class: hidden-on-load

Then add some CSS:

.hidden-on-load {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

Then some javascript in the wp_footer hook:

<script>
    jQuery( document ).ready( function($) {
        $( '.hidden-on-load' ).removeClass( 'hidden-on-load' );
    } );
</script>

Not tested, but may do the trick.

[Manuel]

Thanks a lot for your code but it also didn’t seem to work.
No problem cause it is nothing GP specific.
Thanks again for the great support.

[Tom]

Did it do anything at all?

[Manuel]

Not really. here’s a link to my site. it’s just a testside. the div with the class “hidden-on-load” is at the bottom of the content div.
My Testsite

Thanks

[Tom]

Ahh when it comes into viewport – that’s much more difficult.

Perhaps this topic will help: https://stackoverflow.com/questions/23180375/fade-in-div-when-its-scrolled-into-viewport

[Manuel]

I’ll give it a try.
Thanks again.

[Tom]

No problem 🙂

[Author]

Posts