Scroll triggered animation

[REELHERO]

Id like my thumbnails to animate in on scroll one by one fading in and sliding up as they do here

https://smugglersite.com/global/commercials/aoife-mcardle/absolut-equal-love

current page:

https://toddheymandirector.com/reel/

ideally using CSS only

[Nancy OShea]

I have previously used Wow.js library with Animate.css.  It has a light footprint and gets the job done with minimal fuss.

https://wowjs.uk/

[REELHERO]

Nancy hi!

thank you--

i just did a test page with wow and thought i did it correctly

https://toddheymandirector.com/reel/index22.html

installed wow.js and animate.css and added wow animate__animated animate__fadeInUp to the class 

[Nancy OShea]

This is an example of Wow.js on a <div> tag that contains one image.

<div class="col wow fadeIn" data-wow-delay=".51s" data-wow-duration="1.55s">

IMAGE HERE

</div>

[REELHERO]

thanks !- its a bit of a cheat but i did a delay on every other one 

https://toddheymandirector.com/reel/index22.html

[REELHERO]

almost got it

https://toddheymandirector.com/reel/index22.html

they dont go one at a time they go in rows 

the example was one at a time

https://smugglersite.com/global/commercials/aoife-mcardle/absolut-equal-love

they also seem to be just sliding not fading in even though the class is animate__fadeInUp

[BenPleysier]

OT: Do you realise that you are feeding spam bots with this bit of code?

[REELHERO]

thanks Ben - what do people do when they dont want to use a form (very impersonal in my biz)?

[BenPleysier]

Use bing to search for `email obfuscation`. One such a search gave me:

https://perishablepress.com/best-method-for-email-obfuscation/#:~:text=%20Best%20Method%20for%20Emai...

[REELHERO]

thanks ! thats enlightening - Ill obfuscate the heck out of it 🙂

[BenPleysier]

This may also helpL

https://www.youtube.com/watch?v=HzLtvAPPU-U&t=7s

[Nancy OShea]

what do people do when they dont want to use a form (very impersonal in my biz)?

By @REELHERO

==========

Once your domain is blacklisted for spamming (even though you didn't do it), you'll have a mess on your hands.  Don't put yourself at risk.

Obfuscation might help, but it's not 100% fail-safe.  Robots have become more sophisticated at cracking encryption codes. 

A secure scripted contact form is the best way to protect yourself and your domain from exploitation by robot harvesters/spammers.  Ask your hosting provider what they recommend.  Or use a 3rd party service like Wufoo.com or JotForm.com.

[osgood_ · Accepted solution]

You don't really need all that animate class stuff attached to your conatiners or any extra libraries All you need is the basics css classes:

<div class="thumb-container imageContainer">

Then use the intersection api to determine if the elements are in the browser view port:

<script>
if ( 'IntersectionObserver' in window ) {

let observer = new IntersectionObserver(function (entries, observer) {
var delay = 0;

entries.forEach(function (entry) {
if (entry.isIntersecting) {
setTimeout(function () {
entry.target.classList.add('fadeIn');
}, delay);

delay += 200;

observer.unobserve(entry.target);
}
});
}, { rootMargin: "0px 0px -8% 0px" } );

// observe the elements to be animated
document.querySelectorAll( '.imageContainer' ).forEach( function (el) {
observer.observe(el);
} );

}

</script>

Then use the css as below:

<style>
.imageContainer {
opacity: 0;
transition: all 1s ease-in-out;
transform: translateY(130px);
}
.fadeIn {
opacity: 1;
transform: translateY(0);
}

</style>

[REELHERO]

Osgood.. thank you! i wouldnt have built that site without you--

works beautifully--so elegant

https://toddheymandirector.com/reel/index_scroll.html

the only thing is i see - there seems to be a second fade in (ie it fades in fades out fades in again -noticably on the 2nd row which is immediately visible

[osgood_ · Accepted solution]

All I can suggest is remove the 'faded' class from the containers, it's not needed.

Looking at the rest of your css, it's a bit of a mess, so I'm not surprised there might be more than a few conflicts.

[REELHERO]

i knew it was the faded class causing it -- i dont even know why i asked - and yes ive made so any additions and adjustments on the fly but havent cleaned it up since you helped me a while ago - on it and thank you!

[REELHERO]

hi Osgood - im not sure what happened but suddenly its not working - even with the opacity set to 0 it shows up that disappears again the fades in again https://toddheymandirector.com/reel/index_scroll.html what did i do wrong?

[REELHERO]

found the conflict - apologies!

[Liam Dilley]

As Nancy pointed out WOW.js is great but you do have to have animate.css to couple it together.

Knowing when an element is in view etc is the key aspect of such functionality.
https://dev.to/emmaccen/how-to-know-if-an-element-is-visible-in-viewport-c45
As well as when they scoll

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

That is the core guts and there are Javascript frameworks like this one:
https://camwiegert.github.io/in-view/
That just focus on giving you the knowledge when the element is in the view so you can do your own thing.

Wow.js and animate.css give you options (quite a lot) to choose a load of preset animations to do but if you want custom you can use the above information and then your own CSS animations to do that as well.

Just extra information really here for you 🙂

[REELHERO]

thank you