
kubino
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by 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 thisvar 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 selectedanim.play(0) // or 1/2/3setTimeout(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 preciseI'll bet there must be some more convenient way how to achieve something similarThx a lot for help
How to control tween of text effectively
in GSAP
Posted
Hi , thank you for your help.
addPause() did the trick for me.