Hover & Text Effects

Dynamic and subtle effects for engaging user experiences.

Link Underline Hover

An underline effect that grows from the center on hover.

const target = '#hover-underline a';
const line = document.querySelector(target + ' .line');
target.addEventListener('mouseenter', () => {
  anime({
    targets: line,
    width: '100%',
    duration: 300,
    easing: 'easeOutExpo'
  });
});
target.addEventListener('mouseleave', () => {
  anime({
    targets: line,
    width: '0%',
    duration: 300,
    easing: 'easeOutExpo'
  });
});

Card Lift & Shine Hover

A card that lifts up and gains a subtle shine on hover.

Hover Card

const target = '#hover-card-lift .card';
const shine = document.querySelector(target + ' .shine');
target.addEventListener('mouseenter', () => {
  anime({
    targets: target,
    translateY: -8,
    boxShadow: '0px 10px 20px rgba(0,0,0,0.2)',
    duration: 300,
    easing: 'easeOutExpo'
  });
  anime({
    targets: shine,
    translateX: '200%',
    duration: 450,
    easing: 'easeOutExpo'
  });
});
target.addEventListener('mouseleave', () => {
  anime({
    targets: target,
    translateY: 0,
    boxShadow: '0px 1px 3px rgba(0,0,0,0.1)',
    duration: 300,
    easing: 'easeOutExpo'
  });
  anime({
    targets: shine,
    translateX: '-100%',
    duration: 1
  });
});

Character Wave on Hover

Animate each letter of a text element in a wave on hover.

Waving Text

const textWrapper = document.querySelector('#text-wave .wave-text');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const animation = anime.timeline({
    loop: false,
    autoplay: false
}).add({
    targets: '#text-wave .letter',
    translateY: [
        {value: -20, easing: 'easeOutSine', duration: 500},
        {value: 0, easing: 'easeInBounce', duration: 500}
    ],
    delay: anime.stagger(30)
});
textWrapper.addEventListener('mouseenter', () => animation.play());

Split & Reveal Text

Animate text by splitting it and revealing from the center.

Reveal Me

const textWrapper = document.querySelector('#text-split-reveal .reveal-text');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: false})
  .add({
    targets: '#text-split-reveal .letter',
    translateX: [40,0],
    translateZ: 0,
    opacity: [0,1],
    easing: "easeOutExpo",
    duration: 1200,
    delay: (el, i) => 500 + 70 * i
  });

BraveColors