qqignatqq Posted February 23, 2020 Share Posted February 23, 2020 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 More sharing options...
Friebel Posted February 23, 2020 Share Posted February 23, 2020 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. 3 Link to comment Share on other sites More sharing options...
qqignatqq Posted February 23, 2020 Author Share Posted February 23, 2020 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 More sharing options...
Friebel Posted February 23, 2020 Share Posted February 23, 2020 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. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted February 23, 2020 Share Posted February 23, 2020 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. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 24, 2020 Share Posted February 24, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now