🎬 bertui-continue

Sequence animations in BertUI. One function. Zero config.

📦 IMPORTANT: You Need Both Libraries

bertui-continue is the controller. bertui-animate is the animations.

# Install BOTH libraries
bun add bertui-animate      # CSS animations (required)
bun add bertui-continue     # JS controller (this library)

BertUI auto-loads bertui-animate.css. You don't import anything. Just install it.

✨ What is this?

bertui-continue chains CSS animations into sequences:

fadeIn → wait 2s → fadeOut → wait 2s → fadeIn → wait 2s → fadeOut...

No CSS imports. No React imports. Just one function.

⚡ Quick Start

// 1. Install both libraries (see above)
// 2. Import just the controller
import continue_ from 'bertui-continue';

export default function Hero() {
  return (
    <div>
      <button onClick={() => {
        continue_({
          element: '.logo',
          steps: [
            { animation: 'fadeIn' },
            { delay: 2000 },
            { animation: 'slideOutRight' }
          ]
        }).play();
      }}>
        Animate!
      </button>
      
      <div class="logo">✨</div>
    </div>
  );
}

🔍 How It Works

1. You install bertui-animate → BertUI auto-loads the CSS
2. You install bertui-continue → You import the JS controller
3. You write continue_({ element, steps }) → Animations sequence!

bertui-continue checks if bertui-animate is installed.

• ✅ If yes: Works perfectly
• ❌ If no: Throws clear error: "bertui-continue requires bertui-animate to be installed"

🎯 Why This Architecture?

| Library | Job | Installed by User | |---------|-----|-------------------| | bertui-animate | CSS animations (100+ classes) | ✅ Yes | | bertui-continue | JS sequence controller | ✅ Yes | | BertUI Framework | Auto-loads CSS from node_modules | ✅ Built-in |

Separation of concerns:

• Animations = CSS library (bertui-animate)
• Sequencing = JS library (bertui-continue)
• Loading = Framework (BertUI)

You can use bertui-animate alone (just add CSS classes). You can add bertui-continue when you need sequences.

📖 API

continue_(config)

The one and only function.

continue_({
  // What to animate
  element: '.selector',     // CSS selector, DOM element, or array
  
  // What happens, in order
  steps: [
    { animation: 'fadeIn' },      // Animate
    { delay: 1000 },             // Wait 1 second
    { animation: 'slideOutRight' }, // Animate again
    { delay: 500 },              // Wait 0.5 seconds
    { animation: 'fadeIn' },     // Come back
    { animation: 'pulse' }       // Two animations at once!
  ],
  
  // Optional controls
  repeat: 3,                    // Number of times (or Infinity)
  onStart: () => console.log('started'),
  onComplete: () => console.log('done'),
  onRepeat: (count) => console.log(`loop ${count}`)
}).play();                     // Start immediately

🎮 Control Methods

const sequence = continue_({ element: '.box', steps: [...] });

sequence.play();    // Start or resume
sequence.pause();   // Pause at current position
sequence.resume();  // Resume from pause
sequence.stop();    // Stop and reset to beginning

🧪 Examples

1. Infinite Pulsing (Fade In/Out)

// Requires: bertui-animate + bertui-continue
import continue_ from 'bertui-continue';

continue_({
  element: '.bell-icon',
  steps: [
    { animation: 'fadeIn' },
    { delay: 2000 },
    { animation: 'fadeOut' },
    { delay: 2000 }
  ],
  repeat: Infinity
}).play();

2. Notification Popup

continue_({
  element: '.toast',
  steps: [
    { animation: 'slideInDown' },
    { delay: 3000 },
    { animation: 'slideOutUp' }
  ],
  onComplete: () => removeToast()
}).play();

3. Carousel

continue_({
  element: '.carousel-item',
  steps: [
    { animation: 'slideInRight' },
    { delay: 3000 },
    { animation: 'slideOutLeft' },
    { delay: 500 }
  ],
  repeat: Infinity
}).play();

4. Staggered Page Entrance

continue_({
  element: ['.hero', '.title', '.subtitle', '.cta'],
  steps: [
    { animation: 'fadeInDown', target: '.hero' },
    { delay: 200 },
    { animation: 'fadeInLeft', target: '.title' },
    { delay: 200 },
    { animation: 'fadeInRight', target: '.subtitle' },
    { delay: 200 },
    { animation: 'pulse', target: '.cta' }
  ]
}).play();

