OnLoad Animator applies animations any Muse element - a great way to add movement and interest to buttons, headlines, and CTA's (Calls to Action).
With 30+ animations and options for hover triggers, looping animation, and delaying animation until elements are scrolled into view, this is a powerful widget in small package.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Setup
Drag the widget from the library and drop into your project in Design mode.
The widget components can be placed anywhere you like. Feel free to place them off-canvas to keep them out of the way.
The Base widget is required for any page in which you will be using OnLoad Animator. You can use as many instances of the Main widet as you like, in conjunction with the single Base widget.
There are three Animation Modes:
Animate Once When In View: In this mode, the element animates just once when it appears in your browser. For example, it can be way down your page on a single page scrolling site, and it will animate when you get there. If you scroll away and come back, it won't animate.
Animate Every Time In View: This mode also waits to animate until it appears in the browser, but also re-animates if you scroll away then back.
Loop Infinitely: This mode starts animating on page load and keeps looping.
Fade Out Animation: The Fade Out option fades elements between cycles in Looping mode.
Overflow Mask: This option confines the animation to the area of a state button. So if you have an animation type that flies in from off canvas, it won't fly across the screen. It will instead only animate within the state button. To use this option, enable the Overflow Mask. Next, drop a state button into your project and apply a graphic style to it. Define the graphic style name in the Mask Graphic Style field. Lastly, place the elements you wish to animate within the state button.
Commonly Asked Questions
What does the "Overflow Mask" do?
The Overflow Mask allows animations to be confined to a specific area, like a state button. Just place your animated elements inside a state button.
How do I get the "Fade Out" option to work?
The Fade Out option fades elements between cycles in Looping mode. You will need to make sure you're using an animation type labeled "Fade xxxxx"