Transition: Specifies how the content in the target area changes when a user clicks or rolls over the trigger.Unless a user clicks the trigger, the target area remains hidden. Hide Target: Specified the settings for hiding a target.Show Target: Specifies the setting for target behavior when a user clicks the trigger.Select Lightbox if you want to dim the rest of the page. Select Stacked if you want your targets to overlap and select Scattered if you want your targets to be placed in different positions. Position: Specifies where the target area is positioned on the page.You can configure the following settings from the Options panel: Read on to learn about the types of Composition widgets that are available in Adobe Muse. Such designs provide a unique user experience for your site visitors. For example, if you are designing a catalog, you can use a Blank Composition widget to create a hamburger menu, and nest a Slideshow widget in the Target area of the Blank Composition widget. It is also possible to create interesting web designs by nesting widgets inside a Composition widget. This widget temporarily dims the rest of the page, thereby drawing the visitor's focus to the active display area. For example, as a user who is creating a photography site, you can choose a Lightbox Display widget to feature a photo gallery for your website. You can use these widgets to create unique navigational and browsing experiences without writing a single line of code.Īdobe Muse offers several types of Composition widgets that let you add and design different kinds of content for your website. Be it a photography site or a restaurant site, Composition widgets can be practically indispensible for any site, to display a wide variety of content. Composition widgets in Adobe Muse enable you to add complex interactivity to your websites. įor more video tutorials and widgets for Adobe Muse visit.
Watch the video above to see a demonstration of how to achieve this effect in Adobe Muse using the Muse Motion 2 widget found at. *Note: Middle widgets need to be in between the “Beginning” widget and the “End” widget. Preview website in the browser and check animations. The graphic style name for each widget has to match the elements on the website.ġ5. Repeat these steps for the rest of the elements. The value can be negative if you would like the rotation to go in the opposite direction.ġ4. Change the rotation value to another variation of 360. Copy and paste the first middle widget and change the graphic style name to “motion2.” Also add an earlier offset of 6 so that this animation starts at the same time as the first one. The less time for the rotation the faster it will spin.ġ3. Change the duration of the rotation to 6 seconds or as long as you would like. In the video tutorial the highest 360 rotation I enter is 1440. Do this by going to “Rotate” and selecting “Enable Rotate.” Then enter in a 360 rotation value. Add a rotation animation to the first middle Muse Motion 2 widget. The “Beginning” and “End” widgets control the overall timing of the sequence and a few other options.ġ1. We will be working mostly with the middle widget as these are the widgets that add animations to the elements on the Adobe Muse website. Drag and drop the “Muse Motion 2 – 2D Sequence,” below the “Add First” widget. If you do not see the Library Panel go to Window > Library.ġ0. Open the Library Panel in Adobe Muse and drag and drop the “Muse Motion 2 – Add First” widget and place at the top of your Adobe Muse website. Layer all elements on top of each other and assign the graphic style name motion1 through motion9 for each of the elements.ĩ. Select each element individually with the square and paste each individual element into Adobe Muse.Ĩ. Align them vertically and horizontally so they are perfectly centered.ħ. Re-group the logo to align the perfect square and the logo. Create a transparent square that is a bit larger than the logo. Change the colors of the logo if necessary.Ĥ. Un-group the logo to be able to select all of the elements.ģ. In this tutorial I will be going over how to animate a logo in Adobe Muse using the Muse Motion 2 Widget Powered by the Greensock Animation Platform (GSAP).Ģ.