riTemUp
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by riTemUp
-
-
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...
See the Pen GQwYyx by rimeiQuer (@rimeiQuer) on CodePen
-
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.
See the Pen baomGg by rimeiQuer (@rimeiQuer) on CodePen
SVG Text jitter animation
in GSAP
Posted
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