Volt 22 Posted August 10, 2022 Share Posted August 10, 2022 Hello everyone, How can I achieve the effect on this webpage - https://www.beyond-beauty.co/story/the-revolution-of-desire? Where the sound syncs with the transcript, and the opacity of the words change as they are said. I know I'll need SplitText to highlight the words individually, but how can I sync the sound to the words that have been said? Thank you. Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 10, 2022 Share Posted August 10, 2022 I looked at it, but it didn't really seem to sync to the text fully. If I wanted to do this, I just would check how many words there are and check how long the audio file is. Then set the words showing up to audio in seconds / words = show word ever x amount e.g 60 seconds of audio / 20 words = show word every 3 seconds And there is probably a async function to check if the audio is loaded and playing, so you should probably connect them to each other to only animate GSAP if the audio is playing. 3 Link to comment Share on other sites More sharing options...
iDad5 Posted August 10, 2022 Share Posted August 10, 2022 If you want to sync it precisely to the words, you could work with TexTrackCues that you would have to measure out and right down upfront. if there audio is distinctly pronounced with clear pauses between the words you could even try to determine them by parsing the actual ByteArray of the sound, but that’s likely overkill. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted August 10, 2022 Share Posted August 10, 2022 Yep, or just literally build an Array of timestamps when each word should be highlighted/animated and plug that into the position parameter in a timeline that you build. That's likely the most bulletproof and accurate way, but involves prep time. 1 Link to comment Share on other sites More sharing options...
Volt 22 Posted August 11, 2022 Author Share Posted August 11, 2022 Thanks guys, I'll incorporate your suggestions and try to make a demo. I'll revert if I stumbled upon any issues. Thanks again. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now