The following Slot (see it in the Navigator) contains the minified code for optimal performance.
Unminified code
The following Slot (see it in the Navigator) is not minified. If you intend on modifying the code then use this but be sure to minify it when you're done.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Scroll Down
Intersection Trigger
Animations play when the instance enters the viewport, running from start to finish. On each box there is an attribute data-ani and the value is whatever is in the animated box. By default, their animation plays once, but that can be customized (see docs).
data-ani="fade"
fade
slide-up
data-ani="slide-up"
slide-down
data-ani="slide-down"
slide-left
data-ani="slide-left"
slide-right
data-ani="slide-right"
zoom
data-ani="zoom"
flip-y
data-ani="flip-y"
flip-x
data-ani="flip-x"
expand
data-ani="expand"
Progress Trigger
Animations progress as the instance moves through the viewport. On each box there is an attribute data-ani-progress and the value is whatever is in the animated box. By default, their animation plays every time, but that can be customized (see docs).
fade
data-ani-progress="fade"
slide-up
data-ani-progress="slide-up"
slide-down
data-ani-progress="slide-down"
slide-left
data-ani-progress="slide-left"
slide-right
data-ani-progress="slide-right"
zoom
data-ani-progress="zoom"
flip-y
data-ani-progress="flip-y"
flip-x
data-ani-progress="flip-x"
Radix State Trigger
All animation effects are compatible with Radix Components, which have various states such as active/inactive or open/closed. The animations automatically target these states, allowing you to use data-ani like any other component. See docs for information on which instance to apply the attributes to.
Yes. It adheres to the WAI-ARIA design pattern.
Apply An Animation To All Children
To animate all children within a parent instance, instead of applying data-ani to each child, apply the animation to the parent instance and add data-ani-children="true". This applies the animation to each direct child rather than the parent itself. (see docs).
The following Slot (see it in the Navigator) contains the minified code for optimal performance.
Unminified code
The following Slot (see it in the Navigator) is not minified. If you intend on modifying the code then use this but be sure to minify it when you're done.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Ani Motion Readme
Ani Motion is a lightweight (8.59 KB including CSS) library that adds minimalistic animations to your Webstudio site, including on Radix Components.
How to use it
Insert the "Code" section on every page you want to use animations
Add the attribute data-ani or data-ani-progress to any instance and give it a value such as fade
For triggering all children, also add data-ani-children with value true
The following Slot (see it in the Navigator) contains the minified code for optimal performance.
Unminified code
The following Slot (see it in the Navigator) is not minified. If you intend on modifying the code then use this but be sure to minify it when you're done.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Duplicate 'Stars Container' and change the value of the 'group-name' variable to allow multiple ratings on page.
Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.
Link text you can edit
