javascript – Smooth ReactJS transform animation on window scroll

html - Animation after toggling doesn't apply the second style

I was wondering how this type of animation can be achieved. Please refer to the “Discover
OUR STORY” section animation example. I have tried using the following code to achieve the smooth scroll:

handleScroll() {
  const currentPos = window.pageYOffset;
  const node = this.contentRef.current;
  const nodeOffsetTop = node.getBoundingClientRect().top;

  const DIVIDER = 18;

  if (currentPos > nodeOffsetTop) { = `translateY(-${currentPos / DIVIDER}%)`;

However, as soon as you introduce the second section that is much further away from the top, the values get significantly increased and the section disposition flies to the top. I was wondering if there are more adequate ways of handling such animations

Source link

Leave a reply

Please enter your comment!
Please enter your name here