Button not active at beginning of Timeline

[payne199]

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')

[Shaun Gorneau]

Hi @payne199,

 

It's hard to see what could be going wrong without seeing the issue isolated in a Codepen .. but here is one I whipped together that may help you.

 

See the Pen exeWRW by sgorneau (@sgorneau) on CodePen

 

 

Hope it helps!

 

[payne199]

Wow! I got so much out of that. Thank you so much. (Great pen, too. I had to watch and listen to the end:)