Hello. Newbie here.
I am recreating the Star Wars opening crawl and was having great difficulty adding the opening theme within the timeline. I was getting 'in Promise' errors that I could not get around. I then decided to simply start the program with a button click and delay the timing of the audio to come in at the right time. The problem I am having is getting both the js audio function and GSAP timeline started at the same time. I tried onclick with the html button to call my audio function and used
playBtn.onclick=function(){} to call my timeline on click of the same button, but I get nothing. No action. No errors. Could someone direct me as to how I should approach this?
function myFunction(){
document.querySelector('#play').play();
}
let tl = new TimelineLite();
tl
.to(document.querySelector('#openingText'), 1,{opacity: 1, delay: 2})
.to(document.querySelector('#openingText'), 2,{opacity: 0, delay: 4})
.to(document.querySelector('.starryBackground'), 0,{opacity: 1})
.to(document.querySelector('#date'), 0,{opacity: 1, scale: 0.9, delay:0.5},'-=0.5')
.to(document.querySelector('#date'), 13,{scale: 0, ease:Power3.easeOut})
.to(document.querySelector('.crawl'), 140, {css:{top:-2600}, ease:Linear.easeNone },'-=5')