animation

package
v0.0.7 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jan 17, 2026 License: MIT Imports: 3 Imported by: 0

Documentation

Overview

Package animation provides smooth transitions and animations for ForgeUI components.

This package integrates with Alpine.js's transition system and provides preset transitions following shadcn/ui design patterns.

Basic Usage

Use preset transitions with Alpine.js directives: 

html.Div(
    alpine.XShow("open"),
    g.Group(alpine.XTransition(animation.FadeIn())),
    g.Text("Content"),
)

Preset Transitions

The package provides common transition presets: 

animation.FadeIn()          // Fade in from transparent
animation.FadeOut()         // Fade out to transparent
animation.ScaleIn()         // Scale and fade in
animation.ScaleOut()        // Scale and fade out
animation.SlideUp()         // Slide up into view
animation.SlideDown()       // Slide down into view
animation.SlideLeft()       // Slide from right to left
animation.SlideRight()      // Slide from left to right
animation.Collapse()        // Smooth height collapse (requires Collapse plugin)

Custom Transitions

Build custom transitions with the fluent API: 

custom := animation.NewTransition().
    Enter("transition-all duration-300").
    EnterStart("opacity-0 scale-90").
    EnterEnd("opacity-100 scale-100").
    Leave("transition-all duration-200").
    LeaveStart("opacity-100 scale-100").
    LeaveEnd("opacity-0 scale-90").
    Build()

Modal Example

Animated modal with backdrop: 

html.Div(
    alpine.XData(map[string]any{"open": false}),

    // Backdrop with fade
    html.Div(
        alpine.XShow("open"),
        g.Group(alpine.XTransition(animation.FadeIn())),
        html.Class("fixed inset-0 bg-black/50"),
    ),

    // Modal with scale
    html.Div(
        alpine.XShow("open"),
        g.Group(alpine.XTransition(animation.ScaleIn())),
        html.Class("fixed inset-0 flex items-center justify-center"),
        // ... modal content
    ),
)

Dropdown Example

Animated dropdown menu: 

html.Div(
    alpine.XData(map[string]any{"open": false}),

    // Trigger
    html.Button(alpine.XClick("open = !open"), g.Text("Menu")),

    // Dropdown content
    html.Div(
        alpine.XShow("open"),
        g.Group(alpine.XTransition(animation.SlideDown())),
        html.Class("absolute mt-2 w-48 rounded-md shadow-lg"),
        // ... menu items
    ),
)

Toast Example

Slide in toast notification: 

html.Div(
    alpine.XShow("visible"),
    g.Group(alpine.XTransition(animation.SlideInFromBottom())),
    html.Class("fixed bottom-4 right-4 p-4 bg-white rounded-md shadow-lg"),
    g.Text("Notification message"),
)

Best Practices

1. Match transition durations to content type:

  • Fast (150ms): Small UI changes, tooltips
  • Medium (200-300ms): Modals, dropdowns, most UI
  • Slow (500ms): Large content, page transitions

2. Use appropriate easings:

  • ease-out: Elements entering the view
  • ease-in: Elements leaving the view
  • ease-in-out: Elements transforming in place

3. Keep transitions subtle:

  • Small scale changes (0.95 - 1.0)
  • Short distances for slides (10-20px)
  • Combine transforms for richer effects

4. Consider accessibility:

  • Respect prefers-reduced-motion
  • Provide skip mechanisms for long animations
  • Ensure content is accessible during transitions

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func GenerateCSS 

func GenerateCSS() string

GenerateCSS generates CSS for all predefined keyframes.

func TailwindClasses 

func TailwindClasses() []string

TailwindClasses returns utility class names that can be used in ForgeUI components.

Types

type Keyframe 

type Keyframe struct {
	Name   string
	Frames map[string]string // percentage -> CSS properties
}

Keyframe represents a CSS @keyframes animation definition.

func PredefinedKeyframes 

func PredefinedKeyframes() []Keyframe

PredefinedKeyframes returns commonly used CSS keyframes for animations. These can be added to your CSS or generated for Tailwind config.

func (*Keyframe) ToCSS 

func (k *Keyframe) ToCSS() string

ToCSS converts a keyframe to CSS @keyframes rule.

type TailwindAnimation 

type TailwindAnimation struct {
	Name      string
	Animation string
}

TailwindAnimation represents a Tailwind animation configuration.

type TailwindConfig 

type TailwindConfig struct {
	Keyframes  map[string]map[string]map[string]string `json:"keyframes"`
	Animations map[string]string                       `json:"animation"`
}

TailwindConfig generates Tailwind CSS configuration for animations. This can be merged into your tailwind.config.js theme.extend section.

Example usage: 

config := animation.TailwindConfig()
// Add to tailwind.config.js:
// module.exports = {
//   theme: {
//     extend: {
//       keyframes: config.Keyframes,
//       animation: config.Animations,
//     }
//   }
// }

func GenerateTailwindConfig 

func GenerateTailwindConfig() *TailwindConfig

