Jump to content


Button not active at beginning of Timeline

Recommended Posts

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(){
let tl = new TimelineLite();
    .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')

Link to comment
Share on other sites

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!


  • Like 2
Link to comment
Share on other sites

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

  • 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.