TemplatesWidgetsBundles

Samples Shapes and text  Background Images                                 FeaturesHelp / DocumentationGet it here 

Widget options

Version 1

Duration

Delay

Text

Summary

Easing

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.

Customized Transition

© 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.

Widget options

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.

 

1.f.   Blur

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.

 

1.g.   Rotate

when the slide appears, the object rotates back to its original form.

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.

2.a    Duration

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).

 

2.b    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.

  • The first objects takes 0 second (no delay) before it starts and 2 seconds to do the transition,
  • So we need 2 seconds before starting the second object.
  • Therefore,  the second object's delay should be 2 (2+0) so it to appears right after the first one.
  • The second objects takes 3 second before it starts and 1 seconds to do the transition,
  • So we need 3 seconds before starting the third object.
  • Therefore,  the third object's delay should be 3 (2+1) so it to appears right after the second one.

0

2

3

2

1

2

 

RESULT

 

Tip

If you want to have multiple objects with the same type of transition but appearing one after another :

  1. For the first copy of the widget, customize the transition the way you want and place the widget in the Composition Widget.
  2. Duplicate the one you customized and change the delay, so it appears after the first one.
  3.  

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.

4.  Easing

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.

 

5.b    Fading

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:

 

  1. Copy the object to the clipboard (Cmd +c / Ctrl +c).
  2. Create an empty text box.
  3. Double click on the on the text box and paste the object (exactly where you type in a text box). and the object will be placed in the text box.
  4. Apply a Graphic Styleto the text box, place the text box in a composition widget and control it through the Animated Slider widget.

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.

0

200

 

 

7.b    Scale, Rotation, Blur

These options can be used and combined with the movement options for more customization.

 

  • Scale can be used to have the object resize on its starting point.
    • To have the object starts animating from a smaller size, use the number between 0- 1 for this value.
    •  
  • Rotation can be used to have the object starts from a certain amount of rotation in its starting point
    • For each multiply of 360 that you enter in this option, the object rotates once more. For example, if you enter 720 on this option, the objects fully rotates two times.
    •  
  • Blur can be used to have the object starts with a blur effect from its starting point.

 

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:

200

0.5

360

20

0

 

 

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: