james182 Posted December 17, 2019 Share Posted December 17, 2019 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 }); Link to comment Share on other sites More sharing options...
mikel Posted December 17, 2019 Share Posted December 17, 2019 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 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now