Text Slider is a fun widget that gives your designs a little pizzazz by continuously swapping a custom set of words, or phrases, in the text of your page, using a variety of animation effects.
Use it to list your skills on your portfolio site, push your latest product or even greet your visitors in multiple languages!
Browse to the location where you downloaded the widget file. Extract the contents of the file. Double-click the .mulib file to import it into the Library. This will launch Muse if it's not already open.
Alternatively, once you’ve unarchived the file, you can import the widget into the library by clicking the Import Muse Library icon at the base of the Library Panel.
Once it's imported the new widget will appear in the Library panel as a folder containing one or more items..
Start by dragging the Text Slider widget onto the design canvas from the Library panel.
The first option is the phrase to display. For our example we'll be using the widget to cycle through Jasmine's skills.
To set the position of the word carousel, we place the string %r. This can be placed anywhere within the phrase, or used on its own to display the words on their own. This is useful for adding quotations and short testimonials.
It's also possible to insert html codes into the string to include special characters. We've used &rsqot; to insert a typographer's quote to match the headline text. Our phrase will now read I’m a followed by the list of sliding words.
Next we have the field for adding the list of words that will cycle within our display phrase. Separate each word with the | (vertical bar) symbol. Here we've added our site owner's skills: an designer|a designer|a writer
Note: the maximum amount of characters that can be used in this field is 2048.
Now we'll choose the animation effect for the slider words. There are 31 transitions available. Here we'll use the Rubber Band effect, which stretches the word out and snaps back into place.
We can also set the interval between words. The default is 2 seconds, which we'll leave at the default for the example.
Note: some older web browsers cannot display transform effects and will replace it with a simple fade in.
The final set of options control the appearance of the words, independent to the overall phrase. The first setting is for the text colour. Here we're using a teal variant to match the stroke of the person's avatar circle.
The next option is to set the style. There are three settings: Default, which matches the overall text. Normal, which overrides the overall text style and Italics.
We'll change the setting to Normal for the example.
Next, we can set the weight of the text. There are five options here: Normal, which matches the overall weight, Lighter, Normal, Bold and Bolder. We'll use the Normal option for the example.
The final option is to set the case of the words. This makes it easier than going back and editing the individual word entries. We have four options: Normal, as before, takes the setting from the overall text, Upper Case, Lower Case and Capitalise. We'll this at Default for no change.
Before we change the font and size, we'll position and expand the widget container to accommodate the larger text. This helps to prevent unwanted shifting of the page elements below.
Now we'll set the typeface for the display text and slider words. Make sure the widget's frame is selected. Go to the Text panel. Set the font, size, colour and alignment (centred by default) as you would with a normal text frame. We've set the same typeface as the page heading, the Edge web font Satisfy.
Finally, we'll set the size, colour and alignment of the text. We've set the size slightly smaller than the heading and centred it.
All that remains is to preview the page in Muse, or in the browser. We can fine tune any formatting issues and then we're good to go!
This is a low-framerate GIF preview. The actual animation on the page is completely smooth.