Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sandschieber

pausing before split text

Recommended Posts

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

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

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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.
  • Like 3
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×