❌ Error Handling

If user forgets to install bertui-animate:

Error: bertui-continue requires bertui-animate to be installed.
Run: bun add bertui-animate

If element doesn't exist:

Error: No elements found for selector ".does-not-exist"

If steps array is empty:

Error: Steps array cannot be empty

📦 Installation (The Correct Way)

# 1. Install BOTH libraries
bun add bertui-animate
bun add bertui-continue

# 2. Import ONLY the controller in your code
import continue_ from 'bertui-continue';

# 3. That's it! BertUI auto-loads the CSS

🎨 Available Animations

bertui-continue works with all 100+ bertui-animate classes:

Attention Seekers

bounce  flash  pulse  rubberBand  shakeX  shakeY
headShake  swing  tada  wobble  jello  heartBeat

Fading Entrances/Exits

fadeIn  fadeInDown  fadeInUp  fadeInLeft  fadeInRight
fadeOut  fadeOutDown  fadeOutUp  fadeOutLeft  fadeOutRight

Sliding Entrances/Exits

slideInDown  slideInUp  slideInLeft  slideInRight
slideOutDown  slideOutUp  slideOutLeft  slideOutRight

Zooming Entrances/Exits

zoomIn  zoomInDown  zoomInUp  zoomInLeft  zoomInRight
zoomOut  zoomOutDown  zoomOutUp  zoomOutLeft  zoomOutRight

Rotating Entrances/Exits

rotateIn  rotateInDownLeft  rotateInDownRight  rotateInUpLeft  rotateInUpRight
rotateOut  rotateOutDownLeft  rotateOutDownRight  rotateOutUpLeft  rotateOutUpRight

Specials

flip  flipInX  flipInY  flipOutX  flipOutY
lightSpeedInRight  lightSpeedInLeft  lightSpeedOutRight  lightSpeedOutLeft
jackInTheBox  rollIn  rollOut  hinge

Usage: { animation: 'bounce' } (no 'bertui-' prefix)

🔧 API Reference

continue_(config)

| Property | Type | Required | Default | Description | |----------|------|----------|---------|-------------| | element | string \| Element \| Array | ✅ | - | CSS selector, DOM element, or array | | steps | Array | ✅ | - | Array of animation/delay steps | | repeat | number \| Infinity | ❌ | 1 | Number of times to repeat | | onStart | Function | ❌ | () => {} | Called when sequence starts | | onComplete | Function | ❌ | () => {} | Called when sequence completes | | onRepeat | Function | ❌ | () => {} | Called after each repeat |

Step Object

| Property | Type | Required | Description | |----------|------|----------|-------------| | animation | string | ❌* | bertui-animate class (without 'bertui-' prefix) | | delay | number | ❌* | Wait time in milliseconds | | target | string \| Element \| Array | ❌ | Override element for this step |

* Each step must have either animation or delay

Methods

| Method | Description | |--------|-------------| | .play() | Start or resume the sequence | | .pause() | Pause at current position | | .resume() | Resume from pause | | .stop() | Stop and reset to beginning |

🆚 Comparison

| Feature | bertui-continue | Greensock (GSAP) | Framer Motion | |---------|-----------------|------------------|---------------| | Bundle Size | 4KB | 46KB | 180KB+ | | Dependencies | 0 | 1 | React | | BertUI Native | ✅ | ❌ | ❌ | | Requires CSS Lib | bertui-animate | None | None | | Learning Curve | 5 minutes | 2 weeks | 2 days |

🧠 Philosophy

bertui-continue does ONE thing: It adds and removes CSS classes on a timeline.

bertui-animate does ONE thing: It provides beautiful CSS animations.

BertUI does ONE thing: It auto-loads CSS from node_modules.

Each library is tiny, focused, and perfect at its job.

📄 License

MIT © Pease Ernest

🙏 Credits

• Animations: bertui-animate (required dependency)
• Framework: BertUI
• Inspiration: Every developer who wrote setTimeout + classList one too many times

Made with ⚡ for the BertUI ecosystem

⬇️ Install both ⬇️

bun add bertui-animate bertui-continue

GitHub • npm • BertUI