Timeline play doesn't work

[NewbieScroll]

let btn = document.getElementsByClassName(".btn")[0];

let tl = gsap.timeline({ defaults: { duration: 0.6 } });
tl.fromTo(".someClass", { x: 0 }, { x: 300, paused: true });

// but the timeline doesn't play 
btn.addEventListener("click", (e) => {
  tl.play()
});

 

 

I want the element to move when I click the button. 

 

Is my code wrong? I couldn't play the timeline when I clicked the button and I'm not seeing any errors in the console.

 

 

I appreciate your help! 

 

[mvaneijgen]

When working with timelines, all the control is given to the timeline, but you've set the tween to paused and thus it will do nothing. If you move the paused: true to the timeline object, you'll see it will work as expected. If you need further help please include a minimal demo, so that we can dive directly into the code. Hope it helps and happy tweening! 

 

let tl = gsap.timeline({ 
  paused: true,
  defaults: { 
    duration: 0.6 
  } 
});

 

[Rodrigo]

Hi,

 

Yep @mvaneijgen is right. Timelines are just containers for GSAP Tweens and other things (callbacks, labels, etc), so what they do is to update the playhead of a child tween nothing more. If a child tween is paused the timeline instance has no effect over the paused state of the child instance. If you want to handle pause/play events is better to follow Mitchel's advice.

 

Happy Tweening!

[NewbieScroll]

Ahh thank you I did try to place `paused:true`  inside the timeline but I placed it  in defaults 😅

 

// this works
let tl = gsap.timeline({ 
  paused: true,
  defaults: { 
    duration: 0.6 
  } 
});

// I was doing this - I put the paused in defaults ...
let tl = gsap.timeline({
  defaults: { ease: "back.inOut(0.9)", duration: 0.6, paused: true }
});

 

[mvaneijgen]

Yep, working within objects can be hard to manage if you're not used to it! Glad you've solved your issue! Happy tweening!