Animate text as the user scrolls over a sticky positioned div

I am trying to animate four headings as the user scrolls. First I create a sticky positioned div, then the user scrolls over the headings toggling the class .active one at a time, leaving the last one visible and continuing scrolling to the last div.

The problem I am having is that once the .sticky div becomes sticky the browser no longer detects further scrolling until the div becomes non-sticky again.

--- UPDATE

I have changed the code to transition sequentially and works better, but I would like to start the animations only when the .sticky div becomes sticky, but I tried that and the scroll animation stops working completely. Also, I would like to keep all headings on the same block but If I do position: absolute on them it breaks the animations too.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const headings = Array.from(document.querySelectorAll('.animated-text'));
const sticky = document.querySelector('.sticky');

let currentActive = null;

window.addEventListener('scroll', () => {
  const viewportHeight = window.innerHeight;
  headings.forEach((heading, index) => {
    const headingRect = heading.getBoundingClientRect();

    if (headingRect.top <= viewportHeight / 2) {
      if (currentActive) {
        currentActive.classList.remove('active');
      }
      heading.classList.add('active');
      currentActive = heading;
    }
  });
});

<!-- language: lang-css -->

body {
  margin: 0
}

section {
  position: relative;
}

.sticky {
  padding-bottom: 150px;
  background: #2d232c;
  position: sticky;
  top: 0;
  overflow: hidden;
  height: auto;
  color: white;
}

.animated-text {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 1s ease, height 1s ease, transform 1s ease;
  transform: translateY(0);
}

.animated-text.active {
  height: auto;
  opacity: 1;
  transform: translateY(-20px);
}

.hero, .end {
  height: 100px;
  background: white;
}

<!-- language: lang-html -->

<section class='hero'>
  <p>Start</p>
</section>

<section class='sticky'>
  <div class='text-animations'>
    <h1 class='animated-text active'>Intro</h1>
    <h2 class='animated-text'>First</h2>
    <h2 class='animated-text'>Second</h2>
    <h2 class='animated-text'>Third</h2>
  </div>
  <p class='intro_content'>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </p>  
</section>

<section class='end'>
  <p>End<p>
</section>

<!-- end snippet -->

It looks like you are trying to create an animation effect for your headings as the user scrolls and the sticky div comes into view. However, the current code only handles the scroll event once, and the scrolling doesn't continue after the .sticky div becomes sticky.

To achieve the desired effect of toggling the "active" class for the headings one by one as the user scrolls, you'll need to continuously check the scroll position and update the active heading accordingly. You can achieve this by using the getBoundingClientRect() method to determine the positions of the headings relative to the viewport.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const headings = document.querySelectorAll('.animated-text');
const sticky = document.querySelector('.sticky');

window.addEventListener('scroll', () => {
  const stickyRect = sticky.getBoundingClientRect();

  headings.forEach((heading, index) => {
    const headingRect = heading.getBoundingClientRect();

    // Check if the heading is inside the sticky div and has come into view
    if (headingRect.top >= stickyRect.top && headingRect.bottom <= stickyRect.bottom) {
      // Add 'active' class to the current heading and remove it from the others
      heading.classList.add('active');
      for (let i = 0; i < headings.length; i++) {
        if (i !== index) {
          headings[i].classList.remove('active');
        }
      }
    }
  });
});

<!-- language: lang-css -->

body {
  margin: 0;
}
section {
  position: relative;
}
.sticky {
  padding-bottom: 150px;
  background: #2d232c;
  position: sticky;
  top: 0;
  overflow: hidden;
  height: auto;
  color: white;
}
.animated-text {
  opacity: 0;
  max-height: 0;
  transition: opacity 1s ease, max-height 1s ease;
}
.animated-text.active {
  max-height: 1000px;
  opacity: 1;   
}
.hero, .end {
  height: 100px;
  background: white;
}

<!-- language: lang-html -->

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Animation</title>
 
</head>
<body>
  <section class='hero'>
    <p>Hero space</p>
  </section>

  <section class='sticky'>
    <div class='text-animations'>
      <h1 class='animated-text active'>Intro</h1>
      <h2 class='h1 animated-text'>First</h2>
      <h2 class='h1 animated-text'>Second</h2>
      <h2 class='h1 animated-text'>Third</h2>
      <h3 class='intro_content'>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
      </h3>
    </div>      
  </section>

  <section class='end'>
    <p>Ends<p>
  </section>

<!-- end snippet -->

With this updated code, as the user scrolls and the .sticky div becomes sticky, the browser will continue to detect further scrolling and update the "active" class for the headings accordingly, providing the desired animation effect for the headings one by one.

As per the requirementm for positioning all headings at the top, adding

position:absolute; 
top:0;

in .active class resolves the problem.

And for starting animation only when the div becomes sticky, the stickyDiv position needs to be compared and then the animation logic should be implemented.

I have tried to put the logic for transitioning of headings on the basis of scroll up or down event too so that the heading transition correctly in order irrespective of scroll direction.
I am aware the code requires a lot of refactoring, but I hope it works as per the requirement.

let headings = Array.from(document.querySelectorAll('.animated-text'));
const sticky = document.querySelector('.sticky');
let lastScrollTop = 0;
let currentActive=0;
window.addEventListener('scroll', () => {
const stickyDiv=sticky.getBoundingClientRect(); 
let st = window.pageYOffset || document.documentElement.scrollTop; 
if (st > lastScrollTop) {
if (stickyDiv.top===0) {
for(let i=currentActive;i<headings.length-1;i++)
{
const headingRect = headings[i].getBoundingClientRect();
if(headingRect.top<=0){
currentActive=i+1;
headings[i].classList.remove('active');
headings[i+1].classList.add('active');
}
}
}
} else if (st < lastScrollTop) {
if (stickyDiv.top===0) {
for(let i=currentActive;i>0;i--)
{
const headingRect = headings[i].getBoundingClientRect();
if(headingRect.top<=0){
currentActive=i-1;
headings[i].classList.remove('active');
headings[i-1].classList.add('active');
}
}
} }
if(stickyDiv.top>0){
headings[currentActive].classList.remove('active');
currentActive=0;
headings[0].classList.add('active');
}
lastScrollTop = st <= 0 ? 0 : st; 
});