GenerateTailwindConfig creates a TailwindConfig with predefined animations.

func (*TailwindConfig) ToJSON 

func (tc *TailwindConfig) ToJSON() (string, error)

ToJSON converts the Tailwind config to JSON format.

func (*TailwindConfig) ToJavaScript 

func (tc *TailwindConfig) ToJavaScript() string

ToJavaScript generates JavaScript code for tailwind.config.js.

type TailwindKeyframe 

type TailwindKeyframe struct {
	Name   string
	Frames map[string]map[string]string
}

TailwindKeyframe represents a Tailwind keyframe configuration.

type Transition 

type Transition struct {
	// Enter classes applied during entire enter transition
	Enter string

	// EnterStart classes applied before enter, removed one frame after
	EnterStart string

	// EnterEnd classes applied one frame after enter starts, removed when transition ends
	EnterEnd string

	// Leave classes applied during entire leave transition
	Leave string

	// LeaveStart classes applied before leave, removed one frame after
	LeaveStart string

	// LeaveEnd classes applied one frame after leave starts, removed when transition ends
	LeaveEnd string
}

Transition represents animation configuration for Alpine.js x-transition. It defines enter and leave animations with start, middle, and end states.

func Collapse 

func Collapse() *Transition

Collapse creates a smooth height collapse transition. Note: This does NOT use x-transition. Instead, it's meant to be used with Alpine's x-collapse directive which requires the Collapse plugin.

Example: 

html.Div(
    alpine.XShow("expanded"),
    alpine.XCollapse(),
    g.Text("Collapsible content"),
)

func FadeIn 

func FadeIn() *Transition

FadeIn creates a fade-in transition (opacity: 0 → 1).

func FadeOut 

func FadeOut() *Transition

FadeOut creates a fade-out transition (opacity: 1 → 0).

func RotateIn 

func RotateIn() *Transition

RotateIn creates a rotation and fade-in transition.

func ScaleIn 

func ScaleIn() *Transition

ScaleIn creates a scale and fade-in transition (scale: 0.95 → 1, opacity: 0 → 1). Commonly used for modals and dialogs.

func ScaleOut 

func ScaleOut() *Transition

ScaleOut creates a scale and fade-out transition (scale: 1 → 0.95, opacity: 1 → 0).

func SlideDown 

func SlideDown() *Transition

SlideDown creates a slide-down transition (translateY: -10px → 0).

func SlideInFromBottom 

func SlideInFromBottom() *Transition

SlideInFromBottom creates a large slide-up transition from the bottom. Commonly used for mobile menus and drawers.

func SlideInFromLeft 

func SlideInFromLeft() *Transition

SlideInFromLeft creates a large slide-right transition from the left. Commonly used for sidebars and side sheets.

func SlideInFromRight 

func SlideInFromRight() *Transition

SlideInFromRight creates a large slide-left transition from the right.

func SlideInFromTop 

func SlideInFromTop() *Transition

SlideInFromTop creates a large slide-down transition from the top.

func SlideLeft 

func SlideLeft() *Transition

SlideLeft creates a slide-left transition (translateX: 10px → 0).

func SlideRight 

func SlideRight() *Transition

SlideRight creates a slide-right transition (translateX: -10px → 0).

func SlideUp 

func SlideUp() *Transition

SlideUp creates a slide-up transition (translateY: 10px → 0). Commonly used for dropdowns and popovers.

func ZoomIn 

func ZoomIn() *Transition

ZoomIn creates a zoom-in transition with scale and opacity.

func ZoomOut 

func ZoomOut() *Transition

ZoomOut creates a zoom-out transition with scale and opacity.

type TransitionBuilder 

type TransitionBuilder struct {
	// contains filtered or unexported fields
}

TransitionBuilder provides a fluent API for building transitions.

func NewTransition 

func NewTransition() *TransitionBuilder

NewTransition creates a new transition builder.

func (*TransitionBuilder) Build 

func (b *TransitionBuilder) Build() *Transition

Build returns the completed transition.

func (*TransitionBuilder) Enter 

func (b *TransitionBuilder) Enter(classes string) *TransitionBuilder

Enter sets the enter transition classes.

func (*TransitionBuilder) EnterEnd 

func (b *TransitionBuilder) EnterEnd(classes string) *TransitionBuilder

EnterEnd sets the enter end classes.

func (*TransitionBuilder) EnterStart 

func (b *TransitionBuilder) EnterStart(classes string) *TransitionBuilder

EnterStart sets the enter start classes.

func (*TransitionBuilder) Leave 

func (b *TransitionBuilder) Leave(classes string) *TransitionBuilder

Leave sets the leave transition classes.

func (*TransitionBuilder) LeaveEnd 

func (b *TransitionBuilder) LeaveEnd(classes string) *TransitionBuilder

LeaveEnd sets the leave end classes.

func (*TransitionBuilder) LeaveStart 

func (b *TransitionBuilder) LeaveStart(classes string) *TransitionBuilder

LeaveStart sets the leave start classes.

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.