My technicians use my surveys in a variety of outdoor conditions and times of day, and though I have done my best to come up with a color palette for our surveys that fits all prevailing conditions, I am still constantly asked to provide an inverse-able option. 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.I feel quite desperate for a Light Mode/Dark Mode toggle in the Survey123 field app. Animating the initial appearance of elements on a page is easy. Media galleries can clearly show which items are being added or removed with a small animation in and out.Ĭheck out how the xyz-nested class and delay and stagger utilities allow you to orchestrate sequential animations. appear specific utilities let you differentiate the initial animation from subsequent changes. 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. ![]() Tabs imply content hidden off-screen to the left or right of the current tab. 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 ExampleĪ chat component feels much more natural if each text moves in from the side of its respective owner. 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. ? 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. Utilities can be applied specifically to one of the animation direction variants In, Out, and Appear by prepending the utility with the variant name. 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". Check out the active classes section to learn more about using different utilities when animating in or out. ConflictsĬertain utilities won't work with other utilities if they both change the same property. For example xyz="up down" will not work because both up and down change the -xyz-translate-y variable. VariablesĮvery utility sets one or more AnimXYZ variables. If you manually set the variable on an element, it will take precedence over the value set by any utilities. You can combine utilities with variables for more custom animations. 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. xyz-in animates elements from the values set by XYZ utilities and variables, while. ![]() ![]() xyz-out animates elements to those values.įor example an element with. xyz-in and xyz="fade" will fade from 0 to its natural opacity, while. ![]() 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. Utilities and variables have in and out variants which apply only to the corresponding direction. 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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |