Shakespeare

Hello ZachSaucier, Thanks for your prompt reply. I tested your work around on the codepen I provided and it worked. Now time to test on the real scenario ? !!! I will let you know how it went. Thanks again,

Good morning my GSAP friends, I am having difficulties understanding 3D Transforms and hope you can help me. The page I am looking to animate comprises an svg element and several buttons, which trigger different sets of animations, one of which rotates an element of the svg along the x-axis (the attached codepen is an oversimplification of my page but replicates the behavior I am experiencing). It seems to me like the "transformPerspective" and "rotationX" are being ignored. Evidently, I am missing something out but cannot figure out what it is. I very much appreciate your guidance! Thanks,

Thanks ZackSaucier and Mikel, I very much appreciate your help. ZackSaucier's second solution works like a charm!

Thanks! After viewing all the examples, I can definitely see how this might work by incrementing the angle of the masked object (in this case an ellipse). The problem is that I don't know how to accomplish this. The drawSVG does this at the path level not at the fill level; which means I would need to generate a new path for each iterration to achieve the desire effect. Sounds, and most certainly is, crazy. Any thoughts on how I can accomplish this? Am I on the right track?

Hello, I am trying to generate the following tween with the drawSVG plugin, whereby the image is progressively revealed with an anticlockwise motion. Any idea on how I can achieve this? Thanks,

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.

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,

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,