Jump to content

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


  • Posts

  • Joined

  • Last visited

About Shakespeare

Shakespeare's Achievements


Newbie (1/14)



  1. Hi @mikel and @PointC, I appologize for the confussion and believe will have to do a better job explaining myself on the future queries ! The problem I was having related to restarting the animation after the SplitText had run once and not with playing the animation from a specific point forward. Thanksfully, I found a solution which was not as difficult as I once thought. Below is the rational for my solution. 1.- Whenever SplitText is applied, the text provided is converted into lines, words, and/or chars. 2.- The resulting elements are then animated according to the values provided by the tween. 3.- As a result, the position of each element (i.e. matrix3d) is altered and any subsequent animation (or restart) on the same elements will be offsetted. 4.- To remedy this, I initialized the position of each element by adding, within my Initialize() function, the following line, which ensures the lines, words, or chars will alway be animated from the same position (text2__hidden is the class given to each chars after SplitText). tl.set('.text2__hidden', { transform:"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}); 5.- To clean-up after myself, I added an onComplete function to revert the text back to its original state and tweened its autoAlpha property to 0 (concurrent to the SplitText animation) to keep it hidden. .to('.animation__text2', 2, { autoAlpha:0, }, "erase+=1.5") I am uncertain as of to how "clean" the solution is but the animation now works like a charm. Thank you guys for all your input; it really made me think holistically about the problem and guided me to the answer.
  2. Hi @PointC, thank you for your prompt feedback. What I provided is only a small portion of a much larger animation. Basically, I am trying to develop an animation that spreads across multiple webpages. So that, the animation on one page is only a "snapshot" of the entire animation. The restart() portion is supposed to restart the animation (time 0, which is much further back than what you see on this few lines of code I provided) whilst the play() portion is supposed to play the animation from a given point in time onwards (the starting position, or page, is passed as an argument). The conditional clause at the end of the code controls such behavior (or at least that is whay I am intending to do !). The problem is that I am not finding a way to reset the animation (on the SplitText tween) to the initial state so that the behavior at the restart is the same than the one at a "normal" start. Please let me know if this provides sufficient clarity on what I am trying to achieve. Thanks again,
  3. Hi. I am new to GSAP and before getting into my query let me first congratulate you guys for such an amazing library and well written documentation! Despite this, I am having some difficulties whenever I try to restart a timeline containing a Splittext tween as seeing in the codepen url. On the first pass (play button), Splittext splits the text as expected and proceeds with he rest of the animation without a problem. During the replay, the text is already under the format required (i.e. chars, words, or lines) but is not being displayed, which I believe relates to the setting of the properties of "text2__hidden" class, and animated. I have tried multiple iterations of the code to no avail. I even attempted resetting the position of the elements manually (as I successfully achieved with a svgMorph tween within the same timeline -not shown on the codependency extract) and quickly discovered how complex this would be given the characteristics of that particular tween (several parameters being animated and some of these include cycles). What am I missing? Thanks,