I've been learning a bit about canvas and something that caught my attention (mostly because i had no idea how to do it when i saw) it's the shine and the nice animation that google did in their logo here:
http://www.google.com/chromebook/
I would like to know if someone have any idea or know how to do it =]
Thanks
You should definitely see the other discussion here:
How to create a shiny logo like Google Chromebooks website
It wouldn't be hard to make yourself, simply consider having a canvas with an css background-image on it and all you need to do is start an animation on the mouseover event.
The animation draws a radial gradient with a radius that increases over time, then it draws a line that is affected by a linear gradient that moves from left to right.
If basic animation on the canvas itself is something new to you then I suggest you do a search for online tutorials about canvas animation.
Related
I want to make a background animated gradient like this ones protoyped on Figma.
Picture of Animated Gradient
I saw some solutions of animated gradients in CSS like the one of this page, but it only generates a common linear-gradient and changes the background position.
What i'm looking for is a mesh gradient like the Figma examples (is builted with shapes, a blur layer and some noise) and animate it like the Figma prototype.
It can be done with pure CSS? or what could be a nice solution?
You'd definitely need something alongside CSS to animate it like you desire, JS would be a good bet. This is really a project in itself, but take a look at What a Mesh. It does what you're looking for, I don't think it's actually available for public/commercial use, but you might get some inspiration for how to approach it.
https://whatamesh.vercel.app/
I'm pretty new to SVG and how to work with them. I am not asking you for answer code, what I am asking is for some guide on maybe some plugin, maybe an article or some advice on how do I go about animating this SVG the way I wish to.
Problem:
I want to animate the picture below of the Sun, I'll be creating a vector graphic of this image obviously but what I want is these cuts in the bottom part of sun to animate and go from top to bottom revealing the background and second sun behind the main sun.
I want to do this inside a webpage so I need help regarding that.
Like I am not able to figure out how would I go about the whole process of making these cuts going down. Any help would be highly appreciated.
I would try https://rive.app/
As far as the how, I would create a short infinite loop. The horizontal bars would probably need to be their own shapes with some kind of masking effect on them to knock out the circle. You'd have to tween them to move up on the Y axis and let the height shrink to nothing as it moves up. The animation would probably only be 250-750ms. Let me know if that works!
Animated Motion Background Effect
i have tried the answers from the question above, but not exactly what am looking for, i am looking for a way to create the same background effect like the one on this webpage: https://fonoapi.freshpixl.com/ any tips or how-to on how i can create it? i came across it and wanted to know how i can achieve the same effect or create a new one.
That effect has been created using a particle api that can be found on GitHub https://github.com/VincentGarreau/particles.js
It has nothing to do with css and/or css animations, it is basically a particle simulation rendered to a html canvas element.
Im starting on some simple-to-complex canvas scripting. I want to draw a circle. That's easy. The problem is the circle is drawn right away. What if I wanted the circle to slowly grow (lets say from a vertical line, to a semi circle, to a half circle, to a full circle) Is there any way in canvas to do this (natively) or do I need to make a function that builds and deletes several circles (quickly) to simulate the effect?
If the latter is true, is there any sort of performance hits I should be looking out for?
Thank you!
Any form of animation using canvas requires the canvas to be cleared and the next drawing in the sequence to be made. The Mozilla Development Network has a good tutorial on canvas and canvas animations.
Check out the animate.js library. Its is exactly what you need. Usage is same as jQueryUI.
What you need can be done by the following piece of code:
canvas_element.animateCircle(x,y,r);
There are other optional parameters like animateCircle(x,y,r,{'lineWidth':5, 'lineColour':'red', 'stop': function() {alert('completed');}}) & some other functions. Check the Readme file for details.
On Google, move your mouse over the faded out +1 button. You'll notice the image animates with a type of glimmer? Like a light going across the image. They are using an image for this but I'd like to know how to do this in CSS3. Any ideas for on hover? Also, anyone know what this effect is called?
Thanks
In their case, they are using a sprite, and then animating through it.
Unfortunately, it's not yet possible to animate css3 gradients, and background-position seems to have no effect on it. You'll just have to do with images at the moment.