Animate element on scroll not responsive

Question

I have a scroll animation which is working in a 'test' page: https://wordpress-899937-3173615.cloudwaysapps.com/test/

The problem is I cannot make it work on the final page because the height of the page is different and the animation starts much earlier than the expected.

var scroll = document.querySelector ('.curve');
window.addEventListener ('scroll', function(){
    var value =  1 + window.scrollY / -200;
    scroll.style.transform = `scaleY(${value})`;
})

{
  margin:0;
  padding:0;
}

body {
  height:200vh;
  background-color:#111;
 
}

section {
  position:absolute;
  width:100%;
  height:100%;
  background:#ff2;
  
}

section .curve {
  position:absolute;
  bottom:-200px;
  height:200px;
  width:100%;
  transform-origin:top;
}

section .curve img{
    width:100%;
  height:100%;

<body>
  <section>
    <span class = "curve">
      <img src = "https://wordpress-899937-3173615.cloudwaysapps.com/wp-content/uploads/2023/01/curve-white-300x59.png">
     </span>
  </section>
</body>

I need help improving the code to make it more 'responsive' to any page height.

How can trigger the animation from 100% to 0% of the viewport?

I do not understand your question entirely - you want to delay the animation until the white circle / sun-thingy comes into view? If so, [this might help](https://stackoverflow.com/questions/487073). If that's not the case (you don't want something like that), and if you want to include the real document height in your calculations, try using `document.body.scrollHeight`. — FiddlingAway, Jan 14 '23 at 13:51
I need to animate the curve relative to the viewport instead of the entire page, like this code does. `var value = 1 + window.scrollY / -200;` I've been reading your suggestion but I don't know how to adapt it to my code. In "non-expert" words I want: 1. The curve stays as it is until it comes on screen 2. Once the curve is on screen, the curve should start shrinking `scaleY` depending on the scroll 3. The curve should be 0 when it reaches the top of the screen and not keep scaling negative (growing in the opposite direction) Does it make sense? — Lisandro Cejas, Jan 16 '23 at 01:55

FiddlingAway · Answer 1 · 2023-01-17T20:01:07.160

This might work for you. I suggest testing it out in a separate file, or on JsFiddle. I also suggest that you test it out in various resolutions, just to see how it works.

Provided solution / suggestion uses a modified version of checking the elements visibility in DOM, with regards to scrolling and the elements position, as shown in this SO answer.

var scroll = document.querySelector ('.curve');
var factor = scroll.getBoundingClientRect().top;
var value = 1;

window.addEventListener ('scroll', whiteCurve);

function whiteCurve() {
  let scrollProperties = isScrolledIntoView(scroll);

  if(scrollProperties["visible"]) {
    value =  1 - window.scrollY  / factor;

    if(value < 0) {
      value = 0;
    }

    scroll.style.transform = `scaleY(${value})`;
  } else {
    // console.log('no');
  }
}

function isScrolledIntoView(el) {
  let rect = el.getBoundingClientRect();
  let elemTop = rect.top;
  let elemBottom = rect.bottom;

  // Only completely visible elements return true:
  //let isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  // Partially visible elements return true:
  let isVisible = elemTop < window.innerHeight && elemBottom >= 0;
  return {
    "visible" : isVisible,
    "top" : elemTop,
    "bottom" : elemBottom
  };
}

* {
  margin:0;
  padding:0;
}
body {
  height:200vh;
  background-color: #111;
}
section {
  position:absolute;
  width:100%;
  height:100%;
  background:#ff2;
}
section .curve {
  position:absolute;
  bottom:-200px;
  height:200px;
  width:100%;
  transform-origin:top;
}
section .curve img{
  width:100%;
  height:100%;
}

<section>
  <span class="curve">
    <img src="https://wordpress-899937-3173615.cloudwaysapps.com/wp-content/uploads/2023/01/curve-white-300x59.png">
  </span>
</section>

In your original WordPress link, the source code contains a fixed value of -750 as a divisor (and your initial attempt uses -200). Instead of using a fixed numerical value, this revised suggestion employs the initial distance of your curve element from the top of the page (getBoundingClientRecT().top). This comes into play once the curve element becomes partially visible (unlike the previous suggestion, which used complete visibility of an element) - as the scrollY increases, the scale factor decreases, and once you reach the top, the scaleY becomes zero, giving you the effect you wanted.

Unfortunately it is not working, the only difference I noticed with the first code was the function `isScrolledIntoView(el)` keeps the curve as it is until it is on screen but then it shrinks the curve `scaleY` the value of `scrollY` counting from the top of the screen, so it changes from `scaleY = 1` to `scaleY = 0` as soon it comes on screen — Lisandro Cejas, Jan 17 '23 at 02:06
So it shouldn't flatten to `scaleY = 0` until it reaches the top of the screen? — FiddlingAway, Jan 17 '23 at 17:00

Animate element on scroll not responsive

1 Answers1