Accordion Slider -- GSAP
screenshot | gChambersAnother 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 scr…
GSAP Slideshow with Assets Plugin
Gregory Chambers | gChambersThe slideshow example below is one of several approaches that can be employed using the Greensock Animation Platform (GSAP). The particular technique shown below is notable in that it is probably the most approachable of the methods available.
Another interesting aspect of this exercise is the use o…
Figure with Figcaption on a Page
Photographer Unknown | Google ImagesThe article below has been depricated. I've since built a shortcode that will allow direct insertion of a figure with source attribution and caption text.
Photo captions are hard! Best case scenario would be for someone to write a shortcode plugin for the html figure
element.
However there…
Simple CSS Image Slider
istock PhotoCookbook tutorial for a CSS image slider containing four images. Relies on the
jQuery plug-in named "Slidy". Rather crude, but it does seem to work with minimal set up... just some keyframe rules in the _custom.scss
file.
Perhaps it might be worthwhile to explore the GSAP version of this technique? Definitely, but I'll need to wait until I have more skills to tackle that project. Reference files for GSAP technique are found at:
C:\Users\Gregory Chambers\_gProjects\GSAP_Instruction\gregGSAP_Class\Image Slider
Start by placing the images into this folder.
Creating a Simple Gallery
Corbis photosTechnique to display a bunch of photographs (with captions and descriptions - if needed) on a simple gallery page. This takes advantage of Grav's media functionality which allows a page to be aware of the images available in it's folder. The images placed in the enclosing folder will be stored and d…