The full code snippet is as follows:-

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

let headings = Array.from(document.querySelectorAll('.animated-text'));
const sticky = document.querySelector('.sticky');
let lastScrollTop = 0;
let currentActive=0;
window.addEventListener('scroll', () => {
const stickyDiv=sticky.getBoundingClientRect(); 
let st = window.pageYOffset || document.documentElement.scrollTop; 
if (st > lastScrollTop) {
if (stickyDiv.top===0) {
for(let i=currentActive;i<headings.length-1;i++)
{
const headingRect = headings[i].getBoundingClientRect();
if(headingRect.top<=0){
currentActive=i+1;
headings[i].classList.remove('active');
headings[i+1].classList.add('active');
}
}
}
} else if (st < lastScrollTop) {
if (stickyDiv.top===0) {
for(let i=currentActive;i>0;i--)
{
const headingRect = headings[i].getBoundingClientRect();
if(headingRect.top<=0){
currentActive=i-1;
headings[i].classList.remove('active');
headings[i-1].classList.add('active');
}
}
} }
if(stickyDiv.top>0){
headings[currentActive].classList.remove('active');
currentActive=0;
headings[0].classList.add('active');
}
lastScrollTop = st <= 0 ? 0 : st; 

});

<!-- language: lang-css -->

body {
margin: 0
}
section {
position: relative;
}
.sticky {
padding-bottom: 150px;
background: #2d232c;
position: sticky;
top: 0;
overflow: hidden;
height: auto;
color: white;
}
.animated-text {
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 1s ease, height 1s ease, transform 1s ease;
transform: translateY(0);
}
.animated-text.active {
position:absolute;
top:0;
height: auto;
opacity: 1;
transform: translateY(-20px);
}
.hero, .end {
height: 100px;
background: white;
}

<!-- language: lang-html -->

<section class='hero'>
  <p>Start</p>
</section>

<section class='sticky'>
  <div class='text-animations'>
    <h1 class='animated-text active'>Intro</h1>
    <h2 class='animated-text'>First</h2>
    <h2 class='animated-text'>Second</h2>
    <h2 class='animated-text'>Third</h2>
  </div>
  <p class='intro_content'>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </p>  
</section>

<section class='end'>
  <p>End<p>
</section>

<!-- end snippet -->

Please feel free to ask if any part of the logic is unclear or require clarification.

I am ended up using the translateY on scroll method better

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const items = $('.animated-text')
const carousel = $('.sticky')
const windowHeight = $(window).height()
// Set the original data-offset value for each carousel item.
items.each(function (i) {
$(this).attr('data-offset', windowHeight * i)
})
$(window).scroll(function () {
const scrollTop = $(window).scrollTop()
const carouselTop = carousel.offset().top
const carouselBottom = carouselTop + carousel.height()
items.each(function () {
const itemIndex = $(this).index()
const itemOffset = parseInt($(this).attr('data-offset'), 10)
const nextItemOffset = items.eq(itemIndex + 1).attr('data-offset')
const offsetRatio = (scrollTop - itemOffset) / windowHeight
// Calculate opacity and transform values based on the scroll position.
let opacity = 1 - Math.abs(offsetRatio * 2)
const translateY = -offsetRatio * 100
// Only apply styles when the carousel is visible.
if (scrollTop >= carouselTop && scrollTop < carouselBottom) {
$(this).css({
opacity: opacity,
transform: `translateY(${translateY}%)`
})
// Check if the next item is visible, if so, hide the current item.
if (nextItemOffset && scrollTop >= nextItemOffset) {
$(this).css({ opacity: 0 })
}
} else if (scrollTop < carouselTop) {
// When scrolling is above the carousel, reset the transformation for all items
// But keep only the first item visible
if ($(this).index() === 0) {
$(this).css({
opacity: 1,
transform: 'translateY(0%)'
})
} else {
$(this).css({
opacity: 0,
transform: 'translateY(0%)'
})
}
}
})
})

<!-- language: lang-css -->

body {
margin: 0
}
section {
position: relative;
}
.sticky {
height: 400vh;
}
.sticky__inner {
background: #2d232c;
overflow: hidden;
align-items: center;
color:#fff;
display:flex;
height: 100vh;
justify-content:center;
perspective:70rem;
position:sticky;
top: 0;
}
.text-animations {
height: 60vh;
position: relative;
transform-origin: 50% 50%;
transform-style: preserve-3d;
width: 100vw;
margin-top: -200px;
left: 70px;
}
.animated-text {
margin-top: 10vh; /* adjust this value as needed */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
transform-origin: 50% 50%;
transition: all 0.5s ease-in-out; /* Add this line */
opacity: 0;
}
.animated-text :first-of-type {
opacity: 1;
}
.hero, .end {
height: 100px;
background: white;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<section class='hero'>
<p>Start</p>
</section>
<section class='sticky'>
<div class='sticky__inner'>
<div class='text-animations'>
<h1 class='animated-text active'>Intro</h1>
<h2 class='animated-text'>First</h2>
<h2 class='animated-text'>Second</h2>
<h2 class='animated-text'>Third</h2>
</div>
<p class='intro_content'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>  
</div>
</section>
<section class='end'>
<p>End<p>
</section>

<!-- end snippet -->