Logo change depending on scroll position

Design help Custom code
1

Hi All!
I am working on a project for a friend my first webflow client actually and I need your help with few animation issues I am facing.
The client wants the logo on this site to change depending on the section, the logo should start as white and fully written and when it reached the about us page it should change to a different one with colors. Here is the project link:
https://preview.webflow.com/preview/dopamine-site-5?utm_medium=preview_link&utm_source=designer&utm_content=dopamine-site-5&preview=a8830483025f93da94104cd9b3cf2b59&workflow=preview
I searched online but I couldn’t find a way to set a condition on the image to hide once it reached the white about us section and to display the other image.
Will appreciate your insight on this.
Thanks in advance!!

2

hi @Ahlem_Daoud keyword you need to find resources is intersection observer.

1 Like
3

Hi @Stan thanks for the insight, I tried using the intersection observer but it didn’t work for me, here is the code I used

<script>
  const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.95,
  };
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.target.id === "logoinitial") {
        if (entry.isIntersecting) {
          document.querySelector("#logochange").style.visibility = "visible";
          entry.target.style.visibility = "hidden";
        } else {
          document.querySelector("#logochange").style.visibility = "hidden";
          entry.target.style.visibility = "visible";
        }
      }
    });
  }, options);
  
  observer.observe(document.querySelector("#logoinitial"));
  observer.observe(document.querySelector("#About_section"));
</script>
4

when you check your page with devTools you see TypeError: Argument 1 ('target') to IntersectionObserver.observe must be an instance of Element so you need to fix this.
hint: you are selecting by ID that doesn’t exist