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
