David Spector

30fps on both FF and Chrome. It is a beautiful, smooth demo.

Jack/GreenSock, thanks for responding in person! I have read all your comments. No, I don't have Velocity installed, but I could if you want me to. Actually, I see what looks like a bit of motion blur (frame persistence) in Firefox. But no, at the start of the original test I'm seeing each frame appear, instead of seeing a smooth motion. That's all I mean and at this point I suspect I will see it no matter what library I use. I really don't believe that, first because the hardware display program reports 60Hz and second because I'm sensitive to lights (like fluorescent) that blink on and off. In the past I have adjusted my monitor's display rate and I am used to seeing it flash at 60Hz (I can move my fingers while watching the screen and see the interference pattern (strobe effect). So I truly believe my rate is 60Hz. On the other hand, I remember in Windows 3 changing my monitor to standard VGA mode (640x480) and seeing it flicker much more than it does today. Was it flickering at 30fps? I don't know, but I do know that my screen's flickering has been constant over several computers and even operating systems. As you probably know, most TVs display at 30Hz (or at 60Hz but displaying two interlaced frames for each vertical scan). So regular TVs actually flicker twice as often as most computer monitors.

I just ran the wonderful Velocity demo (https://codepen.io/rachsmith/details/Fxuia) on Chrome and it shows 30fps. So my conclusion is that the problem I'm seeing (a succession of frames instead of smooth motion) is not specifically due to my low frame rate, but to the fact that the problematic animation (I can't put the URL here because it self-embeds) is a straight-line translation. This is called a Private Window on FF, and it's Ctrl+Shift+P. And it makes no difference. So, the summary so far is that straight-line translations using my own manual JavaScript animation (using requestAnimationFrame) and using GSAP look like a "buzzsaw": you can see each frame; there is no interpolation between frames. There is a second problem, that my computer apparently is limited to 30fps instead of 60.

I also visited the wonderful WebGL animation http://madebyevan.com/webgl-water/ on Chrome and see the same 30fps rate. The processing bursts are happening every 30 msec or so, according to the performance tools (a frame rate of 33fps, not sure why that is slightly different). I'm not getting 60fps, apparently.

Sorry. That codepen was posted without a name showing. I visited it on the codepen website and tried it in Chrome. It runs at a fairly steady 30fps rate. What does that tell us, if anything?

State its URL and I'll try it too, assuming it is a simple linear translation.

Thank you! Strange that mine is less.

Yes! But of course, this is circular transition, not a linear one, so it is more likely to fool the eye. Don't know what this is. Computer reports the rate is 60Hz. All good suggestions. I'm only running Firefox, Chrome, a text editor, my email client, and my usual background stuff. I have plenty of memory. And I haven't restricted my browsers from using acceleration. But don't apply since I can view wonderful 60fps animations made by other tools (Velocity, Mo.js, three.js, Pixi.js, WebGL (http://madebyevan.com/webgl-water/), p5.js .

I never do any work with my browser during an update. All the observations I reported to you on Firefox and Chrome are valid. Here are all the possibilities I can imagine: 1. The pixels on my screen (resolution 1920x1080) are so far apart that I can see the jumps from one frame to the next. 2. There is an additional pause between displaying each frame, but none are dropped. 3. Every nth calculated frame is being displayed. The result is an even, regular display of frames, but without much illusion of movement due to seeing each displayed frame. I should have given my use case, instead of asking for shapes. My use case is an animated logo, where I want to start with a font, convert it to vectors, then use these vectors in an GSAP animation. I don't want just to do an animation on the letters, but on their component parts. I think what I'm seeing is 30fps instead of your 60fps. Could be you have a professional-level computer and mine is only home quality, yes?

Running your pen on Chrome with performance recording enabled reveals a frame rate of 27 to 31 fps. Good enough for some animations, but not the 60fps achieved by Velocity and other animation tools. Could someone please speak to this?

Sorry, I'm not following you. I have never heard of a problem with browsers running JS. What do you mean by "auto-updating in the background"? And what is a restart? Reloading the page? Rerunning codepen? Something else? Then I need a different word! I definitely do not mean lost frames. That kind of error is obvious. I'm talking about something subtler, perhaps something that only happens on my computer (hp-produced desktop) or in my visual processing (God-produced 72 year old). I mean the kind of jerkiness that is where you see each frame, as if you took a "buttery" WebGL animation at 60fps and slowed it down to movie-theater 24fps. Animating a rectangle across the screen at 24fps will show you each frame. You will see the rectangle "jerk" between one frame and the next. What is the correct word for this? And can I get answers for my other questions, such as SVG and GIF output, or should I post those questions separately so other readers can see them again?

I just ran Chrome again to find its version and it auto-updated. Now your pen shows with no dropped frames, but still jagged (I'm guessing with a low frame rate). (Chrome v. 72.0) Even if I change the overall time to 16 seconds, I can see each separate frame. It is clearly not using anti-aliasing or other subpixel techniques.

This is strange: I see more jank in Chrome/Windows 10 than on Firefox! There is an additional slight pause (for garbage collection?) during the animation, and the animation shows jerkiness. I'm not sure I agree that it's lost frames. I don't see any lost frames. I see separate image displays instead of (or in addition to) the illusion of motion. When WebGL animations use <frame>, I don't see this. But in tweens from GSAP, I do. I still see separate image displays in your version of my codepen! Exactly the same. On Chrome there is the same jaggedness, and even a skipped frame. (Firefox 65.0 64bit)

1. Any animation. Do you really need a codepen showing a simple tween? I've seen examples of GIF and SVG animation, and I'd like to generate them using GSAP. Or is that inappropriate? 2. I've changed "left" to "x" and get the same jagged, not smooth, animation. Example: I'd like to see "buttery-smooth" animations (WebGL tools are so fast they can generate water splashes!) An example of a smooth animation done in Velocity.js (which is no longer maintained): https://codepen.io/rachsmith/details/Fxuia (click this link to run it) 3. Please confirm! There is no GSAP plugin to generate geometric figures, vector outline font characters, etc.? None at all? 4. I should have said "free tools", not just "tools". I can't afford Adobe's high prices. Can Inkscape generate GSAP programs? Sorry for the delay in replying. I've been learning GSAP, mostly. David

Thank you. With your help I got it working:

Some easy beginner questions: 1. How can I convert the resulting animation to an SVG file (or SVG element)? 2. In the tutorial examples, I can see each frame as the object moves from left to right (translation is rough). But GSAP can also make "buttery-smooth" animations at 60fps. How do change a Tween to use antialiasing, blurring, or whatever other optimization makes for 60fps animation? Or do I need a <canvas> for smooth translations, and if so, how do I program this? 3. How can I create objects (line, rect, circle) dynamically? Or can I only animate DOM elements that my HTML has created? Again, can I use a <canvas>, since you handle HTML5? 4. Is there a drawing tool that lets me visually construct an animation, then output it in GSAP JavaScript? I'm thinking, select the element, then select the operation from a toolbox, then enter the tween duration, etc...

I tried detecting completion without TimelineMax by putting the onComplete property into the first animation, but it doesn't work for me: window.onload = function(){ var logo = document.getElementById("logo"); TweenLite.to(logo,1, {left:"440px", ease:Power1.easeOut, onCompleteParams:a1}); } function a1(){ TweenLite.to(logo, 1, {left:"0px"}); } // a1