Take control over the animations in your project

Hi guys,Ever since the animation effect was introduced in the earliest v.3 of the Builder along with admiring the cool looks it instantly gave I was also wondering - how this can be controlled?

You probably know the graceful emerging of the elements on the pages triggered by them entering the view port is done by the fadeInUp class included in the animate.css library. But there are actually more than a hundred of them and only one universally used - the others just stand there. So here is a simple and easy way adding different animations to the elements in your Mobirise projects:

CASES:

Using only Custom CSS achieve the following: Change globally the animation used for displaying the blocks when they enter the view port upon scroll

Change the way only blocks in a certain block animate when get displayed upon scroll

Assign emerging animation to only specific elements in a block

Assign animations on all elements on a specific state - like hover for example

----- this list can go on endlessly so let's stop here and later on if you need targeting an element which is not covered by the stylink snippets - just post over here and I'll try providing the correct code

How it works: There is a script which is used to track the position of the Mobirise generated web pages on screen and trigger their animation removing a class hiding them , adding tha classes animating them and removing the animation classes at the end. This is done globally for all the elements on the page and for all the elements the animation class being added is the same - .fadeInUp which is a part of the animate.css library. All the available animations in it you can explore over here (open it in a new tab and keep it opened for a while - we'll need it shortly)

take a few moments exploring all the animations available because further we'll try using some of them in our Mobirise projects. It is a good idea downloading the animate.css library and opening the file in your favorite text editor

A word of warning: Just because you can use many effects that doesn't mean you should use all of them together in one page - effects are like spices - too much spoil the dish. So be careful with this one

For our example I took the most commonly user cards block from the Mobirise 3 theme and the only adjustment I made to it is setting their number to the maximum possible - 6.

and here is what I made it do

the sample web site with this cards gone crazy can be found over here:

So after taking all the necessary preparations let's step further to the fun part - changing animations.=)

Let's persume we've looked over all the avaliable animations and decided to replace the default one which is fadeInUp with, let's say fadeInUpBig the first thing to do is locate this class in the animate.css file (use the animations list to copy the name and paste it in the text editor's search field) basically the definition of the animation in the animation library looks something like this:

all the animations are defined this way. Just copy the marked part and paste it in the blocks Custom CSS field than replace the marked classes ( fadeInUpBig in our example) with fadeInUp so the final result should be:

this placed in the Custom CSS field changes the transitions on your entire page

Now let's change the transition only for the current block - we'll use again the fadeInUpBig animation. To do this we'll need the other part of the snippet in the animation library - the one we didn't copy the last time

Just copy the highlighted part and paste it in the Custom CSS of the block you want to tweak replacing the original style name ( fadeInUpBig for the example) with fadeInUp DO NOTE - you need to replace only the highlighted part - the class name leaving the inside declaration as is. Finally it should look like this:

If you deside you're not satisfied with the result you don't need to search the animate library again - just copy the desired name from the animations list file and replace it in the declarations leaving the class name fadeInUp

and that's it - as simple as that - all the elements of this block will emerge differently on your page

Comments

Now let's play around targeting particular elements of the cards block. For this we'll be using pseudo selectors - to target different elements just replace the numbers in the brackets - even , odd and formulas like 2n+3 where n starts from 1 are also supported.

as I said above - this list can be expanded to infinity - so if you need help with selecting specific element in different block - just send here a note

And lastly - let's change the way elements appear when user hovers over them with the cursor. I'll give you the snippets for images and buttons which can be universally used for all the blocks ( I think ) but lit just a pinch of logic you can use them to transfom the snippets from above

Well guys that's basically it - I hope you'll find it useful and enjoy this technique as much as I enjoyed exploring it.

Please let me know your thoughts about it - which blocks and elements you think should be animated and which - not? Does this whole crazy movement add value to the project or just freaks the visitors out? Which is in your opinion the point of balance? Looking forward your thoughts!

Hello Filyov, I tried to change animation but the procedure it is not clear (for me).If I want to, for example, make animation "ZoomIn" on a block, I have to edit the same the file animate.css (I have only animate.min.css)?Then, I have to replace "fadeInUp" with the "ZoomIn" throughout the file or only in two places that have shown you?However I did some tests but I can not.As always I miss a step that stops me everything.Thank you.Fulvio

