riTemUp

I was playing with the rotation solution as well. It seems that using a slight rotation helps in desktop Chrome and Firefox, but in Safari and mobile browsers still looks terrible. I found that text-rendering solves the problem!! If I use text-rendering: geometricPrecision, the animation runs smoothly in desktop Safari and mobile browsers (at least on iPhone). On mobile the text strokes seem a little more thicker, but the movement is fluid. I modified the codepen with the results that work in my tests. Thank you @GreenSock and @Jonathan !! You saved my day

Hi guys, I'm developing a "whiteboard animation" style presentation using GSAP. I simulate the camera movement transforming a group that contains all svg content. Everything animates smoothly except the text nodes, that jump a lot, specially in iOS Safari. I tried to isolate the problem in the attached codepen. Is there a way to avoid this behavior?, I tried changing "will-change" attribute without success...

Thanks again Carl, That was the problem I was having. I thought that using timeline.clear() I would reset everything, but the animated values were still there.

Hello Carl, Thank you very much for your fast and complete response . I realized that my codepen demo wasn't very clear so I modified it in order to better explain what I'm trying to do: The idea is to have an array of objects defining the animation (like a movie script) and each time I modify the animation array the timeline gets overwritten. I've added a tl_master.clear() command with the purpose of resetting the timeline before reloading the animation but maybe I'm not understanding right how it works. In the updated codepen I try to recreate this steps: Load the animation data array Create the timeline Update the timeline using the animation data array Modify the animation array (commented out) Update the timeline with the new data (commented out) It seems that tl_master.clear() doesn't reset the timeline as I thought it would. If I use only "to" and "fromTo" tweens I can change parameters or add new tweens and the animation updates right. The moment that I add a "from" tween it doesn't work after updating the timeline. In my example, after step 5 the item1 animation should start at position 3, but it doesn't. I hope that my problem is clearer now. I'm sorry, but I'm not very fluent in english.

I am trying to develop an animation web app that uses Greensock under the hood. The idea is to have a user interface that stores all the information parameters in an array and then a function translates that into an animation. The loadAnimation() function fires everytime the array is modified so you can see the updated animation. Everything works fine if I use "to" tweens, but with the "from" tweens only works the first time loadAnimation() is executed. I tried to reproduce the problem with the attached codepen. If you have only "to" tweens and you execute twice the loadAnimation() the animation is right, but if there is a "from" tween it stops working.