Adobe Muse Hover Circle Spinner Widget

Hover : Circle Spinner Widget

Hover : Circle Spinner Widget

 

Adobe Muse Hover Circle Spinner Widget allow you to create an nice Spinner 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. give clockwise and anticlockwise spin.
  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-circle_spinn.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 obser 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:

Hover : Circle spinner animation panel

Hover : Circle spinner animation 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 range 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 the drop down.

Rotation Angle: Outer circle of the widget spinns to 180 degree. you can change it from -2000 degree to +2000 degree . negative values spinns anticlockwise.

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.

Spinner color Settings : Outer circle of the animation can have 3 colors with 50%,25%,25% area. Select it as per your choice.

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:

Hover :Circle Spinner text control panel

Hover :Circle Spinner 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.

2 Responses

  1. This widget is absolutely beautiful. It’s animation is wonderful, and it works the way it is supposed to, so congrats to the designer. The only problem I am having is that I would like to make it a tad smaller; maybe reduce it to a 75% size. The website I am working on for my church can’t have that big of a button in the homepage. Any chance you can tell me if it can be resized or if you have a similar widget that can be re-sizable? I appreciate your answer and help in advance.

Leave a Reply