Hi Fluvio,Don't worry - it took me a while to figure out what I meant above. I guess I have been a bit excited I finally hava figure it out

Basically it all narrows down to this:

animate.css holds the definitions of all the possible animations. animate.min.css is the exact same file but minified - all the spaces and new lines taken away for reducing its size and hopefully making it lighter to load. Nevertheless it's so ugly for the browser it's perfectly legible.

You can download the unminified version form the cmall link under the fropdown over here:

After downloading this file you don't place it anywhere - just use it as reference and take some snippets from it in order to paste them in the Custom CSS fields of your blocks - like the yellow highlighted part in the snippet above where it says COPY.

Described other way - each animation has two ruled defining it - one starting with @keyframes - let's call it PART #1 andone as a standart class definition - starting with the animation class - PART #2To globally redefine the whole project's animation we need PART #1 - we copy it from the animate.css file and paste it in any Custom CSS field of any block in our project.Once placed in custom CSS field of your project the snippet needs to be EDITED and the animation name - REPLACED BY THE ONE MOBIRISE USES by default - fadeInUp We can't change the class which is being added to all the elemets of the generated pages so WE REDEFINE IT with the definition for another animation we took from the animate.css file. Once we've done that all the animations change the way we told it to.

An example - I have a sanbox project with a few blocks. In the last one's Custom CSS field (but I could also do it in the trid from the top of second from the bottom - it doesn't matter in which one exactly) I copy / paste the PART #1 definition for the animation bounceOutUp I took from the animate.css file

this will do nothing. In toder to make it work I must replace bounceOutUp with fadeInUp like have done in the screenshot.

This way the animation is redefiend globally.

Now let's redefine the animation locally - for a single block. To do so we need to do the exactly same thing but with PART #2 from the animate.css file. Copy / paste the snippet and replace the adnimation name with the default fadeInUp. This way you'll redefine it only for the block in which Custom CSS field you're pasting the snippet.

An example :

This will apply bounceOutRight animation to all the elements in the block.

Next - defining different animations for elements in the same block - the same drill as the previous paragraph. We use the PART #2 snippet, replace the animation name with fadeInUp again BUT this time we make the selection a bit more precisely, targeting the specific element which animation you wish to alter.

An example:

this changes only the enterance of the image in the block. For a reason it works only with class but not tag selectors. img .fadeInUp {... won't work.

And lastly - special stated - like hover for example - same thing as above but the animation class is totally replaced with the apropriate class:hover state - to do this we use PART #2 and remove the animation class entirely replacing ti with the class:hover or whatever we need to. We also need to define duration and behavior adding those two lines in the rule.

animation-duration: 1s;
animation-fill-mode: both;

Leave the fill mode as is, alter only the duration if neededAn example:

This will animate the image on hover for a second .

That's basically it about the animations - hopefully it's a bit more clear now

Pls write back how it worked out for you and make sure you share the final result

AMAZING - thank you so much Filyov. Huge help. Came in time for wishing to do some different animations.

Question please.... if one does not wish to have any animation at all, ie the Mobirise usual fly in from bottom. what would one put into the html of a block to stop animation on that block only? thanks.

Just thinking...perhaps you could make a Plugin for MR that can be added to the Plugin folder which would allow to be injected in existing Modules, meaning that the Plugin would add itself to any Block where appropriate ( flip a button in the module ) and then the animations become available ?

and even tried to create one taking an existing folder as a start point but I guess I'll have to read some more

Actually I think it's much easier doing it through the Custom CSS field since you just have to figure out the right effect, find its rules and just copy / paste them. Btw when I first started this theme I did a little cheatsheet - a txt file with all the animations names - so if you've liked a specific animation from the animate.css site, just copy its name from the cheatsheet and use the search to briefly locate what you need within the actual animate.css file or even better - if you're altering the animation for a single block or element - just take the anim name from the txt file and replace it in the rule - as easy as that

On the other hand let's imagine for a moment we were building a plugin - where this extra animation control should take place? If we want to be able to control each part of the blocks the Inline editor looks like the right place additionally (I haven't played around with this so far but I guess today is the day ) it would be a good idea to add some delay options - generally the thigs get heavy. This whole thing will get loaded each time we invoke the Inline Editor but will actually get used much rarely - I'm just thinking aloud. So the result much possibly be heavier and slower software - not the way I would like it to be

