1. Assigning Options
2. Preset Animations
3. Remote Triggering
5. Customized Animation
Animated Object allows you to animate almost any object. it provides you with different options on how the animation triggers and how to assign the animation to an object.
© Copyright 2015 - QooQee.com
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.
Click on each section to see the details.
There are three assigning Options.
1.a Widget itself
The widget container can be used as an object. By choosing this option you can add a fill color and/or background color to widget and customize the animation.
1.b Objects with a certain Graphic Style
This method is the best way to apply the widget to any other object. Take the following steps for this method:
1.b Using tooltips to assign the animation
This is the fastest method to assign the animation to your object. In this method, you are not able to use the presets, neither the Customized Animation options, BUT you can create your own animation in a few seconds just by typing the movements you want:
Transition names (can be combined) :
when the animation starts, the object moves from top to the bottom, where it is originally placed in the slide.
when the animation starts, the object moves from bottom to the top, where it is originally placed in the slide.
when the animation starts, the object moves from right to the left, where it is originally placed in the slide.
when the animation starts, the object moves from left to the right, where it is originally placed in the slide.
when the animation starts, the object transforms from fully blurred to its normal form.
when the animation starts, the object shrinks to its original size from a larger scale.
when the animation starts, the object scales up to its original size from a smaller size.
when the animation starts, the object rotates, and gets back to its original form.
Steps to apply the transition names:
up, right, scale
In this example the object moves from top, right, and it scales down.
There are 74 preset, ready-to-use, animations that can be assigned to the object.
One of the distinguish features of the Animated object widget is that the triggering actions can be combined, and users are not limited to use only one action. If you choose to have the Customized Animation feature, or assigning through the tooltips, the Click and Hover will not be available, but for all the preset animations all the triggering options are available.
Click on the object
Entering the page from top
The animation happens only when you are scrolling back to the top and the object enters the page
Hover on the object
Entering the page from bottom
The animation happens only when you are scrolling down to the bottom of the page and the object enters the page
All the triggering options are active
Hover, Click, Entering from top, Entering from bottom
Animation happens only once:
This option is only for when you choose to have the animation starts when the object enters the page from top or bottom. You can check the option "Animation happens only once" and the animation will not repeat when it enters from top or bottom of the page.
An interesting fact about the widget
When you select the options "Entering the page from top" and "Entering the page from bottom" you do not get to assign any offset number, however the widget is smart, and based on a few factors, it understands when is the best time to trigger the animation, so the end user sees the entire transition and will not miss any part of it.
Even if you resize the page, the widget does the math and gives new numbers to the offset so the animation always triggers at the best moment.
The Remote Triggering option allows you to have a separate object and use it as the trigger for the animation.
For example, if you have five animated objects and you want them to start at the same time when you click on an icon, you can give a Graphic Style to that button, and use it as the trigger for all those animated objects.
Four animated objects with different delays and rotation values that all trigger by clicking on the "Click Me" Button.
Five objects that are animated by the Graphic Stylemethod. Each has a separate Graphic Style and for each one there is a copy of the Animated Object widget to control its animation. they all trigger by the Click Me butt.
By using the timing options you can decide when object appears, the delay before the animation happens, and the amount of times the animation repeats (the repeat option is only for presets).
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).
The number of time the animation plays, but this option is only available for presets not for the Advanced Animation section, so if you choose to have an advanced animation option turned on, you will not be able to use the repeat indicator.
The number of Delay defines the amount of time (in second) before the anion starts, after it is triggered.
For example - If you set the Delay to 2 (which means 2 seconds), and the triggers method is "On Click", then if you click on the object, the animation triggers, but it waits for 2 seconds before it starts.
By checking the Customized Animation option, you will not be able to select the presets anymore, but you will have the advantage of customizing the animation exactly the way you desire. The customized transition is not available for when the assigning method is set to use the tooltips for triggering the animation.
6.a Horizontal & Vertical Movement
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.
6.b Scale - Rotation - Blur
These options can be used and combined with the movement options for more customization.
6.c Transform Origin
This option defines where on the object the transition will be anchored.