UserAnimations

This stylesheet defines a set of generic motion animations to be used on pages by just editing the page's source. While admins can access the wiki's CSS to define animations as they wish, normal users cannot. By importing this stylesheet, admins can allow normal users to add animation to elements.
These animations can be used on any page in a wiki, but they were made mainly with userpages in mind, for users who like to use code to decorate their pages.
== ==
== Basic usage ==
The general form for defining animation on an element would be
 SOME IMAGE OR TEXT 
where ua-SOME-ACTION would be replaced with one of the defined actions, for example ua-spin.
For animating one or few words inside a paragraph, tags can be used instead of 
Only the word hello would be animated.
=== List of available actions ===
* ua-up
* ua-down
* ua-updown
* ua-downup
* ua-left
* ua-right
* ua-leftright
* ua-rightleft
* ua-swing
* ua-spin-clockwise (or ua-spin for short)
* ua-spin-counterclockwise
* ua-grow
* ua-shrink
* ua-growshrink
* ua-shrinkgrow
=== Examples ===
Here are a few examples. The demonstration won't work on mobile view ([ switch to desktop view]), or if you disabled DemoScripts on your Preferences.
{ class="article-table" style="width:100%;"
-
! colspan="2" Jumping
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" Moving left and right
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" Swinging
-
 Let's go with words this time.
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" Let's go with words this time.
-
! colspan="2" Spinning
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" Shrink and grow
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" (This example belongs to the #Advanced usage section, which is yet to be written) "Free" animation of some properties - currently CSS transformations and relative positionning of top and left
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
== Hover effects ==
Beside the list of classes related to the various actions, there are three additional classes that can make the animation controlled by mouse hover.
* ua-hover-pause
* ua-hover-play
* ua-hover-only
ua-hover-pause causes the animation to pause when the user hovers over the element with the mouse cursor. Once the cursor moves away, it will continue from the point it was.
ua-hover-play causes the animation to only play when the user hovers over the element, and pause each time the cursor moves away. Again, it will keep the point it was on.
ua-hover-only causes the animation to be entirely disabled until the user hovers over the element. Once the cursor moves away, the element will immediately return to it's initial state. When hovered again, it will start from the beginning.
Here is a demonstration. Hover over the element to see the effect:
{ class="article-table" style="width:100%;"
-
! colspan="2" Pausing when hovered
- 
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" Playing when hovered
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" Only activate the animation when hovered
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
== Customizing the animation ==
=== Customizing animation properties ===
By default, the animations of UserAnimations play repeatedly, with each round taking 3 seconds. Those defaults can be overriden by setting some properties in the style="..." section of the element.
; Animation-duration
The most common thing to customize is probably the duration of the animation - which naturally affects how fast it plays. This can be done by setting the animation-duration property. Here is a demonstration:
{ class="article-table" style="width:100%;"
-
! colspan="2" Fast jumping (0.2 second)
-
 < style="white-space:pre-line;">style="animation-duration:0.2s;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" Default rate (3 seconds)
-
 [[File:Ball.png|100px]]
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
! colspan="2" Slow jumping (10 seconds)
-
 < style="white-space:pre-line;">style="animation-duration:10s;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
; Animation-iteration-count
By setting the animation-iteration-count property, it is possible to limit the number of times the animation plays. For example:
{ class="article-table" style="width:100%;"
-
! colspan="2" Setting the animation to 3 iterations
-
 < style="white-space:pre-line;">style="animation-iteration-count:3;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
; Animation-delay
The animation-delay property adds a delay before the animation starts playing. For example:
{ class="article-table" style="width:100%;"
-
! colspan="2" Adding a two-seconds delay
-
 < style="white-space:pre-line;">style="animation-delay:2s;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
; Transform-origin
The transform-origin property is not specifically related to animations, but it affects the transformations which are used for the animations in this stylesheet. The property can set the "pinning point" of the change, which is by default in the center of the element, to another point. It has no effect on simple movements like up or right, but it has a clear effect on other changes. Here is a demonstration:
{ class="article-table" style="width:100%;"
-
! colspan="2" Spinning around the upper-left corner
-
 < style="white-space:pre-line;">style="transform-origin:0 0;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
There are other animation-related properties (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations), but customizing them would require a deeper understanding of how CSS animations work and what are the default settings provided by this stylesheet.
A note about combining properties: Each element has only one style section for all properties. When combining several properties, separate them with a semicolon. For example:
=== Changing movement distance ===
The distance of motions like ua-up, ua-right etc. is defined by default to be 100% of the elements width or height. That means, if the element is 50 pixels wide it will move 50 pixels to the right. It is possible to set another distance by setting the CSS variable --ua-distance. This is done in the style section as well. For example:
{ class="article-table" style="width:100%;"
-
 < style="white-space:pre-line;">style="--ua-distance:300%;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
 < style="white-space:pre-line;">style="--ua-distance:500px;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
It worths noting that this will not work for some older browsers, most notably Internet Explorer. However Fandom in general is not really compatible with those browsers...
=== Changing scale factors for grow/shrink ===
Similar to movement distance, it is possible to change the scale factor for grow or shrink by setting the --ua-distance CSS variable. For example:
{ class="article-table" style="width:100%;"
-
 Grow by X10
-
 < style="white-space:pre-line;">style="--ua-scale-factor:10;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
-
 Slight shrink only to 70%
-
 < style="white-space:pre-line;">style="--ua-scale-factor:0.7;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
For ua-growshrink and ua-shrinkgrow, the factor is either added or subtracted from 1. For example:
{ class="article-table" style="width:100%;"
-
 Scale by +/- 80%
-
 < style="white-space:pre-line;">style="--ua-scale-factor:0.8;">[[File:Ball.png|100px]]<>
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
The default values are 2 for grow, 0.1 for shrink, and 0.5 for growshrink or shrinkgrow.
== Advanced usage ==
=== Combining multiple effects ===
Combining multiple effects is not possible by using multiple classes on the same element (this would lead to only one animation applied, possibly with wrong properties), but it is possible by nesting elements.
For example, let's assume we want our lovely demo ball to look like someone actually kicked it, and not just a normal kick — a spin kick. That includes multiple motions at the same time — it should both move up, move to the side, and spin.
For this, we will need to nest 3 elements one inside the other:
{ class="article-table" style="width:100%;"
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
Okay, not bad as a start, but we should probably adjust some properties:
{ class="article-table" style="width:100%;"
 class="mw-collapsible mw-collapsed" data-expandtext="Show demo" data-collapsetext="Hide demo" 
}
(to be continued...)
== Changelog ==
; May 10, 2021
: First created