Shaan Alam

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, https://codepen.io/shaanalam27/pen/eYXOoyW

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.

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>