GSAP Animated Bento Grid Features Section
Overview
A bento features section for React and Next.js with tiles that do something: bars that drift, a ring that fills and counts up, a terminal that types and a chart that draws itself. One light moves across the whole grid with the cursor.
Tiles open out from their centres as each row scrolls in, using ScrollTrigger.batch so tiles in the same row stagger together. On a desktop a single light follows the cursor across the grid, catching the edge of every tile near it.
Details
- Category
- Features
- Interaction
- On Scroll + Mouse Move
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 020 / Preloader
GSAP Column Preloader & Blooming Lily Hero Section
On Load · On Scroll · Mouse Move · On Hover
No. 074 / Pricing
GSAP Animated Pricing Section with Rolling Prices
On Click · On Scroll · Mouse Move
No. 023 / Hero
GSAP Botanical Drink Slider Hero with Pour Preloader
On Load · On Scroll · Drag · Mouse Move · On Click
(02)FAQ
GSAP Animated Bento Grid Features Section — FAQ
01How do I lay out the grid?
Give each item a span out of 6 on large screens: 2, 3, 4 or 6. Rows should add up to 6. Below that, the tiles fall into two columns, then one.
02Can I use my own visuals?
Yes. Pass any element as visual, including an image, a video or your own animation. It fills the slot above the title.
03Do all those loops affect performance?
Each loop only runs while its tile is on screen, and they animate transforms, clip paths and SVG strokes. Remove any visual you don't use and its code goes with it.
04How do I change the colours?
Set accent, accentInk and tileColor. The visuals draw with currentColor, so they follow the accent automatically and flip to accentInk on an accent tile.
05What happens with reduced motion?
Tiles appear in place and the visuals rest on a finished frame: the ring full, the chart drawn and the terminal text showing.