But I whish to thank you buddy since thinking about this whole thing reminded me something I wished to explore a bit deeper - the delays in the animations - it's quite simple actually - all you need to do is add this simple script to the snippet PART #2

.....
-webkit-animation-delay: 2s;
animation-delay: 2s;
....

so ti gets to look something like this:

and it will delay the enterence of the targeted element as much as you say it to - in the particular example from above - by 2 seconds - as easy as that

And finally - here is an enigma - when you pblish / preview something and the builder reaches up to a link pointing to not exsisting asset - like an image or so - it returns a message like this:

like there is a location where it takes the assets from in order to put them in the newly created assets folder for the build. Something like the actual work folder for the builder while it handles the current project - not quite sure if this is the correct way to call it.

So the question is - do you happen to have an idea where is this located?

I'm perfectly aware this has nothing to do with the animatins in particular but I think figuring it out miht aid us in many ways - like just placing some assets we could then target from the Builder - like images not taking place in the markup or fonts ect.

In time we have discussed this with a few fellow users but never got to something defenitive.

Ok, Can we like have a gui for all this. This totally looks like one of those bad ass improvements that would take a trivial amount of coding to add. Seriously, how hard could this possibly be for the next update? instead of toggle switches Mobi really needs to get used to doing drop-downs and stuff. More options isn't necessarily more complicated. It's all in the presentation.

No worries - I actually was just browsing around - kind of got addicted spending some time over here instead in Facebook and Pinterest since I still talk to people but meanwhile manage to do something useful and sometimes even help somebody

Anyway - let's do what I think I got you need done as a step by step example. As far as I got it you need to change only the entrance animation of all the elements of a single block and again if I understood you mean doing this to the features block in the default Mobirise3 theme. Somewhere above you can find links to unminified animate.css file and animations-list.txt. These are for copy/pasting and reference only. Personally I'm using them to just copy/paste the animation definition scripts part#1 and part#2 as I called them over here:

Now I'll just drag the features block in my current sandbox project and place this snippet inside its Custom CSS field

.fadeInUp {
-webkit-animation-name: pulse;
animation-name: pulse;
}

and it's all done - the entrance of the elements inside the block is being redefined,

Everything inside the script remains as is. The only thing that's changing is the animation name you need for this particular block. So to change it to something else - just copy the desired animation name from the animations list and paste it in the place of pulseThat's the routine I have built for myself since I don't have to remember anything or stare at the animate.css site how exactly the animation name is speltAdditionally if you want particular elements animated differently - add on of their classes in the rule selector next ot .fadeInUp and you're good to go Or if you want only a particular element in the block animated in a specific way - do it like this

and in case you want the elements of the features block to enter the page as usual - emerging from the bottom of the page upon scroll but only the images to pulse when the pointer gets over them then

remove the Custom CSS snippet from my previous post today and replace it with the snippet in this post Why? The snippet in my previous post controls the way the elements of the features block enter the page upon scroll and the one from this one - the way only the images behave on hover. If you use them both the features block element will first pulse emerging on page and then the images will also pulse on hover .You know - typically I advice fellow forum members to take a glance at the W3C Schools site as reference and a starting point for better understanding the world of web and code. It is however not avaliable in French - just in English

1 - when i pointing the mouse on a image i want she rotate (flip) and stay on back image (with another image) and when i move the mouse next to the image it's the first image come back ... (exemple see link and image) ... for the text i can write it on the back image with Photoshop if it's more simple ... )

2 -that under your inspired guidance I know how to get in a texte by left, right, by rotate etc .... My question : is it possible to get in the texte by right and a image by left in a same block ?

Hi @kalou19 ,Thanks for this one! Working on it gave me an answer to something quite similar I was trying to figure out last week

