GSAP Careers Page Section with Animated Job Filters
Overview
A careers section and job board for React and Next.js. Filter open roles by team and location, and the list rearranges itself with GSAP Flip while the counts roll to their new values. Each role opens inline with its details and an apply link.
Pick a team or a city and the rows that stay slide to their new places, the ones that don't match fade off, and the new ones rise in. The list eases to its new height, so the rest of the page doesn't jump. Sorting moves the rows the same way.
Details
- Category
- Careers
- Interaction
- On Click + On Hover + On Scroll
- Trigger
- On Click
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 047 / Gallery
GSAP Flip Filterable Portfolio Grid for React
On Click · On Scroll · On Hover
No. 092 / Comparison
GSAP Comparison Table Section: Us vs Them with Flip
On Scroll · On Click
No. 045 / FAQ
GSAP FAQ Accordion Section with Smooth Height Animation
On Click · On Hover · On Scroll
(02)FAQ
GSAP Careers Page Section with Animated Job Filters — FAQ
01How do I add my jobs?
Pass roles with a title, team, location and href. The team and location filters are built from whatever values you use. summary, points, facts, type and isNew are all optional.
02Can I load the jobs from an applicant tracking system?
Yes. It only needs an array, so fetch your jobs on the server, map them to this shape and pass them in. There's no integration built in.
03What decides the Newest order?
The order of your array. Put the latest roles first. A to Z sorts by title.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Flip and ScrollTrigger come with GSAP. Set ink and paper to match your page, and swap --font-young-serif for your own display font.
05What happens with reduced motion?
Filtering, sorting and opening a role all happen instantly, the entrance is skipped, and the counts change without rolling.