fade-in animation on scroll

Hi there,

i am not sure how you're adding it in code snippets - but that is Javascript and needs to be hooked into the page.
You can create a new Hook Element, add the script like so:

<script>
// Your Javascript goes here
</script>

Then set the Hook to wp_footer
And set the Display Rule Location(s) to where you want the code to fire.

Ok so i have done that now the code is active but the element which has classes hidden & fade-in-element fades in on page reload and then hides? i thought the js is telling it to behave the opposite and fade in when in view?

We are not able to help with custom code that's not a part of GP in this support forum.

I would recommend checking with the code author.

Thanks for your understanding.

So i am still struggling with this one. (I know Leo said its not within the support but i saw another user get support and achieve what they wished to do)
- Only asking again here because of this users post

I am trying to follow the post & the generate press support replies to achieve the same animation on scroll effect.

So i create hook with this JS.

<script>
$(window).on(“load”,function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(“.fade-in”).each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();

/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css(“opacity”)==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css(“opacity”)==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>

Then make css class like this
@keyframes fade-in {
from {opacity: 0; transform: scale(.7,.7)}
to {opacity: 1;}
}

.fade-in {
animation: fade-in 1.4s;
}

But when I apply the class "fade-in" to the container I wish to be animated when scrolled past, it just doesn't, the container appears and uses the animation on page refresh ONLY. Absolutely scratching my head over what I thought to be a simple task, surely cant be the only one looking to achieve this...

Getting error with this JS running ( Uncaught SyntaxError: Invalid or unexpected token ) Not sure if that has anything to do with it.
I Feel like I'm missing something simple.

Elvin actually provides the answer to the issue in that topic:
https://generatepress.com/forums/topic/fade-in-out-according-to-scrolling-down-up/#post-1596216

ie.

Ah right of course. My bad. I forgot to mention that you’ll have to change all of the $ to jQuery.