Jump to content
Search Community

ScrollTrigger - play audio when scroll to certain point on the page

LSchneiderman test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

I posted the wrong demo above.

 

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

 

3 hours ago, LSchneiderman said:

Do I need them to click again to play a second audio file?

 

No. The the click is just a one time thing. The user has to interact with the page somehow. @mikel showed that it can work with mouse events, so maybe you could do something like wait for a mouse or scroll event, and play the audio with the volume at 0, and then remove those events. Then when you need to actually play the audio, restart the audio with the volume at normal.

 

Your best bet is to search around for solutions to this problem. This might be a good start.

https://stackoverflow.com/questions/12206631/html5-audio-cant-play-through-javascript-unless-triggered-manually-once

 

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

QUESTION: Forgive me if I missed it, but I think the question was "how do you 'trigger' audio with scroll trigger at a certain point?" This is what I would like to know. I don't want to start a new question so I am hoping this gets some attention still. Thank you. I love GSAP. 

Link to comment
Share on other sites

 

Hello there.

As the user mentioned, the onEnter callback of ScrollTrigger was what she needed to make it be triggered on scroll.

Here is a codepen demo listing all of ScrollTrigger's available callbacks. What you call within them is up to you; you can e.g. play or pause some audio within these callbacks...

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


 

 

 

...like so, e.g..

See the Pen qBLaoQQ by akapowl (@akapowl) on CodePen




You'll find information you need going forward in the ScrollTrigger docs.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

And you'll find a whole lot of information for how to use audio in your code on the MDN Web docs.

https://developer.mozilla.org/en-US/search?q=audio

 

I hope this will help.

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...