Animate
A wrapper for animations, made with Tailwind CSS. Works seamlessly with any children component.
animation
Hover animations (87)
Blink
BlurredFadeIn
BounceFadeIn
BounceHorizontal
BounceVertical
BounceCustom
ContractHorizontally
ContractVertically
ExpandHorizontally
ExpandVertically
FadeIn
FadeInDown
FadeInLeft
FadeInRight
FadeInUp
FadeOut
FadeOutUp
FadeOutDownV2
FadeOutLeft
FadeOutRight
Flash
FlashV0
FlipHorizontal
FlipVertical
FlipX
FlipY
FlipInY
FlipInX
FlipOutY
FlipOutX
Float
Hang
Heartbeat
HorizontalVibration
Jiggle
JiggleV0
Jump
Pop
PulseCustom
PulseFadeIn
Rise
RollIn
RollOut
Rotate180
Rotate360
Rotate90
RotateIn
RotateOut
RotationalWave
RubberBand
RubberBandV0
Scale
Shake
ShakeV0
Sink
Skew
SlideDown
SlideDownAndFade
SlideInBottom
SlideInLeft
SlideInRight
SlideInTop
SlideLeft
SlideLeftAndFade
SlideOutBottom
SlideOutLeft
SlideOutTop
SlideRight
SlideRightAndFade
SlideRotateIn
SlideRotateOut
SlideUp
SlideUpAndFade
SlideUpFade
SpinClockwise
SpinCounterClockwise
Sway
Swing
SwingDropIn
SwingV0
Squeeze
Tada
TiltHorizontal
Vibrate
Wobble
ZoomIn
ZoomOut
use leptos::prelude::*;
use crate::components::ui::animate::{Animate, AnimateHoverVariant};
use crate::components::ui::card::{Card, CardDescription};
use crate::components::ui::containers::Grid3;
use crate::components::ui::headings::H3;
#[component]
pub fn DemoAnimate() -> impl IntoView {
view! {
<div class="my-4 space-y-6">
<H3 class="text-center">{format!("Hover animations ({})", HOVER_ANIMATIONS.len())}</H3>
<Grid3>
{HOVER_ANIMATIONS
.iter()
.map(|(variant, description)| {
view! {
<Card class="flex flex-col items-center gap-4">
<Animate hover_variant=*variant>
<AnimatedChildren />
</Animate>
<CardDescription>{*description}</CardDescription>
</Card>
}
})
.collect::<Vec<_>>()}
</Grid3>
</div>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
// * 💁 Could be literally anything you want to animate :)
#[component]
fn AnimatedChildren() -> impl IntoView {
view! {
<div
class="p-4 rounded-lg bg-primary/30 size-20"
style="animation-iteration-count: infinite;"
/>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ CONSTANTS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
const HOVER_ANIMATIONS: &[(AnimateHoverVariant, &str)] = &[
(AnimateHoverVariant::Blink, "Blink"),
(AnimateHoverVariant::BlurredFadeIn, "BlurredFadeIn"),
(AnimateHoverVariant::BounceFadeIn, "BounceFadeIn"),
(AnimateHoverVariant::BounceHorizontal, "BounceHorizontal"),
(AnimateHoverVariant::BounceVertical, "BounceVertical"),
(AnimateHoverVariant::BounceCustom, "BounceCustom"),
(
AnimateHoverVariant::ContractHorizontally,
"ContractHorizontally",
),
(
AnimateHoverVariant::ContractVertically,
"ContractVertically",
),
(
AnimateHoverVariant::ExpandHorizontally,
"ExpandHorizontally",
),
(AnimateHoverVariant::ExpandVertically, "ExpandVertically"),
(AnimateHoverVariant::FadeIn, "FadeIn"),
(AnimateHoverVariant::FadeInDown, "FadeInDown"),
(AnimateHoverVariant::FadeInLeft, "FadeInLeft"),
(AnimateHoverVariant::FadeInRight, "FadeInRight"),
(AnimateHoverVariant::FadeInUp, "FadeInUp"),
(AnimateHoverVariant::FadeOut, "FadeOut"),
(AnimateHoverVariant::FadeOutUp, "FadeOutUp"),
(AnimateHoverVariant::FadeOutDownV2, "FadeOutDownV2"),
(AnimateHoverVariant::FadeOutLeft, "FadeOutLeft"),
(AnimateHoverVariant::FadeOutRight, "FadeOutRight"),
(AnimateHoverVariant::Flash, "Flash"),
(AnimateHoverVariant::FlashV0, "FlashV0"),
(AnimateHoverVariant::FlipHorizontal, "FlipHorizontal"),
(AnimateHoverVariant::FlipVertical, "FlipVertical"),
(AnimateHoverVariant::FlipX, "FlipX"),
(AnimateHoverVariant::FlipY, "FlipY"),
(AnimateHoverVariant::FlipInY, "FlipInY"),
(AnimateHoverVariant::FlipInX, "FlipInX"),
(AnimateHoverVariant::FlipOutY, "FlipOutY"),
(AnimateHoverVariant::FlipOutX, "FlipOutX"),
(AnimateHoverVariant::Float, "Float"),
(AnimateHoverVariant::Hang, "Hang"),
(AnimateHoverVariant::Heartbeat, "Heartbeat"),
(
AnimateHoverVariant::HorizontalVibration,
"HorizontalVibration",
),
(AnimateHoverVariant::Jiggle, "Jiggle"),
(AnimateHoverVariant::JiggleV0, "JiggleV0"),
(AnimateHoverVariant::Jump, "Jump"),
(AnimateHoverVariant::Pop, "Pop"),
(AnimateHoverVariant::PulseCustom, "PulseCustom"),
(AnimateHoverVariant::PulseFadeIn, "PulseFadeIn"),
(AnimateHoverVariant::Rise, "Rise"),
(AnimateHoverVariant::RollIn, "RollIn"),
(AnimateHoverVariant::RollOut, "RollOut"),
(AnimateHoverVariant::Rotate180, "Rotate180"),
(AnimateHoverVariant::Rotate360, "Rotate360"),
(AnimateHoverVariant::Rotate90, "Rotate90"),
(AnimateHoverVariant::RotateIn, "RotateIn"),
(AnimateHoverVariant::RotateOut, "RotateOut"),
(AnimateHoverVariant::RotationalWave, "RotationalWave"),
(AnimateHoverVariant::RubberBand, "RubberBand"),
(AnimateHoverVariant::RubberBandV0, "RubberBandV0"),
(AnimateHoverVariant::Scale, "Scale"),
(AnimateHoverVariant::Shake, "Shake"),
(AnimateHoverVariant::ShakeV0, "ShakeV0"),
(AnimateHoverVariant::Sink, "Sink"),
(AnimateHoverVariant::Skew, "Skew"),
(AnimateHoverVariant::SlideDown, "SlideDown"),
(AnimateHoverVariant::SlideDownAndFade, "SlideDownAndFade"),
(AnimateHoverVariant::SlideInBottom, "SlideInBottom"),
(AnimateHoverVariant::SlideInLeft, "SlideInLeft"),
(AnimateHoverVariant::SlideInRight, "SlideInRight"),
(AnimateHoverVariant::SlideInTop, "SlideInTop"),
(AnimateHoverVariant::SlideLeft, "SlideLeft"),
(AnimateHoverVariant::SlideLeftAndFade, "SlideLeftAndFade"),
(AnimateHoverVariant::SlideOutBottom, "SlideOutBottom"),
(AnimateHoverVariant::SlideOutLeft, "SlideOutLeft"),
(AnimateHoverVariant::SlideOutTop, "SlideOutTop"),
(AnimateHoverVariant::SlideRight, "SlideRight"),
(AnimateHoverVariant::SlideRightAndFade, "SlideRightAndFade"),
(AnimateHoverVariant::SlideRotateIn, "SlideRotateIn"),
(AnimateHoverVariant::SlideRotateOut, "SlideRotateOut"),
(AnimateHoverVariant::SlideUp, "SlideUp"),
(AnimateHoverVariant::SlideUpAndFade, "SlideUpAndFade"),
(AnimateHoverVariant::SlideUpFade, "SlideUpFade"),
(AnimateHoverVariant::SpinClockwise, "SpinClockwise"),
(
AnimateHoverVariant::SpinCounterClockwise,
"SpinCounterClockwise",
),
(AnimateHoverVariant::Sway, "Sway"),
(AnimateHoverVariant::Swing, "Swing"),
(AnimateHoverVariant::SwingDropIn, "SwingDropIn"),
(AnimateHoverVariant::SwingV0, "SwingV0"),
(AnimateHoverVariant::Squeeze, "Squeeze"),
(AnimateHoverVariant::Tada, "Tada"),
(AnimateHoverVariant::TiltHorizontal, "TiltHorizontal"),
(AnimateHoverVariant::Vibrate, "Vibrate"),
(AnimateHoverVariant::Wobble, "Wobble"),
(AnimateHoverVariant::ZoomIn, "ZoomIn"),
(AnimateHoverVariant::ZoomOut, "ZoomOut"),
];
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_animateui add animateUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/animate.rs
use leptos::prelude::*;
use tw_merge::*;
#[derive(TwClass, Clone, Copy)]
#[tw(class = "flex items-center justify-center w-full")]
pub struct Animate {
pub variant: AnimateVariant,
pub hover_variant: AnimateHoverVariant,
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn Animate(
#[prop(into, optional)] variant: Signal<AnimateVariant>,
#[prop(into, optional)] hover_variant: Signal<AnimateHoverVariant>,
#[prop(into, optional)] class: Signal<String>,
#[prop(into, optional)] style: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
let variant = variant.get();
let hover_variant = hover_variant.get();
let animate = Animate {
variant,
hover_variant,
};
animate.with_class(class.get())
});
view! {
<div class=class style=style>
{children()}
</div>
}
}
#[component]
pub fn AnimateGroup(
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| tw_merge!("w-full", class()));
view! { <div class=class>{children()}</div> }
}
#[component]
pub fn AnimateGroupItem(
#[prop(into, optional)] variant: Signal<AnimateVariant>,
#[prop(into, optional)] hover_variant: Signal<AnimateHoverVariant>,
#[prop(into, optional)] class: Signal<String>,
#[prop(into)] delay_ms: Signal<u32>,
#[prop(default = "forwards")] fill_mode: &'static str,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
let variant = variant.get();
let hover_variant = hover_variant.get();
let animate = Animate {
variant,
hover_variant,
};
animate.with_class(class.get())
});
let style = Memo::new(move |_| {
let delay = delay_ms.get();
format!("animation-delay: {delay}ms; animation-fill-mode: {fill_mode};")
});
view! {
<div class=class style=style>
{children()}
</div>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ VARIANTS ✨ */
/*.:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[derive(TwVariant)]
pub enum AnimateVariant {
#[tw(default, class = "")]
Default,
#[tw(class = "opacity-0 animate-fade_up")]
FadeUp,
#[tw(
class = "animate-fade_out_down [animation-range:0px_300px] [animation-timeline:scroll()] supports-no-scroll-driven-animations:animate-none"
)]
AnimateScrollFadeOut,
#[tw(
class = "animate-make_it_bigger [animation-range:0%_60%] [animation-timeline:--quote] [view-timeline-name:--quote] supports-no-scroll-driven-animations:animate-none"
)]
AnimateScrollBigger,
}
#[derive(TwVariant)]
pub enum AnimateHoverVariant {
#[tw(default, class = "")]
Default,
#[tw(class = "hover:animate-blink")]
Blink,
#[tw(class = "hover:animate-blurred_fade_in")]
BlurredFadeIn,
#[tw(class = "hover:animate-bounce_fade_in")]
BounceFadeIn,
#[tw(class = "hover:animate-bounce_horizontal")]
BounceHorizontal,
#[tw(class = "hover:animate-bounce_vertical")]
BounceVertical,
#[tw(class = "hover:animate-bounce_custom")] // TODO: check
BounceCustom,
#[tw(class = "hover:animate-contract_horizontally")]
ContractHorizontally,
#[tw(class = "hover:animate-contractVertically")]
ContractVertically,
#[tw(class = "hover:animate-expand_horizontally")]
ExpandHorizontally,
#[tw(class = "hover:animate-expand_vertically")]
ExpandVertically,
#[tw(class = "hover:animate-fade_in")]
FadeIn,
#[tw(class = "hover:animate-fade_in_down")]
FadeInDown,
#[tw(class = "hover:animate-fade_in_left")]
FadeInLeft,
#[tw(class = "hover:animate-fade_in_right")]
FadeInRight,
#[tw(class = "hover:animate-fade_in_up")]
FadeInUp,
#[tw(class = "hover:animate-fade_out")]
FadeOut,
#[tw(class = "hover:animate-fade_out_up")]
FadeOutUp,
#[tw(class = "hover:animate-fade_out_down_v2")] // TODO: V2
FadeOutDownV2,
#[tw(class = "hover:animate-fade_out_left")]
FadeOutLeft,
#[tw(class = "hover:animate-fade_out_right")]
FadeOutRight,
#[tw(class = "hover:animate-flash")]
Flash,
#[tw(class = "hover:animate-flash_v0")] // TODO
FlashV0,
#[tw(class = "hover:animate-flip_horizontal")]
FlipHorizontal,
#[tw(class = "hover:animate-flip_vertical")]
FlipVertical,
#[tw(class = "hover:animate-flip_x")]
FlipX,
#[tw(class = "hover:animate-flip_y")]
FlipY,
#[tw(class = "hover:animate-flip_in_y")]
FlipInY,
#[tw(class = "hover:animate-flip_in_x")]
FlipInX,
#[tw(class = "hover:animate-flip_out_y")]
FlipOutY,
#[tw(class = "hover:animate-flip_out_x")]
FlipOutX,
#[tw(class = "hover:animate-float")]
Float,
#[tw(class = "hover:animate-hang")]
Hang,
#[tw(class = "hover:animate-heartbeat")]
Heartbeat,
#[tw(class = "hover:animate-horizontal_vibration")]
HorizontalVibration,
#[tw(class = "hover:animate-jiggle")]
Jiggle,
#[tw(class = "hover:animate-jiggle_v0")] // TODO
JiggleV0,
#[tw(class = "hover:animate-jump")]
Jump,
#[tw(class = "hover:animate-pop")]
Pop,
#[tw(class = "hover:animate-pulse_custom")] // TODO: custom
PulseCustom,
#[tw(class = "hover:animate-pulse_fade_in")]
PulseFadeIn,
#[tw(class = "hover:animate-rise")]
Rise,
#[tw(class = "hover:animate-roll_in")]
RollIn,
#[tw(class = "hover:animate-roll_out")]
RollOut,
#[tw(class = "hover:animate-rotate180")]
Rotate180,
#[tw(class = "hover:animate-rotate360")]
Rotate360,
#[tw(class = "hover:animate-rotate90")]
Rotate90,
#[tw(class = "hover:animate-rotate_in")]
RotateIn,
#[tw(class = "hover:animate-rotate_out")]
RotateOut,
#[tw(class = "hover:animate-rotational_wave")]
RotationalWave,
#[tw(class = "hover:animate-rubber_band")]
RubberBand,
#[tw(class = "hover:animate-rubber_band_v0")] // TODO
RubberBandV0,
#[tw(class = "hover:animate-scale")] // TODO
Scale,
#[tw(class = "hover:animate-shake")]
Shake,
#[tw(class = "hover:animate-shake_v0")] // TODO
ShakeV0,
#[tw(class = "hover:animate-sink")]
Sink,
#[tw(class = "hover:animate-skew")]
Skew,
#[tw(class = "hover:animate-slide_down")]
SlideDown,
#[tw(class = "hover:animate-slide_down_and_fade")]
SlideDownAndFade,
#[tw(class = "hover:animate-slide_in_bottom")]
SlideInBottom,
#[tw(class = "hover:animate-slide_in_left")]
SlideInLeft,
#[tw(class = "hover:animate-slide_in_right")]
SlideInRight,
#[tw(class = "hover:animate-slide_in_top")]
SlideInTop,
#[tw(class = "hover:animate-slide_left")]
SlideLeft,
#[tw(class = "hover:animate-slide_left_and_fade")]
SlideLeftAndFade,
#[tw(class = "hover:animate-slide_out_bottom")]
SlideOutBottom,
#[tw(class = "hover:animate-slide_our_left")]
SlideOutLeft,
#[tw(class = "hover:animate-slide_out_left")]
SlideOutTop,
#[tw(class = "hover:animate-slide_right")]
SlideRight,
#[tw(class = "hover:animate-slide_right_and_fade")]
SlideRightAndFade,
#[tw(class = "hover:animate-slide_rotate_in")]
SlideRotateIn,
#[tw(class = "hover:animate-slide_rotate_out")]
SlideRotateOut,
#[tw(class = "hover:animate-slide_up")]
SlideUp,
#[tw(class = "hover:animate-slide_up_and_fade")]
SlideUpAndFade,
#[tw(class = "hover:animate-slide_up_fade")]
SlideUpFade,
#[tw(class = "hover:animate-spin_clockwise")]
SpinClockwise,
#[tw(class = "hover:animate-spin_counter_clockwise")]
SpinCounterClockwise,
#[tw(class = "hover:animate-sway")]
Sway,
#[tw(class = "hover:animate-swing")]
Swing,
#[tw(class = "hover:animate-swing_drop_in")]
SwingDropIn,
#[tw(class = "hover:animate-swing_v0")] // TODO
SwingV0,
#[tw(class = "hover:animate-squeeze")]
Squeeze,
#[tw(class = "hover:animate-tada")]
Tada,
#[tw(class = "hover:animate-tilt_horizontal")]
TiltHorizontal,
#[tw(class = "hover:animate-vibrate")]
Vibrate,
#[tw(class = "hover:animate-wobble")]
Wobble,
#[tw(class = "hover:animate-zoom_in")]
ZoomIn,
#[tw(class = "hover:animate-zoom_out")]
ZoomOut,
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