Animations

YakaJS includes 15+ smooth, performant animations out of the box. No additional libraries needed!

Why YakaJS Animations?

🚀 Performance - Hardware-accelerated CSS animations
⛓️ Chainable - Combine multiple effects
🎨 Beautiful - Smooth, professional animations
📦 Built-in - No external animation libraries needed
🎯 Simple - One-line animation calls

Quick Example

// Simple fade in_('#element').fadeIn();// Chain multiple animations_('#element')    .fadeIn(500)    .bounce()    .swing();// With callback_('#element').fadeOut(300, () => {    console.log('Animation complete!');});

Fade Animations

fadeIn(duration, callback)

Fade element in from invisible to visible.

_('#element').fadeIn();              // Default 400ms_('#element').fadeIn(1000);          // Custom duration_('#element').fadeIn(500, () => {    // With callback    console.log('Fade in complete!');});

fadeOut(duration, callback)

Fade element out from visible to invisible.

_('#element').fadeOut();_('#element').fadeOut(800);_('#element').fadeOut(300, () => {    _('#element').remove();  // Remove after fading out});

fadeToggle(duration)

Toggle between fadeIn and fadeOut.

_('#element').fadeToggle();     // Toggle with default duration_('#element').fadeToggle(600);  // Custom duration

Slide Animations

slideDown(duration)

Slide element down to reveal it.

_('#menu').slideDown();_('#menu').slideDown(500);

slideUp(duration)

Slide element up to hide it.

_('#menu').slideUp();_('#menu').slideUp(300);

slideToggle(duration)

Toggle between slideDown and slideUp.

_('#panel').slideToggle();_('#panel').slideToggle(400);

slideLeft(duration)

Slide element to the left.

_('#sidebar').slideLeft(500);

slideRight(duration)

Slide element to the right.

_('#sidebar').slideRight(500);

Fun Effects

bounce(duration)

Bouncing animation effect.

_('#button').bounce();_('#button').bounce(800);// Bounce on click_('#button').on('click', function() {    _(this).bounce();});

shake(duration)

Shake animation (great for errors).

_('#loginForm').shake();  // Shake to indicate error// Example: shake on invalid input_('#submitBtn').on('click', () => {    if (!isValid()) {        _('#form').shake();    }});

swing(duration)

Swinging animation effect.

_('#notification').swing();

pulse(duration)

Pulsing scale animation.

_('#heart').pulse();         // Pulse effect_('#heart').pulse(1000);     // Slower pulse// Continuous pulsesetInterval(() => {    _('#indicator').pulse();}, 2000);

rubberBand(duration)

Rubber band stretching effect.

_('#elastic').rubberBand();

wobble(duration)

Wobbling animation.

_('#jellyElement').wobble();

flash(duration)

Flashing opacity animation.

_('#alert').flash();         // Flash effect_('#notification').flash(600);

jello(duration)

Jello-like wobble effect.

_('#funButton').jello();

heartBeat(duration)

Heartbeat scale animation.

_('#liveIndicator').heartBeat();// Continuous heartbeatsetInterval(() => {    _('#status').heartBeat();}, 1500);

3D Animations

flip3D(direction)

3D flip animation.

_('#card').flip3D();           // Default horizontal flip_('#card').flip3D('horizontal');_('#card').flip3D('vertical');_('#card').flip3D('diagonal');

rotateIn(duration)

Rotate in with 3D effect.

_('#modal').rotateIn();_('#modal').rotateIn(800);

rotateOut(duration)

Rotate out with 3D effect.

_('#modal').rotateOut();_('#modal').rotateOut(600);

Chaining Animations

One of the most powerful features is the ability to chain multiple animations:

// Simple chain_('#element')    .fadeIn(500)    .bounce()    .swing();// Complex sequence_('#notification')    .slideDown(300)    .pulse()    .delay(2000)      // Wait 2 seconds    .shake()    .delay(1000)    .slideUp(300);// With callback_('#modal')    .fadeIn(400)    .bounce()    .delay(3000)    .fadeOut(400, () => {        console.log('Modal closed');    });

Practical Examples

Loading Animation

// Show loading with pulse_('#loader')    .show()    .pulse();// Hide when donefetch('/api/data')    .then(data => {        _('#loader').fadeOut(300);        _('#content').fadeIn(500);    });

Success Notification

function showSuccess(message) {    _('#success')        .text(message)        .fadeIn(300)        .bounce()        .delay(3000)        .fadeOut(500);}// UsageshowSuccess('Profile saved successfully!');

Error Shake

function showError(field) {    _(field)        .addClass('error')        .shake()        .delay(500)        .removeClass('error');}// Usageif (!emailValid) {    showError('#emailInput');}

// Show modalfunction openModal(selector) {    _(selector)        .css('display', 'flex')        .fadeIn(300)        .find('.modal-content')        .rotateIn(400);}// Hide modalfunction closeModal(selector) {    _(selector)        .find('.modal-content')        .rotateOut(300)        .parent()        .delay(300)        .fadeOut(200);}// Usage_('#openBtn').on('click', () => openModal('#myModal'));_('#closeBtn').on('click', () => closeModal('#myModal'));

Animated List Items

// Add item with animationfunction addListItem(text) {    const item = _('<li>').text(text);    _('#list')        .append(item);        item.css('opacity', 0)        .slideDown(300)        .fadeIn(300)        .bounce();}// Remove item with animation_('#list').on('click', '.delete', function() {    _(this).parent()        .shake()        .delay(300)        .slideUp(300, function() {            _(this).remove();        });});

Page Transitions

function navigateWithAnimation(url) {    _('#content')        .fadeOut(300)        .slideUp(300, () => {            // Load new content            loadPage(url);                        // Animate new content in            _('#content')                .slideDown(300)                .fadeIn(400);        });}

_('[data-tooltip]').on('mouseenter', function() {    const text = _(this).attr('data-tooltip');    const tooltip = _('<div class="tooltip">')        .text(text)        .css({            position: 'absolute',            top: _(this).offset().top - 40,            left: _(this).offset().left        });        _('body').append(tooltip);    tooltip.fadeIn(200).pulse();});_('[data-tooltip]').on('mouseleave', function() {    _('.tooltip').fadeOut(200, function() {        _(this).remove();    });});

Performance Tips

Hardware Acceleration

YakaJS animations use CSS transforms which are hardware-accelerated for better performance:

// These are performant (hardware accelerated)_('#element').fadeIn();      // Uses opacity_('#element').bounce();      // Uses transform_('#element').slideDown();   // Uses transform

Batch Animations

Animate multiple elements efficiently:

// Good: Batch animation_('.cards').each((i, card) => {    setTimeout(() => {        _(card).fadeIn().bounce();    }, i * 100);  // Stagger by 100ms});// Also good: Animate all at once_('.notifications').fadeIn(300).bounce();

Avoid Layout Thrashing

// Good: Use YakaJS batch operations_('.items').css('display', 'none');  // Batched_('.items').fadeIn();// Avoid: Reading then writing in loop// This causes layout thrashing_('.items').each((i, item) => {    const height = item.offsetHeight;  // Read (bad in loop)    item.style.height = height + 'px'; // Write (bad in loop)});

Custom Animation Durations

All animations accept custom durations in milliseconds:

_('#element').fadeIn(100);    // Fast (100ms)_('#element').fadeIn(400);    // Default (400ms)_('#element').fadeIn(1000);   // Slow (1000ms)_('#element').fadeIn(2500);   // Very slow (2.5s)

Animation Events

Listen for animation complete events:

_('#element').fadeIn(500, () => {    console.log('Fade in complete!');    // Do something after animation});// Chain with callback_('#modal')    .fadeIn(300)    .bounce()    .delay(2000)    .fadeOut(300, () => {        _('#modal').remove();    });

Browser Support

YakaJS animations work in all modern browsers:

✅ Chrome/Edge (excellent)
✅ Firefox (excellent)
✅ Safari (excellent)
✅ Opera (excellent)
⚠️ IE11 (partial support)

Combining with Voice Commands

Animations work great with voice commands:

_.voice.listen({    'bounce': () => _('#element').bounce(),    'shake': () => _('#element').shake(),    'spin': () => _('#element').flip3D(),    'fade out': () => _('#element').fadeOut(),    'fade in': () => _('#element').fadeIn(),    'show': () => _('#element').slideDown().fadeIn(),    'hide': () => _('#element').fadeOut().slideUp()});

Try saying "bounce" or "shake" to see animations triggered by voice! 🎤

Animations make your web applications feel alive and professional. Experiment with different combinations to find what works best for your UI!

For the complete list of methods, see the API Reference.

Animations

Animations

On this page