pausing before split text

[Sandschieber 1 Likes (Newbie)]

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

[WarenGonzaga 65 Likes (Contributor)]

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 Team
Waren

[WarenGonzaga 65 Likes (Contributor)]

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

[Dipscom 3,109 Likes (Superhero)]

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.

[Sandschieber 1 Likes (Newbie)]

Thank you guys for helping me.

Both Posts are helpfull!