Jump to content
Search Community

Various questions not answered by the tutorials

David Spector test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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...

 

Link to comment
Share on other sites

Hi @David Spector,

 

28 minutes ago, David Spector said:

1. How can I convert the resulting animation to an SVG file (or SVG element)?

 

What animation are you referencing here?

 

28 minutes ago, David Spector said:

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?

 

Smooth animations are mainly achieved by tweening properties that are hardware accelerated (like` x` and `y` instead of `top` and `left`, for example).

 

28 minutes ago, David Spector said:

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?

 

You can create line, rect, and circle either server-side or with Javascript dynamically. There are libraries to help deal with that like SVG.js https://svgjs.com

 

28 minutes ago, David Spector said:

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 don't use any such tools ... but Adobe Animate might be something to look at. https://greensock.com/GSAP-Animate-CC-2017

 

Hope this helps,

 

Shaun

 

 

 

  • Like 5
Link to comment
Share on other sites

18 hours ago, Shaun Gorneau said:

What animation are you referencing here?

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.

18 hours ago, Shaun Gorneau said:

Smooth animations are mainly achieved by tweening properties that are hardware accelerated (like` x` and `y` instead of `top` and `left`, for example).

I've changed "left" to "x" and get the same jagged, not smooth, animation.

Example:

See the Pen GzWLOg by david263 (@david263) on CodePen

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

Link to comment
Share on other sites

Hi @David Spector,

 

Regarding question #2 in your second reply
 

Quote

I've changed "left" to "x" and get the same jagged, not smooth, animation.

 

I did not see any jank in Chrome testing on Windows 10. That jagginess jank (lost frames) happens in Firefox due to a Firefox bug when translating elements in x or y (translateX and translateY).

 

To get around that you have to add a slight rotation 0.01 to force Firefox to render on a sub-pixel level. But that is a Firefox known bug and not GSAP.

 

You can see now it does not have jank with the slight rotation 0.01.

 

 

See the Pen xMqNdx by jonathan (@jonathan) on CodePen

 

Happy Tweening :)

 

  • Like 1
Link to comment
Share on other sites

15 minutes ago, Jonathan said:

I did not see any jank in Chrome testing on Windows 10

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.

 

15 minutes ago, Jonathan said:

add a slight rotation 0.01 to force Firefox to render on a sub-pixel level.

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@David Spector

 

Be careful because the browser will not run JS right when auto-updating in the background, until a restart which i have a had that happen to me plenty of times in Firefox and Chrome browsers since they like to auto update in the background causing mayhem.

 

That is what jank, jagginess, jitterness or jerkiness means.. it means lost frames or you could also say skipped frames when the frame rate drops. Since having all the frames there would make a smooth animation.

 

Check out Google's Paul Lewis regarding Render Performance and jank.

 

https://developers.google.com/web/fundamentals/performance/rendering/

 

I did not see any jank

  • in Firefox (65.0 (64-bit)) after adding the slight rotation on latest Windows 10.
  • or in Chrome (Version 69.0.3497.100 (Official Build) (64-bit)) or in Chrome (Version 72.0.3626.81 (Official Build) (64-bit)) with or without the slight rotation on latest Windows 10.

Also keep in mind that Chrome is notorious for releasing updates that break how elements get rendered in CSS. In those cases we try and submit bug report tickets to have the Google Chrome Dev Team fix their bug. Since they have a habit of changing how CSS transforms render making it very inconsistent in how it renders and animates in each released Chrome version.

 

:)

 

  • Like 2
Link to comment
Share on other sites

13 minutes ago, Jonathan said:

Be careful because the browser will not run JS right when auto-updating in the background, until a restart

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?

13 minutes ago, Jonathan said:

That is what jank, jitterness or jerkiness means, it means lost frames

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?

Link to comment
Share on other sites

6 minutes ago, David Spector said:

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"? 

 

I was talking about what you just experienced with this reply that after the Chrome update you didnt see any dropped frames. Chrome and Firefox have issues when doing an auto-update for the browser in the background process on your PC that will cause frontend issues in loading or running JS until after you do a restart of the browser, especially being worse in Firefox.

 

9 minutes ago, David Spector said:

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. 

 

That is still lost frames or jank, since its a frame drop. But I'm not go back in forth over semantics. That is just the word people use to describe an animation that is not smooth or has a drop in its frame rate, but you can call it whatever you want ;)

 

Regarding creating SVG shapes on the fly you can use what @Shaun Gorneau already posted using SVG.js https://svgjs.com or you can use SnapSVG http://snapsvg.io/.

 

GSAP at its core can animate any javascript property or object, or CSS numerical property. GSAP wont programmatically create SVG elements for you, that is where SnapSVG or SVG.js comes in. But once you create the element with JS or with a JS SVG library you can use GSAP to animate it.

 

5 minutes ago, David Spector said:

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.

 

Just tested my forked codepen I forked from your codepen you provided in Chorme 72 using the Dev Tools FPS counter and i see 60fps. So im not sure what your seeing?

 

 

  • Like 2
Link to comment
Share on other sites

 

