Jump to content


pausing before split text

Go to solution Solved by WarenGonzaga,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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

Link to comment
Share on other sites

  • Solution

Hey buddy try this!



 bioTL.from($(el), 0.6, {opacity:0 /*from 0.5 make it 0*/, 
                         delay: 2 /* add delay */
                         index * 0.01);

 bioTL.from($(el), 1.6, {scale:index % 10 == 0  ? 0 : 5, 
                         delay: 2 /* add delay */
                         index * 0.01); 

Here's the codepen!

See the Pen PGWbyd by Waren_Gonzaga (@Waren_Gonzaga) on CodePen




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 comment
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:

 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. 
 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 comment
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.