Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qqignatqq

optimize the animation with GSAP

Recommended Posts

Hello. I found this kind of animation on the Internet. I have a feeling it's hanging a little. Can you tell me if it's possible to optimize the animation with GSAP or I don't quite understand the purpose of GSAP?

 

See the Pen bJNNEX by H2xDev (@H2xDev) on CodePen

Link to comment
Share on other sites

54 minutes ago, qqignatqq said:

Hello. I found this kind of animation on the Internet. I have a feeling it's hanging a little. Can you tell me if it's possible to optimize the animation with GSAP or I don't quite understand the purpose of GSAP?

A quick look tells me this is a 2d canvas-animation. Eventhough it looks and simulates 3D. I understand you probably mean the hickup in the beginning, but to optimize the full animation I would advise you to switch over to a 3D framework like Threejs which uses WebGL and therefore uses the GPU instead of the CPU. Some browsers have acceleration on 2D canvas, but with WebGL everything is way more optimized and you could even use 3D shaders which are way faster than javascript and run in parallel on a graphics card. My advise would be to dive into and learn threejs. You can use it together with gsap.

  • Like 3
Link to comment
Share on other sites

19 minutes ago, Friebel said:

to switch over to a 3D framework like Threejs

I haven't studied threejs, but I've heard of him. The problem is to implement this: https://threejs.org/examples/?q=wav#webgl_points_waves you have to drag all threejs with they modules, which doesn't look very productive. All I need is this point animation, not the whole threejs...

Link to comment
Share on other sites

55 minutes ago, qqignatqq said:

I haven't studied threejs, but I've heard of him. The problem is to implement this: https://threejs.org/examples/?q=wav#webgl_points_waves you have to drag all threejs with they modules, which doesn't look very productive. All I need is this point animation, not the whole threejs...

I can't see the problem with that.

 

You write you 'found this on the internet'.

This is starting to look like directly copying other peoples creations to me and chosing the easy way here. We all need to learn stuff if we'd want to create things. I might be wrong, but I'm against stealing other peoples work so I'm hoping you don't distribute things like this, maybe slightly changed, as your own instead of creating your own creative stuff. If you like to learn from it and take it as an example, that's fine and great though. Than open the code, try to understand it, trial and error in your projects and read documentation and once in a while ask questions if you cannot figure it out after trying until you get it and can use the framework to create your own stuff to show to the world.

  • Like 2
Link to comment
Share on other sites

12 hours ago, qqignatqq said:

Hello. I found this kind of animation on the Internet. I have a feeling it's hanging a little. Can you tell me if it's possible to optimize the animation with GSAP or I don't quite understand the purpose of GSAP?

 

No, gsap wouldn't help as that animation is already pretty optimized. As @Friebel pointed out, it would run much faster using WebGL.

 

I'm 100% sure that the person who made that demo knows WebGL is faster. It's just an "experiment" to show how you CAN do 3d in a 2d canvas. Just because you CAN do something, doesn't mean you SHOULD. Use the right tool for the job.

 

  • Like 2
Link to comment
Share on other sites

On 2/23/2020 at 3:47 AM, qqignatqq said:

I don't quite understand the purpose of GSAP?

GSAP is a collection of tools to help make animating easier. Check out the "What is GSAP" video on this page: https://greensock.com/gsap/

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