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
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
.js files are called via Grav's
assets plugin. These files are stored in the root of the article folder as separate files.