Trace - Animate SVG Icons

http://www.muse-themes.com/products/trace

Add a lively focal point to any website by animating SVG icons with our Trace widget. Use existing .SVG (Scalable Vector Graphics) files, or easily convert .JPG or .PNG icons images into .SVG files using the convenient online resources listed in our Docs page.

The widget is ready to animate the moment you load an .SVG file - no advanced motion or animator skills needed! Deeper customization options are also included to control animation styles, timing, easing, start triggers, replay triggers and more.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.1
  • Supported Devices: Desktop, Tablet, Phone




Setup

  • Drag the widget from the library and drop into your project in Design mode.
  • The widget container controls the size of the icon when previewed or published.
  • You will likely see a preview of the SVG icon in the widget container. Muse will usually render the icon in a partially animated state, so the icon may look incomplete. This is normal.
  • Load your SVG. You can use any SVG file you may already have, or create one using Adobe Illustrator or similar software that allows you to create and edit SVG files.
  • Alternatively, you can convert existing image files using simple online SVG conversion tools. Here are a few:
  • If you’re using multiple Trace widgets on the same page, be sure to enter unique ID’s.
  • Use the “SVG Styling” section to set the stroke and fill style settings. One setting that may not seem obvious is the Stroke Miter Limit. This setting affects how SVG paths join together as stroke widths change.
  • Let’s take a look at a few settings in the “Animation Settings” section:
    • Animation Types:
      • One By One: The paths are drawn one by one. Each consecutive path begins once the previous one finishes. This is the best choice for a hand-drawn look.
      • Delayed: Each path is drawn one by one, but the "Animation Delay (in Frames)" setting controls the timing in-between.
      • Asynchronous: All paths begin and are drawn at the same time (they may end at different times).
    • Animation Start Trigger:
      • Auto Start: SVG’s are animated when the page is loaded, regardless of their position on the page.
      • When In Viewport: SVG’s are animated once they appear in the viewport. This works well on longer pages since the animation won’t begin until you scroll to it.
      • Manual: This mode allows for fine tuning of when SVG animation begins. More info below…
    • Animation Duration: This setting controls the entire duration of the SVG.
    • Animation Delay: This setting controls the delay between the drawing of each path (only works with the “Delayed” animation type).
    • Path Timing Function and Animation Timing Function allow the user to control the easing of the animations.
    • Replay:
      • On Click: SVG’s that have already animated will replay the animation when clicked on.
      • On Mouse Hover: SVG’s that have already animated will replay the animation when the mouse hovers over the SVG.
      • When In Viewport: SVG’s that have already animated will replay the animation whenever the SVG is in the browser viewport. This mode will re-animate the SVG each time it enters the viewport again.
      • No Replay: As the name implies, the SVG never replays once it has animated.
  • The settings in the “Manual Start Settings” section become available when the Animation Start Trigger setting is set to Manual:
    • Viewport Position To Trigger Animation (%): This setting determines when the SVG will animate, based on position within the viewport. If set at 50%, when the top of the SVG file reaches the halfway point of the screen, it will begin to animate. Negative values are supported.
    • Delay Before Animating (ms): Just as it sounds, this setting delays animation the designated amount of time.


When converting images (jpg, png, etc) to SVG, using simpler icon style images generally work better than complex images.


This widget does not support multiple flll colors. Separate stroke and fill colors may be used.


Commonly Asked Questions

What is an SVG file and how do I make one? SVG (Scalable Vector Graphics) files are commonly referred to as vectors. They work great on the web because they are small in file size and scale up and down - looking sharp on every display size, unlike standard images. You can make your own SVG icons using Adobe Illustrator or similar editor. You can also use free online tools to convert images to SVG files.

What does the Miter Stroke Limit setting do? This setting affects how paths come together at joints as stroke widths change.


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links