10AM
Saturday
Add auto-cycling image carousels as an engaging way to visualize an event.
Template - Double Image Carousel
1280px x 720px
Add a rectangle that's the same color as the background to "mask" other elements as they animate into view.
In this example the white mask covers the bottom rectangle to make it look like the bottom rectangle is sliding in from the center.
Double click the text to change the header.
In the design panel, under typography, adjust the lettering to get your header text to be the same length as the image.
Add multiple interactions to one hotspot.
Two different carousels and animations are triggered when the "cycle next"/"cycle previous" hotspot is clicked by the user. Both the right and left images cycle to the next image, in their respective carousels. Additionally, the right and left image masks become visible, which triggers their animations.
To replace an image, select the png or jpeg on the canvas or in the layers panel and click the "Replace image" button, which is next to the image thumbnail in the design panel. Any applied animation to the original image will carry over to the new one.
Tip: Try to make the new image a similar size and dimension to the image being replaced.
Link out to an external URL or a specific page.
Select the "Learn More" hotspot in the canvas or the layers panel. Navigate to the interact tab and open the "On Click" interaction. Add a custom URL or change the action to "Go to page". Additional pages can be added by hitting the + next to 1 Page in the left panel.
How to create an auto-cycling carousel.
Create a hotspot and add an "On view - cycle next" interaction. Select the folders you want to auto cycle through the contents. You can also set a delay to slow down the cycle speed.
TAGs, tickets & labels
TAGs, tickets & labels
TAGs, tickets & labels