Jump to content
Search Community

Sine-wave animation

TobiReif test
Moderator Tag

Go to solution Solved by Jonathan,

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

How to ensure that the snake-like animation in


is even?

 

Each column of dots should move up with ease-in-and-ease-out (eg sine) and should move back in the same way:

slow upwards, fast upwards, slow upwards, then slow downwards, fast downwards, slow downwards; loop.

 

The current animation is roughly what I want, but it seems to be faster at the top and slower at the bottom. Each column of dots seems to jump up and down, resting at the bottom only.

 

I had no luck using repeatDelay, and I think a clean solution would not involve repeatDelay. Instead I need something like "sineAnimationUp;reverse;loop" or simply "sineWaveAnimation" == forth and back exactly like a sine wave.

 

See the Pen b7809c58663ddac3572f5594ffc4f5fe by TobiReif (@TobiReif) on CodePen

Link to comment
Share on other sites

  • Solution

Hello and Welcome to the GreenSock forum!

That is happening because of the ease in out that you are using.. if you want more of consistent easing you should choose linear easing.

Like Power0.easeNone

http://greensock.com/ease-visualizer
 

Plus you are moving around a lot of SVG DOM elements, which will also contribute to the sluggish animation. Canvas is probably best suited for this type of effect, since canvas is best for animating hundreds of elements. Or just use non SVG elements, then you can animate using the GPU to use 3D transforms for a much smoother animation. SVG can only animate using the CPU since SVG elements do not support 3D transforms.

 

:)

  • Like 1
Link to comment
Share on other sites

...

 

Plus you are moving around a lot of SVG DOM elements, which will also contribute to the sluggish animation. Canvas is probably best suited for this type of effect. Or just use non SVG elements, then you can animate using the GPU to use 3D transforms for a much smoother animation. SVG can only animate using the CPU since SVG elements do not support 3D transforms.

 

:)

 

  On the topic, how likely is that GreenSock would be able to animate this simulation smoothly:

 

http://david.li/waves/

 

  It uses OpenGL (WebGL) so real 3D animation as a scripting solution, looks very similar to Three.js (library and) code.

 

  It's still remarkable every time I watch it again. Is there similar GreenSock animation anywhere?

Link to comment
Share on other sites

GSAP can be used to animate any numerical object or property. There are other examples of GSAP animating with three.js for WebGL.

 

GSAP could animate that it would be the same like when it animates with canvas, animating on every requestAnimationFrame() tick. That is what there doing in that example if you look at the wave.js file on that site where it shows requestAnimationFrame(render); on line 199.

 

And the camera is being rotated with CSS 3D transforms.. but the wave animating in canvas WebGL, which can take advantage of animating with the GPU. I'm sure that example can be broken down to use GSAP as its animation platform.

 

So GSAP is capable it is just a matter of setting your project and using GSAP as your animation platform to interpolate the properties and values you want animated. GSAP is used to animate HTML DOM elements, SVG elements, CSS properties, Canvas and WebGL properties, and any other javascript object and property that is numerical.

 

Most of the code in that waves WebGL example is for the various controls to change the choppiness, wind and size of the waves.

 

Try browsing our GreenSock Customer Example Showcase and you can see a lot great examples of users who animated with SVG, canvas, and canvas WebGL,

 

http://greensock.com/examples-showcases

 

:)

  • Like 1
Link to comment
Share on other sites

SVG is only bad performance wise when animating hundreds of SVG elements at once. But that would be the same for animating with CSS transitions or CSS animation. But in your case i would just use <div> tags then you can animate with CSS 3D transforms for a much more smoother animation that can take advantage of rendering on a hardware accelerated layer using the GPU (video card), instead of only using the CPU for CSS 2D transforms. SVG 1.1 dos not support CSS 3D transforms, only 2D. But SVG 2.0 will support CSS 3D transforms, but that wont be for a while.

 

Guaranteed if you change it to animate <div> tags instead of SVg child elements, you will see it smooth like butter!

Link to comment
Share on other sites

I had no luck using repeatDelay, and I think a clean solution would not involve repeatDelay. Instead I need something like "sineAnimationUp;reverse;loop" or simply "sineWaveAnimation" == forth and back exactly like a sine wave.

 

 

Hey @TobiReif

 

Did you see Sine the ease? Here it is running in your example.

See the Pen 96393d9bcc4bda6163a5f0c78e7ed1e4?editors=0010 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

I just saw your tweet about getting SVG to perform like PIXI. I'm kind of curious why that hasn't happened yet. SVGs are just vectors, and that's what GPUs are good at. I guess it's a lot more complicated than just crunching numbers and there's some other complication.

 

Have you seen this pull request for SVG support in PIXI?

https://github.com/pixijs/pixi.js/pull/2614

 

Check it out...

 

The SVG Beemark!!!

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

  • Like 4
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...