Motion · GSAP-style

From & fromTo

$.from() starts from the values you give and animates back to where the element already is — the perfect entrance. $.fromTo() spells out both ends.

Entrances are easier to reason about as "where it comes from": the layout stays in your CSS, and the animation describes only the journey. $.fromTo() is the right choice when the start state isn't the element's resting state — a pop from scale: 0, or a replayable effect.

The headline below is split into one span per character with $.map(), then each letter is staggered in — the effect GSAP's SplitText plugin popularised, in a few lines. The heading keeps an aria-label so screen readers hear words, not letters.

Live · Split text, dealt cards, elastic pop

Animate everything.

NEW

View the source for this demo

HTML

<h2 id="ft-title" style="margin:0;font-size:clamp(1.8rem,5vw,3.1rem)">Animate everything.</h2>
<div class="row" style="margin:16px 0">
  <button type="button" id="ft-split">Replay headline</button>
  <button type="button" id="ft-deal">Deal cards ($.from)</button>
  <button type="button" id="ft-pop">Pop badge ($.fromTo)</button>
  <span class="chip" id="ft-badge">NEW</span>
</div>
<div class="ft-cards" aria-hidden="true"><div class="ft-card">CORE</div><div class="ft-card">HYPER</div><div class="ft-card">PULSE</div><div class="ft-card">MOTION</div></div>

JavaScript

const $title = $('#ft-title');
const text = $title.text();
$title.attr('aria-label', text).html($.map(text.split(''), c =>
  '<span aria-hidden="true">' + (c === ' ' ? '&nbsp;' : $.escape(c)) + '</span>').join(''));

const split = () => $.fromTo('#ft-title span',
  { y: 30, opacity: 0, rotate: 12 },
  { y: 0, opacity: 1, rotate: 0, duration: .5, stagger: .03, ease: 'back.out' });

$('#ft-split').on('click', split);

$('#ft-deal').on('click', async function () {
  $(this).prop('disabled', true);
  await $.from('.ft-card', { x: -80, rotate: -14, opacity: 0, duration: .45, stagger: .08, ease: 'power2.out' });
  $(this).prop('disabled', false);
});

$('#ft-pop').on('click', () =>
  $.fromTo('#ft-badge', { scale: 0, rotate: -30 }, { scale: 1, rotate: 0, duration: .8, ease: 'elastic.out' }));

if (!matchMedia('(prefers-reduced-motion: reduce)').matches) split();

More examples

Entrances

JavaScript

$.from('.hero h1', { y: 40, opacity: 0, duration: .8, ease: 'power2.out' });
$.from('.feature', { y: 24, opacity: 0, duration: .5, stagger: .08 });
$.fromTo('.toast', { x: 80, opacity: 0 }, { x: 0, opacity: 1, duration: .3 });

API

$.from(target, props) → Promise

Jump to the given state, then tween back to the original — the classic entrance pattern.

Reference: $.from() →

$.fromTo(target, fromProps, toProps) → Promise

Explicit start and end states.

Reference: $.fromTo() →

Migrating

Coming from GSAPgsap.from()/gsap.fromTo() → $.from()/$.fromTo(). gsap.set() has no separate equivalent — use .css() for styles, or a zero-duration $.to() for transforms.

Related features

Motion