ANIMATION

Use Animate.css on platform Tilda Publishing
Today, landing page without animation sold poorly, the customer would choose a freelancer who works in a large part of the portfolio created with animation, but the product information supply to be desired than the one with the text and description of 5+, but the visual component pages lean and entirely without animation.
Please note that this is my first article and if You found a bug or what is the part You do not understand, then write about it in the comments and I will answer You. Don't forget to read the table of contents, links to new articles will post there.

Also on the rights of the author of the article, I want to mention that do not support the use of animation for animation. I believe that animation should not be difficult, used to attract attention to the individual information blocks, and create more "air" pages design, visual unloading transitions between screens and visualization of user actions.
Connecting Animate.css and ViewportChecker.js

To start using the animation of elements on the page, you need to connect Animate.css and ViewportChecker.js. To do this, we place at the top of the page HTML block (so if you put the code in the HEAD, the ViewportChecker.js will not work) and enter the following lines
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.7/jquery.viewportchecker.min.js"></script>
If you are using personal hosting, you can download these files to your hosting and change the path to it in the above code.
This code we connect Animate.css external file (which contains the styles of animation, more here) and ViewportChecker.js (it allows you to run the animation only at the moment when the desired item (or a little in advance) is displayed on the screen, read more here). Both files have minifier (ie compressed by removing hyphens or spaces in the code).
You also need to go to the top of the page (as a separate html block or paste it into an existing block) or to the User-defined styles of the entire site, if the animation is used on more than one page, add css selectors
<style type=text/css>
    .hidden {opacity: 0;}
    .visible {opacity: 1;}
</style>
they are used to hide the items on a page until such time as they cause the script ViewportChecker.js

Setting

For once it was clear what we are going to work, I give an example of code to be inserted in the HTML page at the end of the block
<script> 
$(document).ready(function() {
    $("*[class^='t102__title t-title'], *[class^='t102__descr t-descr t-descr_md']").addClass("hidden").viewportChecker({
        classToAddForFullView: 'full-visible animated fadeIn titleanimate'
       });
    $("*[class^='t264__wrapper t-text t-text_xs']").addClass("hidden").viewportChecker({
        classToAddForFullView: 'full-visible animated flipInX codeanimate'
       });
});
</script>
Let's look at the code. Tags <script> </ script> wrap up the code and make it clear that this browser code is JavaScript code. $(Document).ready(function() makes it clear the browser to run a script after a complete download of all DOM elements (ie the structure of the page).
Now the most interesting - $("*[class^='t102__title t-title'], *[class^='t102__descr t-descr t-descr_md']"), in this line, we specify a script to an element of the page to which we apply animation to find a class, id, or other attribute it, we need to click on the item right mouse button and select the line "View source" from the context menu, such as the item code will
<h1 class="t102__title t-title" field="title"><div style="font-family:'Georgia';color:#333333;" data-customstyle="yes">Анимация</div></h1>
The first thing we have to write is $(""), now we specify between the double quotes * (this means that we select all the elements of the page) and open the square brackets, we get the code $("*[]"), but since We need a specific element, then we will define it by the class css. For this, in square brackets we write class^='t102__title t-title', i.e. Classes of our element through a space, do not forget to wrap with apostrophes.
If you need to apply this animation to multiple items, you can list them with commas, as in my code
For more information about the use of jQuery selector for finding items, read here
Enjoying the code further, addClass("hidden") adds a css class to a hidden element.
classToAddForFullView adds classes only when the item is completely on the screen, more in ViewportChecker.js features you can read here
'Full-visible animated fadeIn titleanimate' - a list of css classes to be added to an element in its overall appearance in the area of the screen.
More about them - full-visible and animated it mandatory classes, then at least there is a mandatory fadeIn, it is actually a class defines how an animation applied to an element, you can replace any of the class presented here. And last comes an optional class that you can create yourself (you can connect it to the section "Custom styles" or in the HEAD of the page) and give it its name, I registered in this class such properties -
.titleanimate { 
animation-duration: 1.5s !important;
animation-delay: 1s !important;
animation-iteration-count: infinite !important;
}
those. In it, I prescribe the duration of the animation and the delay before starting the animation in seconds. These styles I regulate the animation speed, there can be several of them, because often the animation speed and its delay for each element can be different. The number of repetitions (iteration-count) I did not use in a concrete example, but often it is necessary for a looped or repeatedly repeating animation.
Update 1. The "ken burns" effect

