Jump to content
GreenSock

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

How to control tween of text effectively

Recommended Posts

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
 
 
 
 
 
 
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Hi , thank you for your help.

 

addPause() did the trick for me.  

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