Holding on frame for X sec

[james182]

Hi 

I am creating a digital display and am having issues understanding how to have the text pause for 2-3 sec then move on.

As this is a Google Web Designer project I have pasted my code:

 

var pf_logo = document.getElementById('pf_logo'),
      txt_1 = document.getElementById('txt_1'),
      txt_2 = document.getElementById('txt_2'),
      txt_3 = document.getElementById('txt_3'),
      bg_solid = document.getElementById('bg_solid'),
      tl = gsap.timeline({
        paused: true,
        repeat: 2,
        repeatDelay: 5
      });

    tl.set(pf_logo, { y: 67, opacity: 0 })
      .set(bg_solid, { y: -180, opacity: 0 })
      .set(txt_1, { x: -250, opacity: 0 })
      .set(txt_2, { x: -250, opacity: 0 })
      .set(txt_3, { x: -250, opacity: 0 })
      // Animate items
      .to(pf_logo, { duration: 0.7, opacity: 1, y: 0 })
      .to(bg_solid, { duration: 0.7, opacity: 1, y: 0 })

      .to(txt_1, { duration: 1, x: 25, opacity: 1, ease: Power1.easeOut, delay: 3 })
      .to(txt_1, { duration: 0.5, opacity: 0 })
      
      .to(txt_2, { duration: 1, x: 25, opacity: 1, ease: Power1.easeOut })
      .to(txt_2, { duration: 0.5, opacity: 0 })
    
      .to(txt_3, { duration: 1, x: 25, opacity: 1, ease: Power1.easeOut })
      .to(txt_3, { duration: 0.5, opacity: 0 });

 

[mikel]

Hey @james182

 

The secret to building gorgeous animations with intricate timing is understanding the position parameter which is used in many various Timeline methods.

//insert exactly 3 seconds from the start of the timeline
tl.to(".class", {x: 100}, 3);

//create a gap (insert 1 second after end of timeline)
tl.to(".class", {x: 100}, "+=1");

//overlap end by 1 second
tl.to(".class", {y: 100}, "-=1");

 

Happy tweening ...

Mikel