How to animate SVG image without any library? - javascript

I have been learning web development for quite a while now and every time I want to animate my SVG image, I use GSAP from greensock. Do not get me wrong, I think GSAP is a great tool but I am not interested in animating using GSAP. Instead, I want to create my own library to achieve the SVG animation. The reason why I want to create my own library is to understand how the technology such as GSAP was created. For me, I am only interested in the technology and the technicality that go on behind the scene of any displayable contents. For this reason, I often create game engines and not a game simply because I am not interested.
So can anyone suggest to me on how to get started in creating my own SVG animation library? I actually been searching for hours on Google and all the information that I received is just more pre-built libraries for animating SVG which is not what I want.
Beside from creating my own SVG animation library, I am particularly interested in understanding more about the mathematics and the code behind the morph animation. In the past, I have used MorphSVG plugin but now I want to create the back end technology that drives the morph animation. Hence, it would be greatly appreciated if someone could explain to me how I can go about writing such animation from scratch.

Related

How to achieve fluid and performant complex svg animations?

I am trying to add svg animations to a react application, the type of animations that I would like to create is similar to the ones seen on discord.com
specifically Im talking about the animation of the black characters here
https://discordapp.com/gamebridge
I tried to read the code, obviously its done using something like gsap or react-motion since they use react.
But my question is how could they have precise control and timing on the svg?
I also noticed that the animations stop if they are not into view, is this an optimization technique used by the web developers or is it a browser specific feature?
Thanks.

How to move an icon through different points?

This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.

How to make 3D animation with Canvas

I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.

What is the best approach to producing graphical charts in a browser?

I've started a new open source project aimed at providing a quality project management experience. To do this, I need access to a set of chart tools (Flash is off the table), and very specifically one that includes a Gantt chart. I've done my homework and shopped around the web and I've more or less come to the conclusion that what I want doesn't exist, at least not for free. So chances are I'm going to have to write this from scratch.
If I was going to create a Gantt chart with which people could interact with (which I'm assuming means having excellent DOM support), then what technology would I use? Should I go with SVG? Or HTML5 Canvas? Something else? Your suggestions are much appreciated.
Also, a requirement would be that whatever library I use needs to be actively supported in the community (i.e. no dead projects).
I would not think there would be many free options as this is a niche-need.
JS Option:
http://www.jsgantt.com/
http://code.google.com/p/flot/
Promising Perl modules:
http://cpansearch.perl.org/src/DARNOLD/DBD-Chart-0.82/dbdchart.html
http://search.cpan.org/~awestholm/Project-Gantt-1.03/Gantt.pm
Update:
There's been amazing advancements in terms of interactive/web charts in the past few years. Shortly before your question was asked, D3.js was created, which has become a generally accepted library, which uses SVG to implement visualizations. Here's a basic example and a more advanced implementation using D3. Note; Gantt charting is still in its infancy; D3 will most likely revisit it in the future.
The argument of Canvas vs SVG is one that has been considered many times. You should read this article by Microsoft; How to Choose Between Canvas and SVG for your Site. Basically, if you have many elements you have to display, Canvas will perform much better. If accessibility is a priority, SVG is better.
In terms of working with Canvas vs SVG, canvas feels more fluid and it is certainly more capable with WebGL, but SVG is more transportable. They both have their merits.
If you're going to make your own, I'd recommend the SVG library Raphaël, which allows you to draw things using SVG fairly easily. It's also simple to make mouse event handlers and other things, which you could use to make it interactive.
I haven't had much experience creating interactive graphics with canvas, but my instinct is that it would be hard to handle mouse events since you don't have "elements" to add event listeners to.

Manipulating Images using jQuery (or other library)

I'm searching for a plugin, library or just a custom JS function that will enable the manipulation of images so that they look like they're winding around a roll of paper.
If it's hard to imagine, think of a paper towel roll standing up spinning. I already know of jQuery Roundabout but that only moves the images. I need them to actually be distorted as they roll around. I can't seem to find anything of the sort.
Thanks!
I'm not sure of any plugin that does that, but I'd recommend learning about the canvas element and its JavaScript API.

Categories