Anyway - to the point - what you want in request#1 refers to what is known as flipping cards and last week I spent quite a few hours making it work with Mobirise Builder. And nevertheless I did I kind of wanted to make it a bit more Mobirise Builder way - or more user friendly if you prefer. And last night playing around with a snippet for your particular question I think I managed to get together a working Custom CSS only snippet to transform the default Mobirise3 theme features block into a flipping cards keeping all of the editing abilities of the Builder itself. and since I think it might be of use to others too I put it aside in a separate discussion over here

now regarding your question#2 I think there are a fe possible scenarios like for example you might want to have all the images to slide in from the left and all the texts - from the right. In this case this snippet will do the trick for you

or you might want to assign different entrances of the elements of each particular features element. If this is the case you will need a few copies of this snippet

/*this snippet will edit the animations of the first features element
duplicate it as many times as many features elements you have
altering the number in the parenthesis and choosing the appropriate animation */
/*entrance of the image */
.mbr-cards-col:nth-child(1) .card-img .fadeInUp {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
/*entrance of the text */
.mbr-cards-col:nth-child(1) .card-block .fadeInUp {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}

actually as many as the features in your block - pls do note the first feature is 1 but not 0 next 2, 3 and so on.

Now a few words about the questions #1 and #2 combined. In case you alter the features block to transform it into a flipping cards you will actually have its texts behind the images. So if you still need some text under the cards my suggestion would be inserting another features block underneath and turning its images (and some of the captions maybe) off. Also reducing the padding between the two blocks will help for the blending between them Something like this

which however will result the three cards followed by the three text areas of the second features block once the page gets displayed on small screens so think what's the best thing for the vision you're aiming - I'm just saying

Anyway - Thanks a lot! Your question gave me the the tiny push I have needed to solve this flip cards thing I'm playing around with from a while. Hopefully now you'll also be able to achieve the appearance you're after Pls make sure to write back what happened next

Filyov, another question, i can"t modify the size of the image in the block"Solid color intro with image"(i know that i can modify "image size into paramters" but i want my image in "full half" of the page ... see model on the picture ...

Additionally i found something interesting today - the .fadeInUp class is added to the top level elements so they and everything inside them emerge on page the way they are told to - by default - emerging from the bottom - so far nothing new. But if you play around and using the approach from the above snippet add an animation to an element inside the one already animated it gets both the newly defined animation and the one from its parent!

So for example if you assign slideInLeft to a child element of .col-md-7 which contains the image - like .mbr-figure the image will both slide in from left and from bottom of the screen - the result is the image enters the view port diagonally - cool ha!

So what I mean here is animations can be combined assigning different entrances to different level elements and getting some new and fresh entrances. Of course most of the combinations might be a bit confusing for the visitor - we should be careful with that but still it's a whole new and cool area to explore so thanks a lot - that's the second idea I get helping you on your project

Well I guess that's a good start of the day. Hopefully with the snippet from above you'll be able to adjust the block the way you need it - make sure you write back what happened next. And of course - post it in the Showcase section once it's ready (or even before that )

Hi @kalou19in the example you've sent me the image was on the right and the text - on the right so I assumed you need it this way and therefore the block uses the media on right switch turned on. In case you want it with the default alignment you need to alter the snippet a bit - like this

since the elements are aligned the other way you need to adjust the opposite padding setting for the image column - like not paddin-left as it used to be but paddig-right. Additionally maybe it is a good idea the elements to emerge from the edges of the screen corresponding to the position they will take on lit - like what stays on the left side to emerge from the left edge and what take place to the right - to emerge from right. Therefore I also altered the entrance animations - switched the actually

So generally - if your image is meant to be on the right side - use this snippet. If you decide to reverse the order - placing the image to the left (like in the example image you sent before) use the snippet from my previous post - a bit more clear now, right?

I thought about making this one snippet reducing bothe the paddings of the image to zero but I think this is not the best thing to do since there should be a bot free space between the image and the text block - meaning when the one padding is zero, the other one should still remain with some positive value (about 60px if I recall correctly)

So there you have it - please try it out and let me know the results. Also make sure you write back if need any more help - I really enjoy playing around with particular tasks on this project. Furthermore these are common blocks so the Community will benefit from the snippets

Hi @kalou19 ,I must admit I find this question / answer game really amusing since playing around with the examples appearances you provide I come to discover quite interesting things about the way things work in Mobirise Buidler so thank you for that. However this time there will be only one answer - didn't have the time to explore the slider example - sorry Will try to take a look later on tomorrow.

I did however found a way implementing the appearance form this example

with some simple Custom CSS code and a minor tweak inside one of the script files of the build - yep buddy ! this time the intervention will be slightly more complicated - but don't worry - not too much

So let's begin:

For starters - here is how I managed to make the same image / caption / text / button block we are discussing for the last few days look like

and of course since it's responsive web design we're talking about - here it is in smaller screen widths - when the menu has already collapsed (under 768px)

There is a difference in the animations applied - while at large screens the text block emerges from right in smaller screens it maintains the default animated behaviour emerging from the bottom of the page since it already takes its full width. Same counts for the red border - while on the right side on desktop and tablet it moves to the top in mobile.

So generally this is the Custokm CSS script you'll need for this - the media is on the left side and with the media size slider you also adjust the width of the text element and more or less - the height of the entire block - if this is not enough for height - help yourself with the padding sliders

So as a first step pls place this snippet inside the Solid Color Intro With Image block's Custom CSS area and publish your project (not preview - this is important you'll see in a minute ) in a folder on your local hard drive. As the site gets displayed in your browser you'll notice that the text inside the text element animates, but the element itself remains still. That's why I told you to publish and not preview - so we can take care of this

