Share Posted September 22, 2016 Hi there, I like to animate 3 things step by step: 1. an div animation 2. One Second later: H1 Splittext Animation 3. Two Seconds later: H2 Splittext Animation I dont know how to put a pause before the splittext animation. I have tried it with an marker before the splittext loop, but that does not work. I would be pleased for any help Here is my modified codepen: See the Pen VKPPmB by opendoors (@opendoors) on CodePen See the Pen VKPmbb by opendoors (@opendoors) on CodePen Link to post Share on other sites
Share Posted September 22, 2016 Hello and Welcome to GSAP Forum! I am here and I saw your code! I am looking for solution on this please stand by! GreenSock TeamWaren Link to post Share on other sites
Solution Share Posted September 22, 2016 Hey buddy try this! JavaScript: $(bioSplitTextH2.words).each(function(index,el){ bioTL.from($(el), 0.6, {opacity:0 /*from 0.5 make it 0*/, force3D:true, delay: 2 /* add delay */ }, index * 0.01); bioTL.from($(el), 1.6, {scale:index % 10 == 0 ? 0 : 5, ease:Back.easeOut, delay: 2 /* add delay */ }, index * 0.01); }); Here's the codepen! See the Pen PGWbyd by Waren_Gonzaga (@Waren_Gonzaga) on CodePen Reference: http://greensock.com/forums/topic/9856-inserting-a-pausedelaywait-into-timeline/Solution use the Delay variable of GSAP! thanks! Click the like button if you find this helpful! Happy Tweening GreenSock Team 1 Link to post Share on other sites
Share Posted September 22, 2016 Hi Sandschieber, Thanks for the CodePen, it's very helpful to have it. The main reason the pause is not working is because you are setting an absolute time when looping through the elements in the below: $(bioSplitTextH2.words).each(function(index,el){ bioTL.from($(el), 0.6, {opacity:0.5, force3D:true}, index * 0.01); bioTL.from($(el), 1.6, {scale:index % 10 == 0 ? 0 : 5, ease:Back.easeOut}, index * 0.01); }); If you change the index * 0.01 to the label you have created, the animation behaves as expected. $(bioSplitTextH2.words).each(function(index,el){ bioTL.from($(el), 0.6, {opacity:0.5, force3D:true}, "wait2seconds"); bioTL.from($(el), 1.6, {scale:index % 10 == 0 ? 0 : 5, ease:Back.easeOut}, "wait2seconds"); }); Here's a fork of your Pen: See the Pen WGRjWB?editors=0010 by dipscom (@dipscom) on CodePen And have a look here: http://greensock.com/position-parameter, it explains the position parameter in more detail. 3 Link to post Share on other sites
Author Share Posted September 22, 2016 Thank you guys for helping me. Both Posts are helpfull! Link to post Share on other sites