i am using GSAP scroll trigger for animating my message containers like a chatbox i want to play sound with every message appear with that also how i can do that ?
below is the code where i want to implement audio
<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>
// Ensure GSAP and ScrollTrigger are loaded
gsap.registerPlugin(ScrollTrigger);
// Your GSAP animation
gsap.from(".imageTransition", {
y: "100%",
ease: "easeInOut",
duration: 2,
scrollTrigger: {
trigger: ".triggerPoint",
scroller: "body",
start: "top top",
end: "bottom top",
pin :true,
}
});
// Create a GSAP timeline
var timeline = gsap.timeline();
// Animation 1
timeline.from(".message1", {
x: "200px",
opacity: 0,
ease: "easeOut",
});
// Animation 2 with a stagger of 2s
timeline.from(".message2", {
x: "-200px",
opacity: 0,
ease: "easeInOut",
}, "+=3");
// Animation 3 with a stagger of 2s
timeline.from(".message3", {
x: "200px",
opacity: 0,
ease: "easeInOut",
}, "+=3");
// Animation 4 with a stagger of 2s
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");
// Use the timeline in the ScrollTrigger
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>
i have tried using audio sound and also web api of sound on complete of every animation but it didn’t work. i want to play sound everytime the message appear on scrol