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.
Related
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.
I ran into this beautiful UI mockup on Behance and am very curious about the best way to implement this.
https://www.behance.net/gallery/25264659/Google-transitions
Essentially, I would like my search bar and logo to animate up to the top exactly like this after the form (aka the text input) has been submitted.
My app is an Angular app, so would it be more practical to create an Angular directive? Or implement this with pure CSS or JQuery (independent from Angular)?
Your animation will be independent of AngularJS. In regards to performance of the animation JQuery is by far the absolute slowest. The standard would be to use CSS transitions / animations. If you are not comfortable with CSS then user something like velocity.js. It has a syntax similar to JQuery but used window.requestAnimationFrame making it potentially even faster then CSS.
All Angular would be used for would be used for would be to call the animation or add / remove a class to cause the CSS transition to animation when the search is underway.
As for the animation itself I unfortunately cannot help much with, those things tend to take a lot of effort to get looking good.
I am trying to make my website a live background of space. I am attempting to get the stars to spawn on the left of the screen and slowly move over. And occasionally their will be stars that come in from other directions. My question is, how should I go about doing this?
Would it be smartest to make a Javascript, script that would make a LOT of <div>'s and then move them all randomly? Or would it be smartest to use a canvas? I've never used a canvas before so I don't know all it's uses yet.
Here's a link to the effect I'm trying to emulate (It's a YouTube video with music) - https://www.youtube.com/watch?v=y8MsE-4dygY&list=PL21A7A915E7020E73&index=16
I'm trying to emulate what the stars or partices are doing in the background of that video, so how should I go about this? (I'm not asking for all the code, I'm just making that clear.) Thanks in advance! :)
well, you can obviously use a Parallax background with some overlays for an easy effect, but you can go further by using any of the many scripts out there, search Google for that. Or you can learn how to do it via scripting with this great tutorial that makes use of HTML5 and CSS3
Canvas may be more performant than adding lots of divs as you won't need to create a large DOM tree. DOM operations are expensive and can cause memory thrashing if you repeatedly create and destroy lots of elements. Using multiple overlaid images and CSS3 translate transitions should be more performant still, but may make it harder to achieve all the effects that you want - randomized movement, separation of stars on the same plane, etc. etc.
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.