![formz xyz absolute formz xyz absolute](https://pm1.narvii.com/6930/430db0438b18c0b80ad5c6f9879b63014a55fff4r1-740-1094v2_hq.jpg)
For example an element with xyz="in-left in-rotate-left out-right out-rotate-right" will slide/rotate in from the left and slide/rotate out to the right. Utilities and variables have in and out variants which apply only to the corresponding direction. xyz-out will fade it from its natural opacity to 0.īy default AnimXYZ utilities and variables apply to both the in and out classes, but you can set specific animations for each direction. xyz-in and xyz="fade" will fade from 0 to its natural opacity, while. xyz-out animates elements to those values.įor example an element with. xyz-in animates elements from the values set by XYZ utilities and variables, while. For example xyz="fade tall" style="-xyz-rotate-z: 33deg" will make an element fade and change height by their default amounts, and rotate in and out by 33 degrees.ĪnimXYZ animates elements in and out when activated by their respective classes. You can combine utilities with variables for more custom animations. If you manually set the variable on an element, it will take precedence over the value set by any utilities. VariablesĮvery utility sets one or more AnimXYZ variables. For example xyz="up down" will not work because both up and down change the -xyz-translate-y variable. ConflictsĬertain utilities won't work with other utilities if they both change the same property. Check out the active classes section to learn more about using different utilities when animating in or out. For example if you wanted a longer duration and a different translate direction coming in versus out you could set xyz="fade up out-down appear-big duration-5 in-duration-10". Utilities can be applied specifically to one of the animation direction variants In, Out, and Appear by prepending the utility with the variant name. ? fade up-100% flip-down flip-right-50% rotate-left-100% origin-bottom duration-10 stagger Direction Variants ? fade front-3 flip-down-50% duration-10 stagger-5 Spin an element while collapsing it to a sliver, expand an element while it swings in from its corner, the possibilities are endless! Here are just a few of the many combinations you can do: For example xyz="up left small" will make an element move to and from the upper left while expanding in and contracting out. Chat ExampleĪnimXYZ has the unique ability to mix and match animation utilities, letting you compose an enormous variety of animations without any extra code. Tabs ExampleĪ chat component feels much more natural if each text moves in from the side of its respective owner. With a dynamic xyz property determined by the tab's index you can make tab content slide in and out from the direction you expect it to. Tabs imply content hidden off-screen to the left or right of the current tab. Usually modals just fade in at the same time as the overlay, but by adding an in-delay to the modal and an out-delay to the overlay you can make the animation feel much more alive. appear specific utilities let you differentiate the initial animation from subsequent changes. Media galleries can clearly show which items are being added or removed with a small animation in and out.
![formz xyz absolute formz xyz absolute](https://vignette.wikia.nocookie.net/yugioh/images/a/a7/YukiOnnatheAbsoluteZeroMayakashi-DUOV-EN-1E-OP.png)
Check out how the xyz-nested class and delay and stagger utilities allow you to orchestrate sequential animations. Animating the initial appearance of elements on a page is easy. Moving squares around is all well and good, but what do you use AnimXYZ for in the real world? Here are just a few examples of common ways you can use AnimXYZ to make your UI more lively and interesting.Įmphasize what someone should look at first, or give a feature list some life.