EN IT
Home About Learn Blog

Smarter Hover Animations & State Machines in Webflow

Advanced 28:46 webflowgsapinteractionshoverstate-machine

Build hover animations on a single GSAP timeline with play and reverse, then a color-switching state machine with jump to — all inside Webflow, no duplicated interactions.

Watch on YouTube

Key takeaways

  • Play plus reverse on a single timeline handles hover-in and hover-out from one animation: play continues forward from wherever the playhead is, reverse runs it backward from that same point.
  • Because both start from the current position, an interrupted hover reverses mid-flight instead of snapping back — the motion always feels continuous.
  • The secret to complex animations is splitting them into simple, independent actions — scale, color, arrow-out, arrow-in — each timed so they converge.
  • For a re-entry effect, use a "from to" action and flip the sign of the offset so the element returns from the opposite side instead of retracing its path.
  • Jump to plus pause turns a timeline into a state machine: each state is a zero-duration action at a fixed time, a click teleports the playhead there, a catch-all pause freezes it, and a CSS transition — not the timeline — does the smooth part.

Video chapters

  1. 00:00 Intro
  2. 01:25 Example #1: Hover interaction on a single timeline with play and reverse
  3. 11:13 Example #2: Changing a section background with a state-machine interaction
  4. 26:19 Outro & what's next

Webflow’s GSAP interactions let you do two things that used to be genuinely awkward: run a full hover-in/hover-out effect from a single timeline, and build a small state machine that switches a section’s background color with nothing but event settings. This lesson picks up the event settings from the previous one — adding jump to and delay — and puts them to work on two real interactions.

The first is the most universal interaction there is: hovering a button. The second looks complex but rests on one neat idea — a timeline where you don’t play through states, you jump between them. Both show how far these settings go once you combine them with intent.

How it works

Play and reverse on one timeline. With classic interactions, a hover needs two animations — one for hover-in, one for hover-out — which doubles the surface for bugs. With GSAP you build one animation and use control: play on mouse-enter and reverse on mouse-leave. The important part is that both act from the playhead’s current position. If someone hovers out before the forward animation finishes, it stops right there and reverses from that exact frame; hover back in and it continues forward again. The motion is always continuous, never a snap.

The animation itself is a lesson in decomposition. A button hover that looks sophisticated — scale up with an elastic bounce, darken the background, an arrow that slides up-and-out of its circle then re-enters from below — is really just four simple actions timed to converge. The only subtle one is the arrow’s return: it uses a from to action where the “from” values are the exit offset with the signs flipped (exit at x:20, y:-20, re-enter from x:-20, y:20). That flip is what makes it come back from the opposite side instead of retracing its path. The circle’s overflow: hidden hides the arrow while it’s outside.

Jump to + pause = a state machine. The second example changes the home-about section’s background to match whichever badge you click. Instead of one animation per button, it treats the timeline as a set of discrete states: three zero-duration actions, each setting the background to one color, placed at 0s, 1s, and 2s. Each badge carries an attribute (element-change-color-role) with its own value, and each of the three click events uses jump to (0s / 1s / 2s) with control play to teleport the playhead onto its state. A fourth, catch-all click event targets all badges (that shared attribute) with control pause, freezing the timeline on whatever state was just selected. The smooth fade between colors isn’t the timeline at all — it’s an 800ms CSS background-color transition on the section.

Two details make it robust. Control play (not the default “play from beginning”) on the three events stops the timeline restarting from 0 and breaking the state logic. And the catch-all pause carries a tiny 0.01s delay — only to cover the edge case where your very first click is the 0s state and the playhead is already there; the micro-delay lets the state action run for a frame before pause freezes it.

This is deliberately a bit over-engineered — a teaching exercise in what event settings can do. In a real project, one interaction per button (animating the background from its current color to the target) is simpler; reach for the state machine when the elegance of a single interaction is worth it.

How to use it

  1. Single-timeline hover. Build one interaction targeting your button with two hover events: mouse-enter → control play, mouse-leave → control reverse. Add the animation as separate actions (e.g. scale 1 → 1.05 elastic; background to a darker shade; arrow move x/y out; arrow from to back with flipped-sign “from” values). Keep the arrow’s wrapper overflow: hidden.

  2. State-machine color switcher. On the section, set a CSS transition: background-color 800ms ease-out-expo. Give each badge the same attribute name with a distinct value (purple / blue / orange). Add three zero-duration actions on the timeline at 0s / 1s / 2s, each setting the section background to one color.

  3. Wire the events. Add one click event per badge with control play and jump to matching its action’s time (0s / 1s / 2s). Then add a fourth click event targeting the shared attribute (all badges) with control pause and a 0.01s delay. Publish and click through the badges — each click teleports to a state and the CSS transition smooths the change.

Resources

Frequently asked questions

How do I make a hover animation play forward on hover and backward on hover-out in Webflow?
Use one interaction with two hover events on the same timeline: set the mouse-enter event control to play and the mouse-leave event to reverse. Play resumes forward from the playhead's current position and reverse runs it backward from there, so you never need a second animation.
Why does my reversed hover animation jump instead of running smoothly?
That happens when the reverse restarts from the end rather than the current position. Control set to reverse (not "play from beginning" in the opposite direction) continues from wherever the playhead is, so an interrupted hover reverses right from that frame.
How do I animate an element out and back in from the other side?
Split it into two actions. Move it out with a normal action, then bring it back with a "from to" action whose "from" values are the offset with the signs flipped — so instead of retracing its exit path, the element re-enters from the opposite side.
Can I build a state machine in Webflow interactions?
Yes. Place a zero-duration action for each state at a fixed time on the timeline, give each trigger a jump-to value matching its state's position with control set to play, then add one catch-all event with control set to pause so the playhead freezes on the chosen state.

← Back to the course