The Dynamic Slide widget gives you the power of one of the most popular and highly-requested effects ever: the Ken Burns effect. This effect uses a subtle zoom & pan to add motion and interest to still images within a slideshow. To take things one step further, we've built in multiple animation options for the text, icons, and buttons within your captions.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.2
Supported Devices: Desktop, Tablet, Phone
Release Log
1.2: Fixed issues with caption centering and breakpoint transitions (09/28/2017)
1.1: Added prepared slideshow for quick editing (02/12/2016)
1.0: Adds collapsible panel functionality and support for responsive Muse
Setup
Drag the widget from the library and drop into your project in Design mode.
We've set up the slideshow with images, graphics, and text to ease setup.
You may find that the slideshow components may not be perfectly aligned when dropped into your project. This is not unusual. Simply re-align the components as you like.
Dynamic Slide works in conjunction with the standard Muse Slideshow widget. We suggest placing the orange MuseThemes widget components off-canvas so that they're out of the way.
Looking at the MuseThemes widget components, you will find 1 "Enabler" widget and 4 "Individual Slide" widgets. The Enabler widget is required for Slider functionality. An Individual Slide widget is required for every slide in the slidewhow. If you add additional slide images, duplicate Individual Slide widgets by Option/Alt-dragging.
There are 2 primary ways to customize Dynamic Slide with your content:
Replace pre-set images and content: A simple way to set up Dynamic Slide is to individually replace elements that are pre-set. Select a hero image (slide), right-click, then select "Replace Image..." to update indidual slide images. Click the caption area, then double click to edit text content within.
Start from scratch: If you're comfortable working with Muse slideshows and compositions, you may want to start from scratch. You can clear the pre-set images from the slideshow by right-clicking the slideshow, then selecting "Clear Widget Contents". All images will be removed. Open the slideshow option panel, then click the folder icon next to the "Add Images" link. This will allow you to select all of the images for your slideshow from your computer at the same time. Double-click the caption areas to update caption text.
By default, caption animation is activated. To disable, uncheck the option in the main Enabler widget option panel.
You will notice that every hero image (individual slide) has a graphic style applied. This is key to the functionality of the widget. The same applies to caption panels for each slide. Unique graphic styles must be defined in the Individual Slide widget components.
Every Individual Slide widget must have a unique slide number (this is the first option in the Individual Slide widget component option panel.
Let's look at the individual sections within the Individual Slide sections:
Slide Image:
Scale Start and End options refer to the zoom of the image. Higher numbers represent more zoom.
Animation Duration represents the time it takes to complete the Scale Start to End. Note that the master transition time setting is in the slideshow widget option panel. If the Animation Duration setting in the Individual Slide widget component is shorter than the transition duration setting in the slideshow widget component, the scale animation will repeat.
The rest of the settings in this section refer to additional slide transition settings.
Main Text: This section controls the main caption text animation timing and style. Settings work similarly to the Slide Image settings explained above.
Secondary Text: This section controls the secondary caption text animation timing and style. Settings work similarly to the Slide Image settings explained above.
Previous and Next buttons function to advance images even in design mode. If you click the button quickly more than once, your cursor may activate the text tool since the previous/next buttons are text-based. Reselect the pointer tool to advance images again
Commonly Asked Questions
How do I add animated images in addition to the text?
Images can be added to the caption area by copying and pasting directly into the text box. Once an image is placed, it should be treated as if it were a text character by positioning with the cursor.
How did you add music to the advanced demo?
If you place our MP3 Player widget in design mode outside of the page area, then set the player to autoplay, it works great for background music.