Jump to content

Custom scroll animation: Adding a class when object is visible

Recommended Posts

I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css.

My first step worked: With code injection I can add a class .preFade to my block:

window.onload = function myFunction() {
  var element = document.getElementById("block-85f05db57d57001f69ee");
  element.classList.add("preFade");
}

My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible:

const appear = document.querySelector('.preFade'); 
const cb = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('fadeIn');
    }else{
      entry.target.classList.remove('fadeIn');
    }
  });
}
const io = new IntersectionObserver(cb);
io.observe(appear);

 My JS skills are pretty poor, so any help is greatly appreciated.

Link to comment
21 hours ago, sitepositive said:

I created a white background for a title on a block by custom css. I would like to create a fade in effect when the user scrolls and the block becomes visible. I want to add classes dynamically and do the rest in custom css.

My first step worked: With code injection I can add a class .preFade to my block:

window.onload = function myFunction() {
  var element = document.getElementById("block-85f05db57d57001f69ee");
  element.classList.add("preFade");
}

My second step failed: I wanted user Intersection Observer to add another class .fadeIn when the block becomes visible:

const appear = document.querySelector('.preFade'); 
const cb = function(entries){
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('fadeIn');
    }else{
      entry.target.classList.remove('fadeIn');
    }
  });
}
const io = new IntersectionObserver(cb);
io.observe(appear);

 My JS skills are pretty poor, so any help is greatly appreciated.

Try the following one

<script>
	(function(){
    document.addEventListener('DOMContentLoaded',()=>{
        const element = document.getElementById("block-85f05db57d57001f69ee");
        element.classList.add("preFade");
        let observer = new IntersectionObserver((entries, observer) => { 
            entries.forEach(entry => {
            if(entry.isIntersecting) {
                entry.target.classList.add("fadeIn");
            } else entry.target.classList.remove("fadeIn");
            });
        }, {
            threshold: 1
        });
        
        observer.observe(element);
    });
})()
</script>

If it can not be implemented, kindly share your site with the protected password so we can take a look more detail

Hope it can help you

Edited by bangank36
after checking

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
44 minutes ago, sitepositive said:

Many thanks for your suggestion. Unfortunately, there is still a problem with adding the second class.

Here is the url:

https://clavichord-garlic-a66t.squarespace.com

password: sitepositive

 

I've just updated the previous code. Try it again and check if it works properly on your site.

My testing result

 

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.