Hover:Zoom n Rotate Widget

Apply amazing Zoom and Rotation effect on the image when someone hover over the image


Features

Hover Animations

Create nice zoom and rotate animation on you images in Adobe Muse When someone hover mouse over it

Zoom and Rotate

This Widget gives you the options to decide the rottion angle from -1440 deg to 1440 deg. Zoom is available from 0% to 10000%.

Transitions

In this widget you can decide transition type, transition delay ans 5 transition types like ease, liner, ease in, ease out, ease in and out.

Free Widget

This is a free Widget and you need not to spend a penny for it. Just register and download it.


How to Use

Once you download the file, Fing "Musepen_hover_zoom_rotate.zip" in your Downloads folder. Double click on the .zip file to export it. You will now have a folder named after the widget.  Now follow the steps below.

1. Look for Musepen_hover_zoom_rotate.mulib and double click on it.

2. If Muse is not open it will lauch Muse and will add the widget to Library Panel.

3. The imported folder (Musepen widgets Collection) will appears in the Library panel, ready for use in the current file. Then drag/drop the widget to your project, set the options and enjoy!

The most impostant part is to link the image with the widget. For that you need to create a graphics style in Muse that we will use in the widget that will help it to find target image

Creative Graphics Style

  1. Place the Image in Muse and Give it the size and formatting as per your requiremtn
  2. Once done Select the image and go to "Graphics Style" panel in Muse
  3. Click on new graphics style button in the panel and give this graphic stype an name that you can remember

Image ID

  1. Once done creating Graphics Style Go to Options panel of the Widget and Fill the Exact name of Graphic style in Image ID Section
  2. If you want to use multiple Images with the same animation then give them all the same Graphic style. For that click on the images, go to graphics style panel and select the same graphic style
  3. Click Here to know more about Graphic Style in Muse

This widget allows you following transition controls in Transition Settings Section.

  1. Transition Duration  : This allows you to to deside the duration of the animation. Default value is set to 0.4 that is 400 mili seconds. you can select values from  0 to 100.
  2. Trasnsition Delay : if you do not want animation to trigger immidiately on hover you can set delay with Transition delay options. By default its 0 but you can select values from 0 to 100 seconds.
  3. Trasnsition Type : There are five type of transition types available for this widgets.
    • Ease
    • Linear
    • Ease-In
    • Ease-Out
    • Ease-In-Out

This widget allows you following animation controls in Animation Settings Section.

  1. Image Scaling : This section enables you ddeeside the Zooming of the image on Hover. Default value is 1.2 that zooms image by 120%. In case you want to scale down the image on hover then give it the value of less than 1 in the multiples of 0.1. for an example you want image to scale down to 70% then you should select 0.7 in the Scaling option.
  2. Image Rotation Angle : This section allows you to decide the rotation on hover. Default value is 6 deg but you can select any value from -1440 deg to +1440 deg. For clockwise rotation please select positive values and for anti clockwise rotation select negtive values.

Here is all we have for you in this Free Muse widget. Keep on exploring musepen.com for more Free Muse widgets.


Video Tutorial