After a little break from my Custom Interaction experiments, I’m back and ready to explore the possibilities of what you can create without code using custom interactions in Blocs.
This experiment takes advantage of the new stacked container, which was introduced in Blocs for Mac 6.2.
Setup 
The setup for this build is very simple. I have a div container that contains x3 images, each with an ID set ( img-stack-1, img-stack-2, img-stack-3 ).
The div container is set to stacked container, so the images stack on top of each other.
Custom Classes 
This example uses two classes. The first is hide-slide, this class applies the transition animation. My custom interaction will apply this class sequentially to each image, which will create that carousel effect. You can see I’m adjusting the scale, opacity and pushing the z-index up to 9999, so that the animation effect stays at the top of the image stack.
The second class is image-slide, this class is used to give us a smooth reverting animation when the hide-slide class is removed. This class is initially applied to each image in the stack container.
Custom Interactions 
This experiment uses two custom interactions, lets start with the complex one.
The animate stack interaction will sequentially add the hide-slide class to each image with a 2 second pause between. At the end of this interaction, the hidden images are reset (remove hide-slide) so they are no longer hidden, allowing the interaction to re-loop on itself to give an endless loop effect.
The second interaction is the one used to trigger the animate stack interaction. This one contains a single rule that calls the animate stack interaction after a 2 second pause. The reason for this is so that the first image you see is shown for 2 seconds before the animation starts looping.
This is then triggered on page load (page settings).
So that’s it. You can now create your own custom carousels from scratch and apply your own unique transition effects with zero code. 
Download Image Stack Example (543.2 KB)
