Autoplay Accordion Slider in React JS with GSAP & CSS Animation | #reactjs #gsap

This React and GSAP tutorial demonstrates how to create an autoplay accordion slider with smooth animations and responsive design. You’ll learn how to combine useState, useEffect, useRef, and useCallback hooks in React to control slide states, autoplay functionality, and user interactions. The GSAP animations apply custom flex values and ease effects for each slide, highlighting active slides with a dynamic expanding effect. The CSS styles ensure responsive behavior on both desktop and mobile, using media queries. Additionally, a clip-path animation smoothly reveals each slide’s title as it becomes active, adding a circle effect that grows from the side of the slide. This video covers everything needed to build a fully animated, clickable, and autoplay-enabled slider in React with GSAP.

📂 Related Document:
- Understanding Promises in JavaScript and Their Use in React: https://medium.com/@sharareshaddev/understanding-promises-in-javascript-and-their-use-in-react-a77564aae576

🌱 Inspired by Fabio Ottaviani: https://codepen.io/supah/pen/rNKraQJ
⭐ Lists:
- Mini React Projects: https://www.youtube.com/playlist?list=PLes5YJFlROjGlHbGu3mnLAunULzAKKwsr
- Swiper JS: https://www.youtube.com/playlist?list=PLes5YJFlROjF1Lf2RZykNeD-q6KuUYXmn
- GSAP: https://www.youtube.com/playlist?list=PLes5YJFlROjHOLLJBZkwpfUihD_ouui8w
- Slider with Vanilla Javascript & CSS: https://www.youtube.com/playlist?list=PLes5YJFlROjE2USc2RbzJXLzANyxijsUb
- Background Animation: https://www.youtube.com/playlist?list=PLes5YJFlROjE3QNHDn6UNzP5fiMhzQlze
- CSS Hover Effect: https://www.youtube.com/playlist?list=PLes5YJFlROjGxfF4QgD4QwR6noJyCI_8f
👩‍💻 My Social Profiles:
- Codepen: https://codepen.io/ecemgo
- GitHub: https://github.com/ecemgo
- TikTok: https://www.tiktok.com/@ecemgo
🕔 Timestamps:
0:00 – Intro
0:52 – Starting with App.js
1:02 – Installing GSAP and creating the Slider component
1:51 – CSS
3:01 – Media queries to make it responsive
3:18 – The functions for GSAP
4:49 – Adding active class to the slides for the CSS animation
6:09 – The functions for the autoplay

Видео Autoplay Accordion Slider in React JS with GSAP & CSS Animation | #reactjs #gsap канала Ecem Gokdogan