We Keep Coding

How to Rotate Canvas Element on the X axis with Javascript

I would like to know if there is a specific method to make this kind of animation?
Rotation Axis X:
https://gyazo.com/78c66d5cd8fc0bcb5ab2e0c3ddb77508
Is it possible to do with canvas 2d or to reproduce something similar ?
Thank you

Rather than Canvas, CSS animations would be an ideal candidate for this sort of thing.
eg.
body {
background-color: #444;
}
#keyframes slideDown {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
.outer {
perspective: 500px;
perspective-origin: 50% 0%;
width: 200px;
}
.inner {
padding: 20px 0;
font-weight: bold;
transform-origin: top left;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-name: slideDown;
animation-direction: alternate;
background-color: yellow;
font-size: 50pt;
font-family: arial;
text-align: center;
transform: rotateX(-90deg);
}
<br/>
<center>
<div class="outer">
<div class="inner">Texte</div>
</div>
</center>

Is it possible to do with canvas 2d or to reproduce something similar ?
Yes, it is possible to achieve this effect on a 2d canvas - but it takes an awful lot of coding to do it in vanilla JS.
One approach is to create a second, hidden canvas in which you generate the scene that you want to animate in the existing, visible canvas. Then you need to copy the hidden canvas to the visible canvas on a 1px hight row-by-row basis, calculating the appropriate destination x, y and width values to emulate the 3d effect. However, the result will often include a Moire effect (https://en.wikipedia.org/wiki/Moir%C3%A9_pattern) - the simplest way to get rid of it is to very gently blur the visible canvas until the unwanted interference patterns disappear.
Clearly the above is not an ideal solution - if you can use a WebGL canvas you can make use of 3d canvas libraries (for instance, three.js) which should make generating the effect a lot easier. A CSS approach - as outlined in another answer here - would be an even better solution!
If you really can't move away from the 2d canvas, then you can achieve the effect using the Scrawl-canvas JS library (disclaimer: I maintain this library) - see an example here: https://scrawl-v8.rikweb.org.uk/demo/dom-015.html

How to create a dynamic mesh gradient using Javascript similar to Stripe homepage?

I want to create a background similar to https://stripe.com/en-in homepage. It is a dynamic mesh gradient in a Canvas element. I tried to look into the source code but can't find relevant javascript code.
The closest I have gotten is this, but it uses CSS only no Javascript and isn't based on mesh gradient -
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 1000% 1000%;
animation: gradient 15s ease infinite;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<h1 class="text-light">Pure CSS Animated Gradient Background</h1>
Also, do you think the fact that I will be using it in SSR in NextJS is relevant here?
Thanks.

Dropping the link to JS Library which is basically exposing the stripe's code as API to plugin mesh gradient canvas dynamically -
https://github.com/anup-a/mesh-gradient.js

Car driving forward animation using JavaScript/CSS3 for banner advertisement

Is there a way to use JavaScript or CSS3 to animate an image of a car driving towards a user? To clarify, the car image should animate from the background, with the image smaller and seemingly further away and gradually get larger as it "drives" forward to the foreground of the image? The image will be of the front part of the car and will look like this:
This JavaScript animation will be utilized in an HTML5 banner advertisement so I am hoping to avoid anything that will increase the size of my deliverable substantially. I have been looking online for something similar to this and can't seem to find an example of what I am hoping to accomplish. Any ideas are welcome.

You don't need javascript, you can just use a CSS3 animation. For example, this would work:
#keyframes drive {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.car {
animation: drive 3s cubic-bezier(0.02, 0.01, 0.21, 1) infinite;
}
<img class="car" src="https://i.stack.imgur.com/oT3DY.png"/>
Explanation:
First, we define a drive animation. It starts with a CSS3 transform that scales the image to 1/5th the size, then at the end of the animation, to full size. You can use any css property, even width but transform: scale doesn't force a page render, so your animation is faster.
Then, let's break down the animation property on the .car.
drive - this part is self-explanitory, it tells CSS to use the drive key frames
3s - makes the animation last 3 seconds
cubic-bezier(0.02, 0.01, 0.21, 1) - sets the curve for the animation to run, so it scales slower the further along it goes.
infinite causes the animation to repeat infinitely.

This should get you started:
img {
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation:mymove 3s infinite;
position: relative;
}
#keyframes mymove
{
0% {width:10%;}
10% {width:20%;}
20% {width:30%;}
30% {width:40%;}
40% {width:50%;}
50% {width:60%;}
60% {width:70%;}
70% {width:80%;}
80% {width:90%;}
90% {width:100%;}
100% {width:100%;}
}
<img src="https://i.stack.imgur.com/oT3DY.png">

CSS Keyframe Movements with Delays

I'm stumped with this animation. I have an element that I'm creating a path for movement (not including vendor prefixes in sample):
keyframes Path_1{
0% {left:54%;top:66%;}
50% {left:54%;top:68%;}
100% {left:54%;top:66%;}
}
This creates a simple path movement.
Paths are supplied to some JS like so:
"path" : "54,66||54,68"
The JS loops through all coordinates passed in and automatically generates a path movement keyframe. It also handles adding the last coordinate pair to loop the animation.
I'm wondering if there is any way to supply specific speeds / delays to each point?
keyframes Path_1{
0% {left:54%;top:66%;} <- 1s
50% {left:54%;top:68%;} <- 5s
100% {left:54%;top:66%;} <- 10s
}
Thanks!

You can't provide delays as extra parameters in the keyframe declaration. You basically get percentages within which you define which properties animate from what, to what during the fragment of animation overall time that the percentage defines.
However, there are ways of doing this. I've created a jsfiddle here
.animation {
width: 100px;
height: 50px;
background-color: #f00;
animation: demo 5s ease-in infinite;
}
#keyframes demo {
0% {
width: 100px;
}
50% {
width: 400px;
}
90% {
width: 400px;
}
100% {
width: 100px;
}
}
We can see that the animation is programmed to last 5s, but at one point a delay is achieved by keeping the animated properties static for n%. At 50%, the animation sticks at 400px and stays that way until 90% and the effect is a 2s pause. 40% of 5s = 2s.
Speed is also possible by adjusting the percentage and the overall time. The first section of the animation is slower than the second because the time spent to cover the same distance is just 10% of the overall time rather than 50%.
As usual, CSS Tricks does a great run through of what's available.
Now you just need to define this data in your json and interpret it in your javascript to build the correct keyframe anims, have fun with that!

Pre-Rendering an animation on a canvas in javascript

I have a web app that uses the canvas to animate a tree that is drawn onto the screen. It does so by doing several trig calculations in a row. When you click the "grow" button there is an animation of a tree growing that has the certain attributes that the user can change. You can see the application here http://pastehtml.com/view/c85mxfgcj.html.
The problem is, if you set the "age" (the number of iterations to go through) too high, the animation starts to lag due to the calculations that the computer has to do. I was wondering two things:
Is there a way to pre-render the animation before it is shown to the user?
Is there a way to make it so that if I have a tree that has already been rendered and I wanted to animate it moving around the screen I could do that without having to re-draw the tree every single frame?
Thanks.

1: you might want to look into var fragment = document.createDocumentFragment();
2: yes via css, is much faster!
I think this youtube video will be worth your while.
Good luck
UPDATE: 9 Jan 2013
Just stumbled over this.
In css3 there is a animation feature using steps.
Basically you create a sprite (in canvas) and then use css3 to animate the sprite using a background-property on a element. Pretty cool (and should use the optimized browser's own code to do this, thus not load the users cpu as much as with javascript/canvas).
It's still not creating a animated gif however (but I think even that should be possible, using a library, since gif and pnp are quite alike, and then feed that gif using the data:image/gif protocol), but the end result still looks the same in the (modern) browser.
HTML:
<div class="hi"></div> or <img src="transparent.gif" class="hi">
CSS3:
.hi {
width: 50px;
height: 72px;
background-image: url("http://files.simurai.com/misc/sprite.png");
-webkit-animation: play 1s steps(10) infinite;
-moz-animation: play 1s steps(10) infinite;
-ms-animation: play 1s steps(10) infinite;
-o-animation: play 1s steps(10) infinite;
animation: play 1s steps(10) infinite; }
#-webkit-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-moz-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-ms-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#-o-keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
#keyframes play { from { background-position: 0px; }
to { background-position: -500px; } }
Example jsfiddle.