User Аляксандр Пуставітаў ( https://vk.com/pustavitau ) asked the council how to implement the "ken burns" effect to images (as an example, the title page of this page), everything turned out not at all difficult, but with a nuance - in the site settings You need to disable Lazy Load mode (see https://help.tilda.ws/lazy-load for more details), because the transition-duration property does not work because of it.
To connect an effect to an element (in this case, to an image, but generally to anyone), you need to add this HTML block to the page
<style>
    .zoomImgHead {
        transform: scale(1.3) !important; 
        transform-origin: 50% 10% !important; 
        transition-duration: 15s !important;
        transition-delay: 2s !important;
    }
</style>
<script>
$(document).ready(function() {
    $("*[id='coverCarry9705932']").addClass("zoomImgHead");
});
</script>
In the <style> block, we create a class with the properties of our effect, in the <script> block, create a jQuery function that applies this class to our element. Now, more about the possible properties of transform and transition to adjust the effect -

transform - specifies the type of transformation. Read more here.

transform-origin - sets the coordinates of the point, relative to which the transformation of the element will occur. Read more here.

transition-duration - specifies the time in seconds or milliseconds, how long the transition animation should last until it finishes. It can be used not only for transformations, but also for any other properties, for example, height or width. Read more here.

transition-delay - sets the waiting time before the transition effect is triggered. Read more here.

In principle, this is all you need to know to create the "ken burns" effect, but once you start to consider the properties of transform and transition, then let's write about all possible -

transform-style - defines how the children will be displayed in 3D space. Read more here.

transition-property - sets the name of the style property whose value will be tracked to create the transition effect. Read more here.

transition-timing-function - sets how quickly the value of the style property for which the transition effect is applied should be changed. Read more here.

If you want the effect to be triggered only when the user reaches it, then use this code -
<style>
    .zoomImgHead {
        transform: scale(1.3) !important; 
        transform-origin: 50% 10% !important; 
        transition-duration: 15s !important;
        transition-delay: 2s !important;
    }
</style>
<script>
$(document).ready(function() {
    $("*[id='coverCarry9705932']").addClass("hidden").viewportChecker({
        classToAdd: 'visible zoomImgHead'});
    });
</script>
Just do not forget to change the element and class to yours.
Update 2. Set the background to any element

Here everything is done simply, but again there is one nuance. But first, look at the code that allows you to change the background
$(document).ready(function() {
    $("div[id='tildacopy']").css("background","url(https://static.tildacdn.com/tild3031-3762-4734-b231-303963653233/geometric_pattern.png) repeat");
});
That's all the code))) As you already understood, you just need to change your element and change the URL path to your picture. If you just want to change the background color (maybe even make it translucent), then delete everything that is written in second quotes (ie where url() repeat, that's all you need to delete) and write in these quotes the color in HTML , RGB or RGBA, read more here.

Also, you probably noticed the value of repeat (it's useful if you specify a pattern as an image for the background) in the background property, it can also have the value repeat-x, repeat-y, space and round, you need it so that your image for the background is repeated In all directions or only vertically / horizontally. Read more about this value here.

And now the promised nuance, the fact is that Tilda does not have a library of user images, and if your image is stored on your computer, then simply indicate it as an image for the background, you can not. But also for this case there is a trick, all you need to add to the page is a block with the image (IM01), specify in it an image from your computer, save this block and right there in the page designer, right-click on this image and select "View code "(This is for the Google Chrome browser, but in Firefox the same principle). After that, the structure of your page will open and a line with your element will be selected, just find in this line the address that begins with https://static.tildacdn.com and copy it completely into the value of the URL property of the background.
All, now disable (DO NOT DELETE, since I think that Tilda does not store images from remove blocks) the image block (IM01) that you added.
Conclusion

If You have any questions about the article and its use, write in comments, I will try to help. Thank you all. Share articles in social networks, maybe to someone else it will help.
P.S.

And here's another here https://www.paypal.me/ form to support me :)
If the article helped You of course, if you write that in comments if you found some animations on the Internet, try to repeat it on Tilda.
comments powered by HyperComments
Made on
Tilda