How to control tween of text effectively

[kubino]

Hi I am trying to achieve a nice switching animation with hint for the user.

 

<div class="messageBox">

        <div class="start">

            Please start by entering name of your chosen product.

        </div>

        <div class="pickup">

            Perfect now pickup your item

        </div>

        <div class="selected">

            Selected

        </div>

        <div class="notFound">

            Nothing found, it's possible we are not having this for you yet

         </div>

    </div>

 

Javascript code like this

var transform = {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50",  ease:Back.easeOut};

 

var  anim = new TimelineMax()

     .set(".start", {visibility: 'visible'})

     .set(".pickup", {visibility: 'visible'})

     .set(".selected", {visibility: 'visible'})

     .set(".notFound", {visibility: 'visible'})

 

     .staggerTo(notFoundText.chars, 1,transform , 0.001, "s")

     .staggerTo(selectedText.chars, 1, transform, 0.001, "s")

     .staggerTo(pickupText.chars, 1, transform, 0.001, "s")

     .staggerFrom(startTypeText.chars, 1,transform , 0.001, "s")

 

     .staggerTo(notFoundText.chars, 1, transform, 0.001, "s2")

     .staggerTo(selectedText.chars, 1, transform, 0.001, "s2")

     .staggerTo(startTypeText.chars, 1, transform, 0.001, "s2")

     .staggerFrom(pickupText.chars, 1, transform, 0.001, "s2")

 

     .staggerTo(notFoundText.chars, 1, transform, 0.001, "s3")

     .staggerTo(pickupText.chars, 1, transform, 0.001, "s3")

     .staggerTo(startTypeText.chars, 1, transform, 0.001, "s3")

     .staggerFrom(selectedText.chars, 1, transform, 0.001, "s3")

 

     .staggerTo(selectedText.chars, 1, transform, 0.001, "s4")

     .staggerTo(pickupText.chars, 1, transform, 0.001, "s4")

     .staggerTo(startTypeText.chars, 1, transform, 0.001, "s4")

     .staggerFrom(notFoundText.chars, 1, transform, 0.001, "s4")

 

anim.pause()

 

And then when step is selected 

 

anim.play(0)   // or 1/2/3

setTimeout(function(){

      anim.pause()

},1000)

 

 

I' am doing probably some really wrong here.

 

I did set up each step to last one second, but with stagger it seems that it is more depend on sentence length... so sometimes it's less then a second, but usually more.

 

Another problem I have is with instructing  anim to play exactly one second. I could not find any api support for this, so that's why setTimeout - but this doesn't work properly of course - it's not precise

 

I'll bet there must be some more convenient way how to achieve something similar

 

Thx a lot for help

 

 

 

 

 

 

[Rodrigo]

Hi and welcome to  the Greensock forums.

 

Yep stagger instances will last longer than the animation duration because of the delay time indicated as the last stagger time. For example if you have ten elements and you want each element to animate for 1 second with a stagger of 0.1 second each, the first element's animation starts at 0 second, the second at 0.1 seconds, then 0.2,0.3 and so on. Finally the last element animation will start at 1 second, when the first element's animation is over, therefore the entire sequence will last 2 seconds.

 

In order to avoid calculating how long the sequence will last and set a manual setTimeout you can use the addPause() method after every part of your animation:

var  anim = new TimelineMax()
     .set(".start", {visibility: 'visible'})
     .set(".pickup", {visibility: 'visible'})
     .set(".selected", {visibility: 'visible'})
     .set(".notFound", {visibility: 'visible'})
 
     .staggerTo(notFoundText.chars, 1,transform , 0.001, "s")
     .staggerTo(selectedText.chars, 1, transform, 0.001, "s")
     .staggerTo(pickupText.chars, 1, transform, 0.001, "s")
     .staggerFrom(startTypeText.chars, 1,transform , 0.001, "s")
     .addPause()
 
     .staggerTo(notFoundText.chars, 1, transform, 0.001, "s2")
     .staggerTo(selectedText.chars, 1, transform, 0.001, "s2")
     .staggerTo(startTypeText.chars, 1, transform, 0.001, "s2")
     .staggerFrom(pickupText.chars, 1, transform, 0.001, "s2")
     .addPause()
 
     .staggerTo(notFoundText.chars, 1, transform, 0.001, "s3")
     .staggerTo(pickupText.chars, 1, transform, 0.001, "s3")
     .staggerTo(startTypeText.chars, 1, transform, 0.001, "s3")
     .staggerFrom(selectedText.chars, 1, transform, 0.001, "s3")
     .addPause()
 
     .staggerTo(selectedText.chars, 1, transform, 0.001, "s4")
     .staggerTo(pickupText.chars, 1, transform, 0.001, "s4")
     .staggerTo(startTypeText.chars, 1, transform, 0.001, "s4")
     .staggerFrom(notFoundText.chars, 1, transform, 0.001, "s4")
     .addPause()

Now in terms of making each part of the sequence last 1 second you can use the duration() method, which forces a specific duration of the timeline, like this:

var  anim = new TimelineMax()
//all your instances here

//since there are four elements to be animated
//and you want each animation to last 1 second
//set the duration to 4 seconds
anim.duration(4)

Like that your timeline will last 4 seconds no matter what.

 

Rodrigo.

[kubino]

Hi , thank you for your help.

 

addPause() did the trick for me.