Jump to content
GreenSock

kubino

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by kubino

    How to control tween of text effectively

    in GSAP

    Posted

    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
     
     
     
     
     
     
×
Login Create Account