36 minutes ago, David Spector said:

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.

 

Is this buttery?

 

See the Pen ZbRVPY by osublake (@osublake) on CodePen

 

 

If not, there's something going on your end. GSAP is an animation engine. It doesn't do any rendering or anything else visually or graphically. All GSAP does is change the numerical value of a property, which is a ridiculously fast operation. 

 

Try running the animation in incognito mode. And check the refresh rate of your monitor. If it's running at 30hz, it will only run at 30fps. Also, make sure there aren't a bunch of background processes running on your computer, you're not running out of memory, and hardware acceleration is enabled in your browser.

 

 

  • Like 2
Link to comment
Share on other sites

1 minute ago, Jonathan said:

I was talking about what you just experienced with this reply that after the Chrome update you didnt see any dropped frames. Chrome and Firefox have issues when doing an auto-update for the browser in the background process on your PC that will cause frontend issues in loading or running JS until after you do a restart of the browser, especially being worse in Firefox.

I never do any work with my browser during an update. All the observations I reported to you on Firefox and Chrome are valid.

 

4 minutes ago, Jonathan said:

That is still lost frames or jank, since its a frame drop.

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.

11 minutes ago, Jonathan said:

GSAP at its core can animate any javascript property or object, or CSS numerical property. GSAP wont programmatically create SVG elements for you, that is where SnapSVG or SVG.js comes in. But once you create the element with JS or with a JS SVG library you can use GSAP to animate it.

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.

 

14 minutes ago, Jonathan said:

So im not sure what your seeing?

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?

Link to comment
Share on other sites

12 minutes ago, OSUblake said:

Is this buttery?

Yes!

 

But of course, this is circular transition, not a linear one, so it is more likely to fool the eye.

14 minutes ago, OSUblake said:

Try running the animation in incognito mode.

Don't know what this is.

 

15 minutes ago, OSUblake said:

And check the refresh rate of your monitor. If it's running at 30hz, it will only run at 30fps.

Computer reports the rate is 60Hz.

 

16 minutes ago, OSUblake said:

make sure there aren't a bunch of background processes running on your computer, you're not running out of memory, and hardware acceleration is enabled in your browser.

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 .

Link to comment
Share on other sites

To open an incognito window in Chrome, hit Ctrl+Shift+N

 

17 minutes ago, David Spector said:

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 .

 

Velocity is an animation engine. Mo.js is also an animation engine, with a little SVG creation thrown in.

Try making a side-by-side comparison using one those libraries with GSAP, and see how the performance is.

 

Three.js, PixiJS, and p5.js are canvas/WebGL libaries, and there are thousands of sites that use one of those libraries + GSAP. Just check out some of the examples on the showcase page.

https://greensock.com/examples-showcases

 

 

  • Like 2
Link to comment
Share on other sites

Sorry to hear about all the frustration/confusion, @David Spector. I'll offer a few thoughts:

  1. I've literally never seen a single demo where Velocity outperformed GSAP except when it was first released and exploited one particular edge case in GSAP that wasn't optimized (but it was updated/fixed within hours, so that's no longer valid). In every comparison I've done, GSAP outperformed Velocity, so I'm pretty confused about all these demos you're referencing that show Velocity (and other libraries) outperforming GSAP. I'm super curious to see that in action. Can you send a head-to-head comparison? 
  2. It kinda sounds like you're looking for some kind of motion blur that obscures the frame-by-frame stark updates that computers typically do. I'm not aware of any library that does that, as motion blurs are computationally expensive, though I guess you could do some work to fake something (like swapping in an image that's blurred during the animation), but I doubt that's practical. 
  3. As others have said here, GSAP is simply a super-fast property manipulator with advanced sequencing capabilities. It has absolutely nothing to do with rendering. And it's highly optimized for speed. Keep in mind that in most cases, probably less than 1% of the computer's work is GSAP-related, and the rest is graphics rendering. So unless you've got thousands of objects getting animated simultaneously in a small area of the screen, it's quite doubtful that GSAP is the bottleneck (not even close). But again, it'd be very helpful to look at exactly what you're seeing so that we can inspect what's going on and why you might be perceiving things so differently than we'd expect. If there's some odd bug related to your use case, I'd certainly want to squash it ASAP. 
  4. Based on the fact that you keep seeing things at 30fps, it sure sounds like perhaps your monitor has that as a refresh rate (though you seem to indicate that other libraries are running at 60fps which doesn't make any sense to me). I've got a MacBook Pro hooked up to a large 4k TV as a monitor. The MacBook Pro's built-in display runs at 60hz, but the TV actually runs at 30hz even though the software indicates it's set to 60hz. So I can drag a Chrome window from the built-in screen where it runs at 60fps to the other screen and the exact same animation displays at 30fps even though it has absolutely nothing to do with GSAP suddenly performing worse. So I wonder if it's related to the display on your end(?)

Happy tweening!

Link to comment
Share on other sites

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.

 

10 minutes ago, OSUblake said:

To open an incognito window in Chrome, hit Ctrl+Shift+N

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.

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...