0

my first post on Stackoverflow

I'm trying to build a simple scroll effect with intersectionObserver. The idea is when an item is out of the viewport, it is scale to 0, and scales to 1 when is fully visible. I really don't know if it is the good way to build this type of effect... but seems to work correctly, except:

I have some issues with "jumping" effects on the element when scrolling. I guess requestAnimationsFrame should solve it, but I'm unable to implement it and I would need some help to anderstand how it works.

A pen is visible here

Note: beginner JS,

Thank you.

const sectionScaleOption = {
     root: null,
     rootMargin: '0px',
     threshold: [
         0.0,
         0.05,
         0.1,
         0.15,
         0.2,
         0.25,
         0.3,
         0.35,
         0.4,
         0.45,
         0.5,
         0.55,
         0.6,
         0.65,
         0.7,
         0.75,
         0.8,
         0.85,
         0.9,
         0.95,
         1.0,
     ],
 };

observer = new IntersectionObserver(entries => {
entries.forEach(entry => {  
  const ratio = entry.intersectionRatio;
  const section = entry.target;
  if (ratio > 0) {
  section.classList.add('forTest');
  console.log(ratio);
  section.style.transform = `scale(${ratio})`;
  } else {
  section.classList.remove('forTest');
  console.log('out');
 }
});
}, sectionScaleOption);

const sectionToScale = document.querySelector('.section');


observer.observe(sectionToScale);
constantin
  • 1
  • 1

1 Answers1

0

For a better result a finally used: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

function buildThresholdList() {
  let thresholds = [];
  let numSteps = 100;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}


const obsOptnScrollOpct = {
  root: null, 
  rootMargin: '0px',
  threshold: buildThresholdList()
};

It is not perfect, and I would be very happy for any other suggestions/advices.

constantin
  • 1
  • 1