Как изменить текст в элементе при прокрутке страницы

Question

Я хочу узнать, как сделать такой эффект https://www.apple.com/br/airpods-pro/.

Точнее: GIF показывает изменение текста, которое я хочу сделать - только изменение текста

Я уже делал что-то подобное, используя AOS animate на vue, но я понятия не имею, как сделать это ближе всего к этому эффекту на странице air-pods-pro https://imgur.com/a/d4ttb5V

Над кодом моего компонента vue:

<script>
import AOS from 'aos';
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';

Vue.use(AOS);

AOS.init();

export default {
  name: 'Home',
  options: {
    duration: 800,
    easing: [1, 0, 0, 1],
    loopBottom: true,
  },
  props: {
    messages: {
      type: Array,
      default: () => [],
    },
    primaryColor: {
      type: String,
      required: true,
      default: 'pink',
    },
    secondaryColor: {
      type: String,
      required: true,
      default: 'black',
    },
  },
  data: () => ({
    sections: [
      {
        id: 1,
        any_data: "I'm section 1",
        img_url: './images/whatever01.jpg',
      },
      {
        id: 2,
        any_data: "I'm section 2",
        img_url: './images/whatever02.jpg',
      },
      {
        id: 3,
        any_data: "I'm section 3",
        img_url: './images/whatever03.jpg',
      },
    ],
  }),
};
</script>
<style lang="stylus">

ol, li
  list-style: none;
  padding-left: 5px;

.home-phrases
  text-align: center;
  color: $white;

.sections-menu
  right: 1rem;
  top: 50%;

.fullpage
  height: 80vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

</style>
<template>
<section class="home-bg">
  <div class="container">
    <div class="row">
        <ol>
        <section v-bind:key="msg" v-for="msg in messages" class="fullpage">
          <li class="home-phrases">
            <h2
              data-aos="fade-up"
              data-aos-anchor-placement="bottom-bottom"
              data-aos-delay="20"
              data-aos-duration="1000">{{ msg }}</h2>
          </li>
        </section>
        </ol>
    </div>
  </div>
</section>
</template>