But first - just a few words about how this whole thing works out.

The animation of the elements in our Mobirise Projects gets controlled by a part of the script.js<.code> file which is located in <code>asstes/ theme/ js/ script.js inside the publish folder of your build. Inside this snippet are listed the elements which should take the animation entrance when the animation feature of the project is turned on. To get the appearance from your example without unlocking the HTML and loosing the block's control panel and Inline Editor functionality we are styling a part of the markup which is not included in this "to animate" list so we have to add it manually. To do so you'll need t navigate to the location of the script.js file, open it in your favorite text editor ( as I shared before Notepad# is mine ) scroll down to line 399 and add

, col-md-5do note there is a comma in the beginningBEFORE the single quote character - like this

once you've done that - just save the file and preview the open the published pages once more - you'll notice the semi transparent black field now animates along with the text

Do note since the scripy.js gets generated each time you preview / publish your site this edit will be gone - you'll have to apply it each time before actually uploading your site to server but hey - it's just a simple copy/paste routine so I can't see how it will mess up with your workflow so much. But you'll have the cool effect you wanted, right?

So basically that's the way you can reproduce this cool sliding from aside effect of a semitransparent in Mobirise Builder relatively easy. Hope it will help you get the appearance you're after. As I shared above - it's really fun figuring out the way such particular examples can be done in Builder so if you tihnk of something else - well you know what to do

Another question ... About transparency navbar ... it work perfect with the "classis" navbar.But i can not ajust the CSS code whith the "big" navbar of thème extention ! (see pictures) ... I can change code for bigger navbar but when i scoll the "big" navbar stay "big" ....An idéa ?

Hi guys, After leaving this one for a while playing around with all the cool features the new v4 has to offer today I spotted a question from a fellow forum member about the topic of this very same thread. What I did was poining him to this place but was actually uncertain if the things do take place the same way in v4.

My hunch was the very same approach will be utilized but just to make sure I decided taking a look first and just then saying whatever. The most up to date version now is v.4.1.5 but I suppose this will remain the same as long as FadeInUp is the animation all the blocks utilize and at least until there is no switch about controlling it. In this line of thoughts I might play around a bit trying to create a tweak for setting up the overal animation for a block - the new way blocks are organized is soo cool so I'm really tempted.

Okay - I admit it! I left writing around here and went exploring what if.. I try creating a control defining the way all the elements in a block get animated

But before telling you about it I should share I first tested if the approach for animating the elements on page is the same as it used to be in v3 and the answer is Yes - it is. The animation entrance itself is defined by the class fadeInUp from the animate.css animations library, so everything written above for v3 counts so far for v4 (.1.5)

Now let's make it a bit more interesting - how to define our own dropdown which we can use for defining the way elements in a particular block get animated. In Mobirise Builder v4 it's enough to have the Code Editor Extension and we have full access to all the elements of each block - including the Block Properties Panel itself and still keep all the cool Inline Editor visual editing features. What this mean is we create our own fully functional blocks taking any of the predefined ones as a starting point and build further.

What I;m going to do in this exercise is to create an extra control in the Block's Properties panel and will link it to the class fadeInUp definition in order to redefine it only for the current block. In other words - the newly created control will do the very same thing as you would manually do with the help of the snippet from above but instead of replacing the animation name in the snippet placed in blocks's CSS area manually as we had to up to v.3.12 we will be able to select the desired animation from a pop-up select list.

Over here I will give you the snippet defining a select wit all the possible animations from the animate.css library since one should be able exploring all the possible options but I think in real life situations - like on real projects this list should be greatly shortened to maybe maximum 5 items. I mean a particular site should use not all the animations possible but only 3 maybe 4 of them (added the fifth just to make sure) This will obtain it both interesting but still consistent appearance. Think of it this way - just because an artist has all the colors in the palette this doesn't mean he will use them all to paint a sunset, right?

Okay after we set this straight here is the code for the select control which has defined all the possible animation entrances in the libary:

In order to use it properly you need to place it inside the block's <mbr-parameters> tag. You see right before the block's markup starts there is this Mobirise Builder specific tag which is used to describe the Block's Control panel. Here it is

and the code from the snippet above defining the new control in the Panel should in my humble opinion take place at its very end - over here:

right before the <!-- End block parameters --> comment

Here is how it will look like after the code from the snippet is pasted in - it's too long so the screenshot actually covers the end of it

or if you fee confident enough - you could place it at the place you consider it should logically take - for example I placed it along with some other dropdowns defining the number of tabs and the columns in them for a tabs block. Why exactly tabs block ? No particular reason - just the very first I saw left from something else I was doing this morning

Anyway - as long as you place it as a separate element and not wrapped inside another control - you'll be fine

What this snippet does is creating an extra dropdown with all the possible animation names - as they are in the aninmations-list file from the first posts. Here is how it looks like in the Blosk's Properties panel:

and here it is expanded with all the options we have defined with the snippet:

do note - the values listed int there are the very same as the actual animations names - this is not a must - if you prefer them nicely called - just later their display names in the snippet altering the second occurance - these are names colored in white in all the screeshots from above

Now that we have the working select element, let's get use of it linking its value to the animation class definition. This is done with the very same snippet from the firs posts which redefines the anination globally for the entire block. This time however as values in the declarations we will place not a particular animation name but the value of the select element.

In other words the Custom CSS cnippet you also need to place in block's CSS Editor field is:

Personally I prefer doing it at the very botom of the field- after all the rules already defined so I know what's been written by whom

That's it! We're done!

To make sure it's working preview your project in browser and you'll see the entrance animation changed. Alter the newly created select's value, preview again and you'll see the animation's changed.

Optionally you can change the initial animation which is being set by the select snippet - just remove the selected attribute from the first option and add it to the one you think should have it

Final words: This way you can define all the possible animations form the animate.css library for a particular block. Just because you can this does not mean you should use all of them, An interesting side effect I noticed - not pretty sure if it actually is so but I think I should mention it as well - it kind of seamed the preview took a bit longer after I added this animation mega select to the block. And it is a single cuctom select in a sanbox project consisting of two blocks. What I'm trying to say it if you get tempted just pasting the whole snippet around - DON'T or you're risking slowing down the work of your Builder with the project you're doing this on.

I'll be frank with you guys - I'm quite excited about all this that's going on. Just take s look back about an year ago and look now - The Builder has traveled such a long path in just 12 months! Last year about this time the use of animation feature was introduced for the first time and now we can create our own controls defining which animation a block should use! Just how cool is that!

I really hope you'll enjoy the new snippets at least as much as I did playing around with them. Pls make sure you narrow down the number of animations actually used in a real life project and of course - write back sharing some experience!

Playing around with this monstrous select element was one of the very first attempts I made in creating some controls in the Block's Properties panel on my own. As far as I remember this was pretty much in the dawn of the v4 era when the Builder was still in beta and under development. So yesterday when I had to use an extra LESS function in order to make a value from a select element get fetched and displayed properly I thought it would be a good idea coming back here and checking out if this still works the way I have tried it back in the day.

And the good news is it still works the same in v4.6.3

So I would very much love to hear if someone has implemented it and how it went

Actually now, after some time I'm thinking - having pretty much ALL the Animate CSS effects is no doubt cool, but that's the general case, the most complete one. I don't think however a site having more than a few of these will actually be pleasant for the viewers to browse around - maybe that's been the reason for putting only one animation behing the Animated feature at first place

So my friendly advice on implementing this would be: Spend some time with the Animate CSS site or experiment with the all animations block for a while until you manage to narrow the effects to just a few which will serve you best according to the particular project. Then - just make a smaller drop down with only them, spread it wherever needed and enjoy! - just thinking aloud here. On the other hand the full drop down was slowing the beta a bit but I didn't notice any performance changes when I tested it today with a stable version

Anyway - glad to find it still working, hope these few words will actually be of use as well

Hi Filyov,I just came across your fabulous tips concerning animation controls. It really helped me getting some things done. Many thanks for that!

However, there's one problem I still have and couldn't resolve with your tips. Whenever I change the animations let's say for the headers to slide in, all animations take place, when the page is loaded. Some of my headers are not in the viewport until the visitor scrolls down. And that's why, these animations can't be seen by the visitors. What I try to achieve is, that these animations take place, when the user is scrolling down and the reference block is in the viewport.

Could you please help me with this issue? Or at least point me in the right direction? Thank you very much!

sorry for the late reply - was away in the woods for about a month - no Internet, sometimes no cellular coverage, and as you might figure upon my return all kind of stuff needed to be taken care of so...

Anyway - It's interestiong thins you're saying - the animations triggering before the block entering the viewport. As far as I can recall - this is a feature controlled by the animation script itself - checking each one block's position and adding the needed classes when it just gets to appear on screen - pretty much as the counters starting to spin numbers advancing to the defined position once the block gets seen. Not pretty sure, but here is what - I think this might have been a temporary glitch in the application. I'm saying this exactly due to the counters behavior in the earlier versions - they were starting to spin upon page load so if you had such block down on page it displayed with the final numbers. I recall I've seen it acting this way in the earlier versions, then it just got taken care of and not works quite properly and what's mot important - timely

What I'm messing up in the above workarounds is redefining the rules in the class that the animation script adds to the animated elements when it does. I did not alter the animating script itself since it's a part of the Builder and as such - due of changes upon each update - altering the script I risk making anyone using the workaround checking if everything works correctly upon each update which I think is might become a pain at certain point.

I believe the issue you're sharing you had might have been due to something similar to the counters glitch and my hope is it have been already resolved itself. So what I did was to briefly drag-drop a few headers blocks in the project I played around yesterday with, inserted the animation control's code and the needed CSS rule binding it to the animated class. Next I assigned random animations to each header block and prevewed the whole thing. What pleased me to see was it was actually working as supposed to - each block anumated upon entering the viewport and with the animation assigned to it.

Now when it's animations we're talking I think the best way illustrating the result is with I short video and so I did - here it is:

do note - the first blocks don't have the custom animation control - I initially open the Code Editor to show that - ant that's the reason the elements in them animate the regular way - as fadeInUp

Additionally - that's just a reminder - in order this to work , not only the custom control should be taking place in the mbr-parameters tag but also the Custom CSS binding the fadeInUp class with whatever defined in it - like this

The particular placing of the control and the CSS rule is not of imortance as long as they are both there.

So @raemsbrim my friendly suggestion would be - give it a try now in case you still need it this way - I believe it will work properly