[play sound on scroll of every message appearance]

hey i have attached the codepen link where on every message when it reaches the opacity 1 or when it completes the animation there should be a sound played just like receiving a message,

See the Pen eYXOoyW by shaanalam27 (@shaanalam27) on CodePen

[play sound on scroll of every message appearance]

i have already used the method you provided and it only played sound once when the scroll starts , i want sound every time the opacity of all 6 of  my messages reaches 1 from 0 one after one , which changes on scroll trigger. 

 

[play sound on scroll of every message appearance]

 i have made animation like a chatbox the messages appear one after another on scroll i want to add a sound on that 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script>
<script>

  gsap.registerPlugin(ScrollTrigger);

  gsap.from(".imageTransition", {
    y: "100%", 
    ease: "easeInOut",
    duration: 2,
    scrollTrigger: {
      trigger: ".triggerPoint",
      scroller: "body",
      start: "top top",
      end: "bottom top",
      pin :true,
    }
  });

  var timeline = gsap.timeline();

  timeline.from(".message1", {
    x: "200px",
    opacity: 0,
    ease: "easeOut",
  });

  timeline.from(".message2", {
    x: "-200px",
    opacity: 0,
    ease: "easeInOut",
  }, "+=3");

  timeline.from(".message3", {
    x: "200px",
    opacity: 0,
    ease: "easeInOut",
  }, "+=3");

  timeline.from(".message4", {
    x: "-200px",
    opacity: 0,
    ease: "easeInOut",
  }, "+=3");
  
   timeline.from(".message5", {
    x: "200px",
    opacity: 0,
    ease: "easeInOut",
  }, "+=3");
  
   timeline.from(".message6", {
    x: "200px",
    opacity: 0,
    ease: "easeInOut",
  }, "+=3");

  ScrollTrigger.create({
    trigger: ".triggerPoint2",
    start: "200px top",
    end: "bottom top",
    animation: timeline,
    scrub: true,
    pin: true,
    markers : true,
    onComplete: function () {
      gsap.set(".triggerPoint2", { pin: true });
    },
  });
</script>