Interactions and animations are not easy at all. Here's why Xtend UI is not the usual frontend library, it's designed to make hard javascript tasks effortless, which take days or even months to implement and that needs various iterations and complex use cases to do properly.
Performances
-
Every javascript component loads its code and executes it only when inside viewport. This improves drastically the pagespeed value of INP (Interaction to Next Paint) and other pagespeed values relative to the amount of javascript code loaded and executed.
-
The initialization and execution of components are optimized for perfomance, for example with
setTimeout(fn, 0)to not block the javascript event loop. -
The slider component automatically hides slides outside of the window, and shows them when they enter the window, all of this with Xt.observe. This improves the performances of sliders especially when they have many or complex slides and especially on slow mobiles.
Accessibility
A11y standards with automatic Aria attributes and keyboard navigation.
For more info on accessibility practices used in Xtend UI see ARIA Design Pattern Examples, digitala11y.
Toggle
Toggle components have automatic a11y attributes and keyboard navigation, and they can be customized granularly, see drop accessibility, overlay accessibility, slider accessibility, toggle accessibility, tooltip accessibility.
Prefers Reduced Motion
See animation setup to disable css and js animations when the the user has activated "Prefers Reduced Motion".
Global
Javascript
-
Mount javascript code on nodes when they are added to DOM with vanilla html and js with Xt.mount.
-
Animate nodes with Tailwind CSS variants with Xt.on and Xt.off.
-
Customizable default options for all components of the same type with Xt.options.
Toggle
Toggle components share the same base code and features, they are used for all interactions that toggle a class and respond to it, they are drop, overlay, slider, toggle, tooltip.
Interaction
You can customize toggle components interaction in many ways, here's a simplified rundown of what's possible.
-
You can filter elements and targets dynamically.
-
You can group elements and targets to create many to many interactions between elements and targets.
-
You can specify min and max concurrent activations.
-
You can set the javascript event that respond to the interaction.
See drop interaction, overlay interaction, slider interaction, toggle interaction, tooltip interaction for more info.
Animation
You can animate all toggle components with Tailwind CSS variants or css or js, whatever you prefer or need to use. Toggle advanced animation system support also delay, queue, collapse.
See drop animation, overlay animation, slider animation, toggle animation, tooltip animation for more info.
Hash
Sometimes you need to save the state of a component in the location hash, to be linkable and more usable. With all the toggle components you can link the activation in the url hash.
See overlay hash, slider hash, toggle hash for more info.
Scrollto
Sometimes you need to automatically scroll to the activated nodes, you can use the Scrollto component in conjunction with any toggle component. It also integrates with the toggle hash interaction.
See scrollto toggle for more info.
Addon
Many advanced usage of toggle components are in the addon pages.
-
Slider notable addons are navigation sides, status. See slider addon for more info.
-
Tooltip notable addons are swap. See tooltip addon for more info.
Scroll
InfiniteScroll
InfiniteScroll is a plugin that makes infinitescroll easy, also activable on click instead of scroll and it automatically prefetches next page.
See infinite-scroll for more info.
ScrollTrigger
Xtend UI uses gsap for javascript animations, not only that but it relies on Gsap ScrollTrigger to do all sorts of interaction on page scroll.
See fade, sticky, parallax for more info.
Scrollto
ScrollTo is a plugin that manages interaction scroll, by setting it up it automatically reacts to hash links referring to ids on click and page load or can get triggered on any node, with automatic activation on scroll.
See scrollto for more info.
Stickyflow
Stickyflow is a plugin that enhances css sticky position by making it scroll the content also if overflowing the window.
See stickyflow for more info.
Core
All core components are primitive UI elements that promote creativity with its support for complex design.
Card
The card component is used in many other components to display content inside a box. It's simple, modular and fully customizable. See card for more info.
Link
The link component has cssinjs customizable styles for automatic styling of blank html links. See link for more info.
List and Row
The list and row components are useful to space any element with margins or paddings, they also space vertically. When you want to space a child element within flex they provide simple spacing classes for browsers that still don't support flex gap. See list, row for more info.
Media
The media component is useful to enhance html assets. It can be used with img, video, iframe tags to properly fit to aspect ratio, display a skeleton loader or just as a base standard markup for animating assets. See media for more info.
Typography
The typography component has cssinjs customizable styles for automatic styling of blank html content tags. See typography content for more info.
Addon
- The media component has some useful pagespeed optimization addon iframe lazy loading, html5 video autoplay lazy and html5 video media matches. See media addon for more info.
Form
Xtend UI forms have variable size depending on parent font size so they are easy to make bigger or smaller.
They support various layout. See form layout for more info.
Addon
-
You can have custom validation on form submit with custom indications or notes and automatic scroll on errors. See form validation for more info.
-
You can have checkboxes and radio styled with complete freedom. See form checks custom for more info.
-
You can have automatic loader on all forms without changing a single line of html. See form loader for more info.
Other
Group Nav Tabs Toolbar
The group nav tabs and toolbar components are components that use list to display buttons, inputs and other content in a certain way. See group, nav, tabs, toolbar for more info.
Pagespeed optimizations
-
Media iframe lazy loading.
-
Media html5 video autoplay lazy.
-
Media html5 video media matches.
-
InfiniteScroll prefetch automatically next page.
Themes
Xtend UI themes are focused on user experience, interaction and animation instead of design. See themes for more info.