Archived topic
Start animation when div comes in viewport
9 replies · Started by Manuel on November 16, 2017
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 :-)
I assume that CSS isn't working? Without javascript, using keyframes is probably the way to go.
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.
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.
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.
Did it do anything at all?
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
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
I'll give it a try.
Thanks again.
No problem :)
