Apply to an object
Animated Slider is a widget that can be placed in a Composition Widget and it allows you to create animated objects within the Composition Widget by duplicating the widget or placing a new copy of the widget in the Composition Widget. You can also watch theOverview Video.
© Copyright 2015 - QooQee.com
Installing the widget
After you got the widget, to your account and click on the DOWNLOADS button to will receive a .zip file, unzip the file and Install the widget.
Lets get started!
Step by Step instruction
Preform the following steps to create an animated slideshow
1. Place a composition widget on the page.
Composition Widget is a widget that is available in muse by default. you can locate the Composition Widget in the Widget Library panel. For start, place a blank Composition Widget on the page.
2. Place the Animated Slider widget
Drag and drop the widget from the Library panel into the Composition Widget
3. Customize the widget and preview
That was all you need to do!
Now you can add a background image to the widget through the Fill panel, andAdd text.
You can also
Create a time-based animation.
Apply the widget to any object besides the widget itself.
Fully customize each transition.
Click on each section to see the details.
Start adding transitions
1. Transitions (Presets)
If you want a more complex movement, you can choose to have aCustomized Transition.
When the slide is leaving, the slider any of the transitions in this option will preform the exact same movement but reversed.
1.a. Simple Fade
The object fades in when the slide appears, and fades out when its slide leaves the slider.
1.b. Move from top
when the slide appears, the object moves from top to the bottom, where it is originally placed in the slide.
1.c. Move from bottom
when the slide appears, the object moves from bottom to the top, where it is originally placed in the slide.
1.d. Move from right
when the slide appears, the object moves from right to the left, where it is originally placed in the slide.
1.e. Move from left
when the slide appears, the object moves from left to the right, where it is originally placed in the slide.
when the slide appears, the object transforms from fully blurred to its normal form.
1.g. Scale down
when the slide appears, the object shrinks to its original size from a larger scale.
1.g. Scale up
when the slide appears, the object scales up to its original size from a smaller size.
Set the timing of each object and create animation
2. Timing (Duration , Delay)
By using these two options you can decide which object appears when and set the order of the object to show up.
The number in this option defines how long the transition takes in seconds.
For example - If you set the Duration to 2 (which means 2 seconds), it takes 2 seconds from the object to move to its original state after the transition starts (after the delay).
This is the most important option for defining the order of the objects to show up.
The number in this option is the amount of time, in seconds, before the transition starts.
For example - If you set the Duration to 2 (which means 2 seconds), and delay to 3 (which means 3 seconds), after the slide (the slide in which you placed the object) shows up, the transition does not take place and will be delayed for 3 seconds, then it starts and the animation takes 2 seconds.
Example of how to make multiple objects show up one after another
If you have 3 objects that you want them to appear one ofter another, you can use the Delay and Duration options.
You want the first object appears after 0 second and its transition takes 2 seconds.
You want the second object appears after the first one and its transition takes 0 second.
You want the third object appears after the second one and its transition takes 2 second.
If you want to have multiple objects with the same type of transition but appearing one after another :
This way you can prevent editing the widget to get the same transition for each copy separately.
3. Adding text
You can use this option to add text to the Animated Animated Slider widget.
Font, Font-size, Font-color can be style through the text panel . Simply select the widget and change the font just like the way you do it for any other object in Muse.
This option specifies the speed curve of the transition effect.
5. Additional options (Center the text, Fading)
5.a Center the text vertically
We do not have the option to vertically center the text in its container in muse by default, so it might be handy if you ever decide to perfectly center the text vertically in the widget container.
By checking this option, whatever effect is selected for the transition, it starts from 0 opacity.
Also the object will fade out when the transition is reversed, then the object will have the selected transition and perfectly fade out at the same time, which can be useful in most cases.
Apply to any object in Muse
6. Using graphic Style
This handy feature allows you to apply the widget to any other object in Muse. All you need to do is toApply a Graphic Styleto an object , check this option and type the style name in the widget option panel, then whatever changes you make on the widget options will be applied to that object.
Note - You must place your object in a Composition Widget in order to see the transition, since the Animated Slider widget works only with Composition Widgets.
CLICK HEREto see how you can apply a Graphic Style to an object
How to apply the widget to an object that does not accept Graphic Style
If you decide to apply the animation to an object like a Form, which does not accept Graphic Style, preform the following steps:
Create a fully customized transition
7.a Horizontal and Vertical movements
7. Customized transition
By checking the Customized Transition option, you will not be able to select the presets anymore, but you will have the advantage of customizing the transition exactly the way you desire.
The value for this options define the placement of the object where it starts the transition.
The number you enter on these options will affect the position of the object by pixels.
For example - I If you type 200 for the Horizontal movement, the object starts the transition from 200 pixels from right, in compare to its original position. The original position is where you place the object in the slider, in the design view.
NOTE - You can use both negative and positive values for thee options. The negative value for the Horizontal movement moves the object to the left in compare to its original position, and negative values for the vertical movement moves the object to the bottom at the starting point, in compare to its original position.
For example - I If you type 200 for the Vertical movement option, the object starts the transition from 200 pixels on top of its original position. The original position is where you place the object in the slider, in the design view.
7.b Scale, Rotation, Blur
These options can be used and combined with the movement options for more customization.
For example - I If you type 200 for the Horizontal movement, 0.5 for the Scale (meaning that the object start form half of its original size), 360 for Rotate, and 20 for Blur:
7.c Transform origin
This option defines where on the object the transition will be anchored.
For example - if you choose Bottom-Left, and have the object rotates for 360 degree, the object will anchor to its bottom-left side for the rotation that the widget preforms on it: