Elastic Slider Accordion Responsive With JavaScript - GSAP Animation

Elastic Slider Accordion Responsive With JavaScript
Elastic Slider Accordion Responsive With JavaScript

Create Responsive Elastic Slider Accordion using GSAP animation using javascript. GSAP (GreenSock Animation Platform) is a Javascript animation library that is highly scalable, allowing us to apply dynamic effects to web, games, and interactive stories.

How to use it:

1. Load the JavaScript gsap.min.js in the HTML document.

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

2. Please copy the html code below and put it inside <body> tag.

<div class="group">
  <div class="item" style="background-image: url(https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60)"></div>
  <div class="item" style="background-image: url(https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60)"></div>
  <div class="item" style="background-image: url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=800&q=60)"></div>
  <div class="item" style="background-image: url(https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60)"></div>
  <div class="item" style="background-image: url(https://images.unsplash.com/photo-1543357530-d91dab30fa97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTN8fHBvcnRyYWl0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60)"></div>

3. After that copy the css code.

body {
  height: 100vh;
  display: flex;
  margin: 0;
  background: linear-gradient(135deg, #295fd5, #9d8ce0);
  align-items: center;
  justify-content: center;
  user-select: none;

.group {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;

.item {
  width: 15vw;
  height: 75vh;
  background-position: center;
  background-size: 75vh;
  margin: 1vw;
  border-radius: 3vw;
  display: inline-block;
  cursor: pointer;

4. Also copy the javascript code below after that, please test and see the results.

const items = document.querySelectorAll('.item')

const expand = (item, i) => {
  items.forEach((it, ind) => {
    if (i === ind) return
    it.clicked = false
  gsap.to(items, {
    width: item.clicked ? '15vw' : '8vw',
    duration: 2,
    ease: 'elastic(1, .6)'
  item.clicked = !item.clicked
  gsap.to(item, {
    width: item.clicked ? '42vw' : '15vw',
    duration: 2.5,
    ease: 'elastic(1, .3)'

items.forEach((item, i) => {
  item.clicked = false
  item.addEventListener('click', () => expand(item, i))

Live Demo

See the Pen Elastic Accordion GSAP by Fabio Ottaviani (@supah) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post