play sound on scroll of every message appearance

[Shaan Alam]

 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>

[mvaneijgen]

Hi @Shaan Alam welcome to the forum!

 

Check out the post from @Rodrigo 10 years ago! (and still going strong 💪) 

 

 

You can do a .call() that calls a function in which you play a sound. (you have to load the sound file (in what ever suites your project), but if you had a sound file this is how it would work! 

timeline.call(playSound)
timeline.to("#elm", {delay:1});

function playSound() {
  mySoundFile.play();
}

Hope this helps! If you still need help please post a minimal demo, so that we can take a look at your whole setup and help you further. Happy tweening! 

[Shaan Alam]

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. 

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi,

 

Maybe the best approach could be to use ScrollTrigger's Batch method for this:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

With that you'll have better control over the scroll animations and you can use the onEnter/Back onLeave/Back methods in order to create your opacity animations and play the sound you want.

 

Hopefully this helps.

Happy Tweening!

[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,

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

[mvaneijgen]

I'm really curious what you've tried and what is not working. Right now you don't have any code that has anything to do with audio, so of course it is not doing anything. This forum is not indented for you to post your question and have others fix it for you, we're here to help you debug and understand the tools better. GSAP has nothing to do with audio, so it isn't really a GSAP question, but seen that you're new here I've set something up for you.

 

Here the solution from my original reply working perfectly. Just .call() a function where you play a piece of audio.

 

Make sure that the visitor has interacted with the page before playing audio otherwise browsers block everything. This because browsers don't like you to spam vistors with audio if they don't explicitly tell you to do that, for that matter users don't like it either, so with great power comes great responsibility! 

 

Hope it helps and happy tweening! 

 

See the Pen rNRNwPV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen