Various questions not answered by the tutorials

[David Spector]

Jack/GreenSock, thanks for responding in person! I have read all your comments.

 

17 minutes ago, GreenSock said:

Can you send a head-to-head comparison? 

No, I don't have Velocity installed, but I could if you want me to.

20 minutes ago, GreenSock said:

It kinda sounds like you're looking for some kind of motion blur

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.

22 minutes ago, GreenSock said:

you keep seeing things at 30fps, it sure sounds like perhaps your monitor has that as a refresh rate

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.

31 minutes ago, GreenSock said:

The MacBook Pro's built-in display runs at 60hz, but the TV actually runs at 30hz

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.

[David Spector]

36 minutes ago, OSUblake said:

Curious. What's the FPS say at the top of this demo?

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

[GreenSock]

2 minutes ago, David Spector said:

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.

 

Yep, that's just the nature of computer animation, but you notice it mostly when you try to animate an element with hard edges across longer distances (especially with linear easing). In another post you said "there is no interpolation between frames" and I think I know what you meant but it's technically inaccurate. The whole job of GSAP is interpolation between two states, and it updates on every tick/refresh of the browser/screen. If you animate x from 0 to 1000 over the course of 1 second and your browser is refreshing 30 times per second, that means that x moves 33 pixels per update. Will your eye notice that, especially if the element has hard edges? Absolutely. It's the nature of the beast, unrelated to which animation library you use. From what I've seen, GSAP is the most performant one out there, but it can't suddenly make your browser update 120 times per second so that things don't jump 33 pixels in that example. See what I mean? 

 

9 minutes ago, David Spector said:

I really don't believe that, first because the hardware display program reports 60Hz

 

I know how you feel - I really though my TV was refreshing at that rate too but clearly the data you're giving us is indicating that it is NOT running at 60fps (or at least your browser isn't). 

 

10 minutes ago, David Spector said:

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.

 

Nah, interlacing was from old tube televisions. I'm quite familiar with it actually, as I worked in the video world for years. But modern TVs are progressive.

 

So if your goal is to move something across the screen and make it APPEAR more fluid, your best bet is to blur its edges during the movement or reduce the distance. It has nothing to do with the animation library you choose, though. 

 

Does that clear things up? 

[David Spector]

Thanks so much for your additional comments.

 

46 minutes ago, GreenSock said:

The whole job of GSAP is interpolation between two states...If you animate x from 0 to 1000 over the course of 1 second and your browser is refreshing 30 times per second, that means that x moves 33 pixels per update.

If I can make a suggestion for GSAP, why not display in those 33 pixels per update an average color of the moving image, exactly like anti-aliasing does for lines and characters? One would have to experiment, but this might be similar to a motion blur, but be easy to compute.

 

Or if a vertical line is being moved to the right, why not display two or three lines in one frame? They would be displayed at the same moment, but the eye might see them as part of the overall motion! I'm tempted to do this experiment, but I'm still learning the basics so it would be painful for me.

 

Another suggestion is for the browser people: why not implement a variable frame rate, such that the average rate is a constant? So, in a linear translate with ease out, the frame rate could indeed be, say, 70fps (which is perhaps achievable) for the first few frames, then drops down so that at the end of the tween it is 24fps (movie rate). Then the "flicker density" of the animation could be made the same throughout the entire translation (tween).

30 minutes ago, GreenSock said:

Nah, interlacing was from old tube televisions.

Thanks for the correction. HDTV is mostly beyond me. I like it, but the specifications are insanely complex. I'm amazed that the consumer price of a TV has come down to near where old standard color NTSC TVs were, given the incredible flexibility (mostly unused) behind the scenes.

30 minutes ago, GreenSock said:

So if your goal is to move something across the screen and make it APPEAR more fluid, your best bet is to blur its edges during the movement or reduce the distance. It has nothing to do with the animation library you choose, though. 

Excellent tips, thanks. In my logo animation (my actual goal here) I will keep such ideas in mind.

31 minutes ago, GreenSock said:

Does that clear things up? 

Yes, and I'm relieved that there is no problem with GSAP. The problem of fluid linear translation of sharp edges over long distances should and probably will be looked at and fixed by the appropriate researchers. I doubt that there is any mathematics that says that it can't be possible.
 

[GreenSock]

3 minutes ago, David Spector said:

why not display in those 33 pixels per update an average color of the moving image, exactly like anti-aliasing does for lines and characters?

 

GSAP just interpolates property values very quickly - are you suggesting that if, for example, the user tries animating the "x" value of a <div>, that we'd somehow sample the colors near the edges (might be background-color, might be a nested <img> or a gradient or whatever) and create another <div> on each side that's populated with semi-transparent versions of those? There are many, many problems/challenges with doing that both from a performance perspective as well as complexities that could cause a lot of problems for users. I really don't think this would be appropriate for GSAP to tackle, but I see why you'd suggest it. I sure wish it was simple to do something like that and make it look good consistently. 

 

7 minutes ago, David Spector said:

Or if a vertical line is being moved to the right, why not display two or three lines in one frame? They would be displayed at the same moment, but the eye might see them as part of the overall motion! I'm tempted to do this experiment, but I'm still learning the basics so it would be painful for me.

 

Yeah, I think that'd look really odd (not to mention the fact that you're introducing several new elements into the DOM which hurts performance and people would probably get super annoyed that GSAP does something like that, although of course we could make it an optional setting). It's just not feasible, sorry. You could definitely do things like that yourself if you think it looks good, though. I'm just saying it doesn't belong inside of an animation platform like GSAP. 

 

10 minutes ago, David Spector said:

Another suggestion is for the browser people: why not implement a variable frame rate, such that the average rate is a constant? So, in a linear translate with ease out, the frame rate could indeed be, say, 70fps (which is perhaps achievable) for the first few frames, then drops down so that at the end of the tween it is 24fps (movie rate). Then the "flicker density" of the animation could be made the same throughout the entire translation (tween).

 

That assumes that there's only one animation happening at a time. What if you've got lots of overlapping animations time-wise? And the screen must be repainted/composited on a regular, consistent basis in order to make animation feel smooth. Many, many studies have been done that show the human eye picks up on varying frame rates and prefers even a slower, more consistent one. In other words, a consistent 30fps looks "better" than something that's varies between 30fps and 60fps. Odd, I know. Again, this suggestion simply isn't feasible from what I understand but I guess you're welcome to reach out to the browser vendors with your suggestion(s). Couldn't hurt!

 

13 minutes ago, David Spector said:

Yes, and I'm relieved that there is no problem with GSAP.

 

Great! Glad to hear things are cleared up now. 

 

Enjoy working with GSAP and good luck with your project. 

[David Spector]

Thank you, Jack/GreenSock for your expert comments. So refreshing! 

[GreenSock]

7 minutes ago, David Spector said:

Thank you, Jack/GreenSock for your expert comments. So refreshing! 

 

Anytime! And for the record, @Shaun Gorneau, @Jonathan, and @OSUblake (who all chimed in here) are three of the top experts in this whole community. If you hang around her for long, no doubt you'll see that they offer a wealth of knowledge. I love that this thread got so much care and attention in such a short amount of time. As I'm sure you've seen, that's one of the things that really sets GSAP apart - its community and ongoing support. 

 

Anyway, I hope your project goes well. Take care!