Portfolio essentials

The motion vocabulary of an award-winning personal site: typographic entrances, image trails, a tilt card, a transition, and a menu that makes an impression.

8 effects · use them together

1. 01
   

   Featured light

   Text beginner

   SplitText Character Reveal

   A headline is split into characters that rise out of a masked line one after another, followed by a soft fade-in of the supporting copy and a replay button.

   • gsap
   • splittext
2. 02
   

   Featured medium

   Cursor intermediate

   Image Trail Following Cursor

   Moving the pointer across a dark stage leaves a trail of grainy gradient tiles: every 40px of travel a new tile blooms under the cursor with a slight twist, hangs for 0.6s and dissolves, stacking above the last.

   • gsap
   • canvas2d
3. 03
   

   light

   Hover intermediate

   3D Tilt Card with Glare

   Three product cards lean toward the pointer up to ±12° with quickTo-smoothed rotation, layered translateZ depth on image, title and badge, a specular glare that follows the pointer and a soft shadow that slides the opposite way; they relax flat on leave.

   • gsap
4. 04
   

   light

   Page Transitions advanced

   Shared-Element Flip Transition

   Clicking one of six thumbnails records its position with Flip.getState, reparents it into a full-screen detail layout and morphs it there in 0.9s power3.inOut while the other tiles scale away; Close or Escape morphs it back.

   • gsap
   • flip
5. 05
   

   light

   Text intermediate

   Infinite Marquee with Scroll Speed

   Two bands of huge serif words, one filled and one outlined, loop endlessly in opposite directions; scroll velocity speeds them up and flips them, hovering a band eases it to a stop.

   • gsap
   • scrolltrigger
6. 06
   

   light

   Scroll intermediate

   Scroll Velocity Skew

   A long grid of gradient tiles and oversized words shears up to ±8° and shrinks slightly in proportion to scroll velocity, then eases back to zero in 0.8s; a mono readout shows the live velocity and skew.

   • gsap
   • scrolltrigger
7. 07
   

   light

   Layout intermediate

   Bento Grid with Flip Filtering

   A bento-style grid of nine mixed-span tiles is filtered by a pill bar; GSAP Flip records the layout, toggles visibility, then glides every surviving tile into its new slot while leaving tiles shrink away.

   • gsap
   • flip
8. 08
   

   light

   Cursor intermediate

   Blend-Mode Cursor

   A white disc in mix-blend-mode: difference trails the pointer with a 0.12 lerp, inverting headlines, a lime block and an image as it passes, swelling from 24px to 120px over links with a tiny label and pulsing a ring on click.

   • gsap