 |
| 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> </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 :
- elastic-accordion-gsap.zip
- Size :
- 7.38KB
- Site Download :
- CodePen
- Official Website:
- Go to website
- License:
- MIT