How to do javascript animation correctly. CSS3 animations and the new javascript Animate() method
Today we will learn how to animate website objects easily and quickly using two scripts. The name of which you can see above in the title of this article. But first, let me tell you what each of them is for.
WOW.js is a small library that allows you to enable animation at a certain stage of the page scroll. It weighs very little, and is also completely independent - that is, there is no need to connect jQuery or other monsters.
Animate.CSS is a script that is directly responsible for the animation itself. In fact, wow.js takes animations from this very thing. And there are several dozen of them.
The disadvantage of animate.css is that it is just a regular set of CSS rules related to animation. That is, they are played immediately after the page is loaded. And if the animated elements are not visible on the “first” screen, then visitors simply will not see all this beauty. After all, it will be played before they rewind the page to the right place.
And in the first note (link in the next paragraph), to prevent this from happening, I showed you how and where to write js codes so that the animation would play at a certain stage of page scrolling. It was extremely inconvenient, but it worked like a charm
Therefore, before you start, I advise you to watch the lesson “”. Since I will already assume that you know how to use animation on the site. At the same time, you will immediately understand how wow.js makes your work easier. After all, now we won’t have to write and delve into js code. Plug it in and forget it
And so, the introduction is over. Now let's get closer to the "body". I recorded a video lesson on this topic, but before watching, I want to show you what you will get if you complete the lesson to the end in practice. So to speak, for more motivation
Well, have you looked? This is what you “make fun” of with your own hands. So now run to watch the video.
Lesson: WOW.js and Animate.CSS - more fun together!Go for it!
Setting up WOW.js How to download and connect.1 step. Download the wow.js and animate.css scripts from the official sites (see links above under the video) and place them in your project folder.
Step 2. Connecting scripts simple HTML code on the page in the tag:
Note from Master-CSS channel subscriber:
The script tag should always be added to the end of the body. This is done to make the page load quickly. Every time the browser reaches a script tag, the entire site's loading and rendering is frozen until the script is loaded. Because of this, we often see sites that have been just a blank sheet for a long time. And also, if the script is placed at the end of the body, you have a guarantee that the body is ready and the script will definitely work.Thanks to Roman Belyaev for detailed explanations in connecting scripts to the site.
Step 3. You need to initialize the script by adding the following code, immediately after connecting it:
new WOW().init();
At this point the connection ends, and it’s time for the second stage.
Using WOW.jsStep 1. Select the element we want to animate and add class="wow" to it. In the code below, I showed this using an example image:
Step 2. Select the animation and add it with an additional class to our dog:
Step 3. Add settings for animation if necessary, using special data attributes:
In the code above, I specified that the animation should trigger when the image passes 200 pixels from the bottom of the screen. But at the same time it will have a delay of half a second, and the animation itself will take exactly 2 seconds.
WOW.js animation settings via attributes data-wow-duration – specify the animation playback time data-wow-delay – set a delay before playing the animation data-wow-offset – enable animation when the element passes a certain number of pixels from the bottom of the screen data-wow- iteration – number of animation repetitionsPlease note that these attributes are not required. If you don't specify them, the animation will simply play by default as soon as the element appears on screen while scrolling the browser window.
Well guys. That's probably all. If you have any questions, ask in the comments;)
Abstract: A simple example: the extinction method yellow color. Animation using JavaScript libraries. More complex example: Move and resize. CSS transitions.
The principle behind fading is that the background color of the fading element is set to yellow, and then, through a series of steps, its color returns to its original color. So if the original background color was red, then the color is then set to yellow, then orange-yellow, then orange, then red-orange, and then red. The number of steps used determines how smoothly the color change occurs, and the time between steps determines how long the color change continues. When changing color you can use useful fact from CSS: a color can be defined as a triple of regular numbers or as a hexadecimal string. Therefore #FF0000 (red color) can also be defined as rgb(255,0,0) . Changing from yellow to red in five steps means, therefore, going from rgb(255,255,0) (yellow) to rgb(255,0,0) in the following five steps:
rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)
More complex example: moving and resizingAlthough the yellow fading method demonstrates animation, it is somewhat boring. When most people think of animation, they usually think of movement. An interesting technique for alerting the user that something has happened without interrupting their workflow is to use a modeless message. Instead of displaying an alert() dialog that requires the user to click OK before they can continue, place the message simply in a floating div on the page that unobtrusively stays there until it receives confirmation. The second one is enough interesting thing this could then be to allow the user to return to a message for which they have confirmed they wish to read it again. So let's implement a floating message that, when clicked, collapses to the corner of the screen and can then be restored again when clicked. You can watch a short demo of this "collapsing message" (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html) to get the general idea.
If you're doing some serious animation work, or some serious JavaScript work, it's almost always worth using JavaScript library. This will allow you to create the desired presentation for users without having to worry about the mathematical intricacies required to perform the animation. (With the first example above, you now know how to do the math and how to use setInterval , but you'll save time and effort by using ready-made solutions.)
The above demo uses to work jQuery library(http://jquery.com/), but as mentioned, most libraries provide a similar enough animation concept that you should be able to implement the principle part using your preferred library. Essentially, you need to do the following:
Perform animation with using jQuery very easy: just use the . animate() and provide the desired final result animation (and how long it should run):
$(ourObject).animate(( width: "20px", height: "20px", top: "20px", right: "20px", marginRight: "0px", opacity: "0.2" ), 300);
The function takes ourObject and, in 300 milliseconds, replaces its width and height with 20px, its top and right positions with 20px, its margin-right style property with 0px, and its density (in browsers that support image density) with 20%. Then it's just a matter of programming in style
There is a misconception among web developers that CSS animation is the only productive way to animate on the web. This myth has led many developers to abandon the JavaScript animations generally. Thus:
Reality check: JavaScript-based animations are just as fast as CSS-based animations—sometimes even faster. CSS animation generally only has an advantage over jQuery's $.animate(), which is inherently very slow. However, JavaScript animation libraries that bypass jQuery show incredible performance while avoiding DOM manipulation as much as possible. These libraries can be up to 20 times faster than jQuery.
So, let's dispel some myths, dive into some real examples animations and improve our programming skills in the process. If you love developing practical UI animations for your projects, then this article is for you.
Why JavaScript?CSS Animations are useful when you need to make property transitions in your stylesheets. Plus, they deliver fantastic performance out of the box - without adding a library to the page. However, when you use CSS transitions to power a rich motion design (like you'll see in recent IOS versions and Android), they become too difficult to manage, or their functions are simply riddled with errors.
Ultimately, CSS animations limit you to a specific specification. In JavaScript, by the very nature of any programming language, you have an infinite amount of logical control. JavaScript animation engines leverage this fact to provide new features that allow you to do some very useful things:
Note: If you are interested in the topic of performance, you can read Julian Shapiro's “CSS vs. S Animation: which is faster?” and Jack Doyle: “Busting the Myth: CSS Animations vs. JavaScript" . For performance demos, refer to the performance panel in the Velocity documentation and the GSAP "Speed Comparison Library" demo.
Velocity and GSAPThe two most popular JavaScript animation libraries are Velocity.js and GSAP. Both work with and without jQuery. There is no performance penalty when using these libraries with jQuery because they completely bypass the jQuery animation stack.
If jQuery is present on your page, you can use Velocity and GSAP just like jQuery's $.animate(). For example, $element.animate(( opacity: 0.5 )); just becomes $element.velocity(( opacity: 0.5 )) .
These two libraries also work when jQuery is not present on the page. This means that instead of chaining the animation call into an element jQuery object- as simply shown - you would pass the target element(s) to the animation call:
1 | /* Working without jQuery */ Velocity(element, ( opacity: 0.5 ) , 1000 ) ; //Velocity TweenMax.to(element, 1, (opacity: 0.5)); //GSAP |
As you can see, Velocity retains the same syntax as jQuery's $.animate(), even when used without jQuery; simply shift all parameters to the right one position to create space for passing in the intended elements in the first position.
GSAP, on the other hand, uses an object-oriented API design, as well as user-friendly static methods. Yes, you can get full control over animations.
In both cases you are no longer animating the object jQuery element, but rather a raw DOM node. As a reminder, you access raw DOM nodes using document.getElementByID , document.getElementsByTagName , document.getElementsByClassName or document.querySelectorAll (which works the same way for jQuery's selector mechanism). We will work with these functions in the next section.
Working without jQuery(Note: If you need a basic primer on jQuery's $.animate(), check out the first few sections in the Velocity documentation.)
Let's explore querySelectorAll because this is probably the weapon you'll be using when selecting elements without jQuery:
As shown you simply pass querySelectorAll CSS selector(the same selectors you would use in your style sheets) and it will return all matching elements in an array. Hence you can do this:
1 | /* Get all div elements. */ |
Since we no longer attach animations to jQuery element objects, you may be wondering how we can chain animations together:
In Velocity, you simply call the animations one by one:
/* These animations automatically become a chain. */ |
There is no performance disadvantage to animating this path (you cache the element being animated to a variable, rather than having to repeatedly make querySelectorAll selections on the same element).
(Hint: With the Velocity UI Pack, you can create your own multicall animations and give them custom names that you can later use as the first Velocity parameter. See the Velocity UI Pack documentation for more information.)
Velocity's call-to-process-at-a-time has a huge advantage: if you use promises with your Velocity animations, then each Velocity call will return an effective promise object. You can learn more about working with promises in Jake Archibald's article. They are incredibly strong.
In the case of GSAP, its expressive object-oriented API allows you to place your animations on a timeline, giving you control over scheduling and timing. you are not limited to chain animations; you can nest timelines, make animations overlap, etc:
The awesomeness of JavaScript: WorkflowAnimation is essentially an experimental process that requires playing with timing and easing to get the right feel the application needs. Of course, even if you think the design is great, the client will often request non-trivial changes. In these situations, managed workflow becomes important.
While CSS transitions are fairly easy to insert into a project for effects like hovering, they become unmanageable when you try to sequence even moderately complex animations. This is why CSS provides keyframe animation, which allows you to group animation logic into sections.
However, a basic flaw in the API key frames- is that you have to define the partitions in percentage terms, which is not intuitive. For example:
1 | @keyframes myAnimation ( #box ( |
What happens if the client asks you to make the translateX animation a second longer? This requires rebuilding the math and changing all (or most) of the percentages.
This material is devoted to animation on HTML pages, animation performance, prospects for use, as well as animation in HTML5 mobile applications and games.
Javascript animationFirst of all, let's start by looking at JS animation on HTML page. Animation in JavaScript can be carried out either with setInterval, with which you can set static frames per second, or using a regular function that at the end calls itself or with window.requestAnimationFrame.
Here simple logic animation works in JS:
var el=document.getElementById("elem");
mar=10; //static initial data
//the cycle begins
mar=mar+1;
el.style.marginLeft=mar+"px";
//loop ends
The beauty of JS is that you can in a convenient way expand the native tools and use, for example, jQuery animation or use Velocity. This significantly speeds up productivity. However, in particular, Velocity does not use JS for animation, but the animation itself is performed there in CSS, which will be discussed below.
SVG animationWe can't help but mention SVG animation. She herself is very good, but mobile browsers It does not work. Or rather, only SMIL works on Android 3.0-higher. As unpleasant as it may be to say, SVG itself works in the WebView method, but everything related to animation in this tag, alas...
Wherever she works, she shows good performance. See for yourself.