Adobe Muse Hover Rolling Push Widget

Adobe Muse Hover Rolling Push Widget allow you to create an nice Rolling in and rotate animation, it also allow you to showcase product description to give more useful information to your site visitor. This widget gives you following Flexibilities.

  1. Transition Time (from 0 to 5 sec)
  2. Transition Type (Ease, Linear, Ease in, Ease out, Ease In Out)
  3. Rollin directions like left to right, right to left, top to bottom, bottom to top
  4. Define color combinations
  5. Define shapes with the help of Border radius
  6. Add product info on hover
  7. Add hyperlink to image

download Widget

How to Use Adobe Muse Hover Circle Spinner Widget

Double click on musepen_hover_rolling_push.mulib to add it to library panel in Adobe Muse.

once you are ready to create your hover animation go to library panel and drag and drop the “Musepen Circle spinner widget”  to the page where you want to place the image.

once you place this widget on the page you would observe that it has been placed in 2 containers. once is a big rectangle and other once is a small rectangle. smaller container is used to set properties of text for heading and description on hover and the bigger container is used to define animation properties.

now we will look at both the containers one by one.

Animation Control panel:

Give this animation a name : this option is used to link both the containers and to create a unique id to avoid any glitch with other animations. enter any one word to name this animation.

Heading for Hover  : Once you hover over the image it create a layer with Product heading and Description. enter the heading that you want to give to your image.

Description for Hover : This section is used to create description on hover. try not to exceed 3 lines.

Add image : Click on “Add file” and select the image you want to use.

URL To click : Enter the URL that you want visitor to be redirected on click after animation.

Transitions Duration : by default transition Duration for this widget is 0.8 seconds but you can select from the rane of 0 to 5 seconds.

Transitions Type : By default transition type is “Ease-in-out”. you can also opt for ease. ease-in. ease-out or linear from thr drop down.

Rotation Direction: OHere you can decide the direction of the rolling in Info. There are 4 options available. 1. Left to Right 2. Right to Left 3. Top to bottom 4. Bottom to top

Color on hover:  Use this option to give specific background color on over to ” Heading and description”layer.

Hover Color Opacity : Use this option to give specific opacity  to ” Heading and description”layer.

Color of Ring : With the help of this color pallet you can decide the color of the border of the image.

Ring Color Opacity: With the help of this option you can add opacity to the image border.

Ring Width: With the help of this option you can decide the thickness of this image border ring.

Border Radius : Give the container a shape of your Choice. in case you want it to be a rectangle animation  then set all the values to 1 and your circle will convert in to a rectangle. if you want any specific corner to be rectangular then select that corner and change the values.

Font :  you can also use this container to import any specific font available in Adobe Muse. You can Use Web fonts, Edge Web fonts , Typekit fonts and self hosted fonts. Avoid to use System font to avoid and unexpected behaviours.

To apply font select this container >> click on text button in tools panel >> this will enable the option to select font. select the font of your choice for heading and description layer.

You can create various different animations with the combination of these options

Text Control Panel:

Link with Main Animation : Enter the same Animation id that you have given to the first container of this widget so that they are linked.

Heading > Text Color: Select the color of the Heading by this color pallet.

Heading > Text case : Give a specific case to the heading out of UPPERCASE, lowercase, Capitalize or None.

Heading > Letter Spacing : create spaces between the letters of heading

Heading > Font Size : select font size for  heading text.

Heading > Text Shadow Color : Give text shadow color to heading text.

Description > Text Color : Select the color of the Description text by this color pallet.

Description > Text type : Make the text type italic , normal or oblique from this option.

Description > Font Size : select font size for  Description text.

How to Download and add this widget in muse:

To download this Widget click on the download button below, also click here for more details on downloading from musepen.com

download Widget

Please Feel Free to leave a comment about the widget to make it better or to share your feedback.

7 Responses

  1. Maddy Lopez says:

    HI, is there anyway you can open the links in a new tab?

  2. You’re just about right but what about the last one you posted not long ago that was slightly different? I believe you were right the first time.

  3. lordaker says:

    Awesome widget, but why we can’t set the width and height of the widget. Because when I put a picture in the widget, the picture take a square form. Why? I can’t have a rectangle, with the dimension as I want.

    • dev@musepen says:

      Codes for the this kind of widget is so complex that we were not able to give a lot of flexibility to it. Taking this in consideration in the next phase of developing hover widgets we will try to add this. Will inform you personally once we do it.

Leave a Reply