Another example of an accordion slider technique using GSAP as the engine for the interaction. In this case we are calling on TweenMax to provide the muscle to perform the tweens needed for expanding the images on rollover.

The idea and code was provided by Diaco-ML on CodePen. I've modifeid the scripts a bit by loading the images as background-image of the divs that make up the sliders. Using background-image in the style sheet allows me to use the cover property to fully expand the photos into the available space. This property is also available to the img tag as well but doesn't enjoy nearly the browser support of cover in background. Another advantage is that background images are cached so they load and display quickly after the first load.

GSAP Accordion Slider Method

Although this method is rather cool looking, it is, ultimately, pretty much relegated to the category of eye candy. It does provide a method for displaying a number of images in a restriced space. The downside is that the site visitor needs to mouse-over each div in order to see every image. Perhaps a more conventional slidehow or gallery would be a more approachable solution?

<h1>GSAP Accordion Slider Method</h1>
<div id='parent'>
  <div class='child bckg-img00'></div>
  <div class='child bckg-img01'></div>
  <div class='child bckg-img02'></div>
  <div class='child bckg-img03'></div>
  <div class='child bckg-img04'></div>
  <div class='child bckg-img05'></div>
</div>

As usual in cases like this, the .css and .js files are called via Grav's assets plugin. These files are stored in the root of the article folder as separate files.

Previous Post