Howdy everyone,
Sometimes between submitting and working on CodePen I peruse the front page, I’m sure a lot of your do too. People build some pretty incredible stuff - CSS drawings, animations, work with SVGs, or using canvas.
There’s plenty of material to learn conventional front end dev, but what about this stuff? Is this still considered front end dev, or is this more of the realm of an animator? Does anyone have any resources or communities to share?
Some example of such work:
I dabbled in what you call “media art” a few years ago. It was fun.
I created mine using a language called Processing.
https://processing.org/
For example:
There are 1,000 randomly colored dots of different sizes on this page. The smaller dots move aggressively fast, while the heavier & bigger dots move slower.
Each dot moves and behaves on its own accord. I only gave them one rule, to follow your mouse pointer. Wherever you move your mouse pointer, they’ll follow and swarm around it. But the smaller dots are too excitable and usually overshoots their target. They also get bumped around by the bigger and heavier dots.
Instructions: move your mouse across the canvas, and these swarm of dots will follow you around
http://owel-media.surge.sh/swarm.html
And the code for this:
Mover[] movers = new Mover[1000];
void setup() {
size(640,660);
// we have 20 movers, initialize each one of them
for (int i=0;i<movers.length;i++){
movers[i] = new Mover();
}
}
void draw() {
background(255);
// need to call all these functions for each mover in array
for (int i=0;i<movers.length;i++){
movers[i].update();
movers[i].checkEdges();
movers[i].display();
}
}
class Mover {
PVector location;
PVector velocity;
PVector acceleration;
PVector mouse;
float maxVelocity = 3;
float mass = 1;
int ballSize = (int)random(3,9);
color ballColor = color(random(255),random(255),random(255));
Mover(){
location = new PVector(random(width), random(height));
velocity = PVector.random2D();
mouse = PVector.random2D();
mass = ballSize * 2.6;
maxVelocity = 25 / (ballSize * 2.1); // bigger balls are slower
} // Mover()
void update() {
// accelerate towards the mouse location
if (mouseX > 0){
// acceleration = PVector.random2D();
acceleration = new PVector(random(-10,10), random(-10,10));
mouse = new PVector(mouseX+random(-150,150), mouseY+random(-150,150));
// determine direction we need to go
PVector dir = PVector.sub(mouse,location);
// normalize
dir.normalize();
dir.mult(random(10)/40);
// set acceleration to direction
acceleration = dir;
} else {
PVector dir = PVector.random2D();
acceleration = dir;
}
velocity.add(acceleration);
velocity.limit(maxVelocity);
location.add(velocity);
// clear acceleration value
acceleration.mult(0);
} // update()
void display() {
noStroke();
fill(ballColor);
ellipse(location.x, location.y, ballSize,ballSize);
} // display()
void checkEdges() {
if (location.x > width) {
location.x = 0;
} else if (location.x < 0) {
location.x = width;
}
if (location.y > height) {
location.y = 0;
} else if (location.y < 0) {
location.y = height;
}
} // checkEdges()
void applyForce(PVector force) {
// save a copy
PVector f = force.get();
// a = F/m
f.div(mass);
acceleration.add(f);
} // applyForce()
}
Eventually you get to a point where you can learn just by reading documentations or by doing self practice. It’s all technically within the realm of front-end development but it is a bit watered down. Web animation isn’t as impressive as other types of animation but they’re interactive and they fit into websites (obviously). The more impressive 3D stuff are made with WebGL but they will lag if they try to animate stuff like what you see in the movies. Thankfully web animation doesn’t have to be as complex to be effective. Less is more sometimes when it comes to web animation.
SVG is a bit closer to graphic design. After all, the G stands for graphics. They’re made using softwares such as Adobe Illustrator. Simple SVGs aren’t that hard to make at all since they’re just shapes and drawings. From there, they can be translated into inline code and it’s not hard to find resources on what the code means at all, if you want to modify it. The W3School documentation on it is enough to get you started imo.
Pure CSS is just that… CSS. CSS has been long enough that you can find tons of videos on how to animate with it. If you wanna learn how to make art with it, try checking out Daily CSS Images. http://dailycssimages.com/
For more complex animations you might see something like this in the JS section:
var tl = new TimelineMax();
This uses GreenSock Animation Platform, or GSAP for short. It’s an extremely well-documented library with amazing browser support. This plugin makes animation a breeze. You’ll save hours animating complex animation because you can change timings and rearrange animations on the fly.
Once you understand how functions and objects work, it’s very easy to pick up.
To get started with GSAP I recommend this YouTube playlist:
https://www.youtube.com/playlist?list=PLkEZWD8wbltlSS_d_7tx_H_FBNVro8918
It’s not as hard as you think once you dive into it. I would say GSAP is actually easier to learn than jQuery. I learned GSAP and SVG in the same week and came up with this over the following weekend:
Hello Allan…
This is so cool Animations…Thanks for Sharing…
All of these beautiful animations are made in HTML , CSS and Javascript.
Its All Frond End Developer Skills that you use HTML and CSS for making the Objects , Shapes, colors and all sort of these things.
JavaScript is used here to make things interactive…like making objects moving how many times or how fast they move or when you press the mouse on it what should it do ?..
It is pretty cool to be able to see how beautiful animation people can make by connecting HTML , CSS and Javascript.
Note…"Canvas in HTML is just an element like any other element in HTML… like the -dev- element…However -Canvas- element is widely used for animations "
hope this helps…
