SVG Paint (released)

Discussion in 'Beta Testing' started by Brandon, Aug 16, 2016.

  1. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    169
    40
    This widget takes your .SVG files and animates them on your site, creating a "hand-drawn" feel to icons, buttons, graphics, and more. DEMO

    Setup:
    • Drop widget into your Muse project
    • Click "Add File" to load an .SVG file
    • At this point, the widget is functional. Preview in browser to take a look with default settings.
    • Select Trigger style:
      • Auto Start: Starts animation on page load
      • In Viewport: Animates once the widget is in the viewport. For example, if your widget is placed at the bottom of a long single page scrolling site, it won't animate until you scroll to it.
      • Manual: Use this setting in conjunction with the "Manual Start Settings" section options
    • Go through the rest of the settings to fine tune colors, strokes, timing, animation details, and much more
    Members can download the widget here: http://www.muse-themes.com/pages/beta-downloads
    Download includes widget, demo muse file with widgets all set up, and assets.

    Please share your feedback in this thread. Thanks!
     
    Sarah likes this.
  2. Anand Ramnarine

    Anand Ramnarine New Member

    1
    0
    Hey Brandon, i did some testing with the widget and i love it, been waiting on this for a while however i have one issue i encounter with the widget. When i use it in conjunction with the pushy panes widget, my svg is duplicated onto the webpage. One just displays and the other animates as it was meant to.


    [​IMG]
     

    Attached Files:

  3. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    169
    40
    Hey @Anand Ramnarine

    Thanks for the info. This is likely an issue with Pushy Panes rather than the SVG widget. Pushy Panes has become a bit more unpredictable with the last couple Muse updates. We actually have a total rebuild of Pushy Panes in the works, which will also combine the functionality of Versa Slide. The rebuild will be built to better handle the changes to the way Muse outputs code since Muse went responsive. Pushy Panes and Versa Slide were built before responsive Muse - much has changed since then! More info: http://www.muse-themes.com/blogs/support/suggestions-for-versa-slide-alternatives

    Cheers
     
  4. CRAIG

    CRAIG Well-Known Member Advisory Group

    53
    4
    nice! I've been using a similar widget, but i've been frustrated because i've been restricted to it only animating once in viewport. I checked the demo, and see that you can repeat the animation on scroll in viewport - very cool, i'll give it a bash
     
  5. Mick Kenyon

    Mick Kenyon Well-Known Member

    62
    4
    Hi Brandon. The widget is working great.
    Just wondered if there was a way that it can animate then end with the original image. I have a coloured animation which looks great as it animates with the widget but the original is coloured and this would be my prefered end point - hope that makes sense?
     
  6. KevinD

    KevinD New Member

    3
    2
    Great widget, really like it and it's simple to use.
     
  7. Pete

    Pete Active Member

    42
    3
    Is there any update on this? - the widget is not resizeable - any svg that is loaded only stays at the same size of the original SVG - MuseForYoushop.com has the exact same widget! and this works brilliantly - but not with Pushy Panes! - which is a pain - when is the update for this due?
     
  8. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    169
    40
    Thanks for the feedback! And sorry for the delay in response - I've been out of town for a few days.

    Hi @Mick Kenyon, so when you say that your original SVG is coloured, do you mean that the lines are solid in the original, but the animation is just drawing the outlines of the lines? In other words, the lines aren't filled - they're empty?

    I've seen this happen in the Edge browser in Windows. Are you testing in Edge or Internet Explorer by chance? The widget should work "preferred" way that you describe: the animation should actually end up looking just like the original when it's done.

    Hi @Pete, the widget actually is resizable. You just have to make sure you adjust the width of the widget container since that's what sets the actual size of the widget. The only way that the widget wouldn't be resized is if you happened to try to resize the widget by grabbing the bottom or top of the container by itself to resize.

    And are you asking about an update for SVG Paint or Pushy Panes?

    Thanks!
     
  9. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    169
    40
    What are you seeing on Internet Explorer and Edge browsers? The lines in the SVG should be filled/solid as in the attached screenshot. The lines should not be empty.
     

    Attached Files:

  10. Pete

    Pete Active Member

    42
    3
    I was referring to the pushy panes as I cannot use the SVG paint on the same site. The SVG paint is very, very, very similar to that from MuseForYouShop.com - is there going to be any differences? - the one from there works really well (not with Pushy Panes) - so why would I want to use MT's version?
     
  11. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    169
    40
    Hey @Pete, we are working on a new widget build that will encompass the functionality of Pushy Panes AND Versa Slide. These two widgets are very powerful, and take over page positioning in Muse. Here's an announcement we made a little while back: http://www.muse-themes.com/blogs/support/suggestions-for-versa-slide-alternatives

    Some of our members use widgets from a variety of vendors; you're certainly welcome to use the widget from MuseForYouShop. I haven't personally used their widget, but as I understand it, our widget has additional customization controls built into the widget like fill, stroke, and opacity settings. The idea was to provide options for a little more control over the SVG than what comes straight from Illustrator.

    There are many vendors out there, and from time to time, MuseThemes may release something similar to something that exists elsewhere. We hope to be versatile enough with our selection of products (250+ widgets, themes, and stacks) that our members will have all the tools and training they ever need.

    Cheers,
     
  12. Mick Kenyon

    Mick Kenyon Well-Known Member

    62
    4
    Hi Brandon.

    Hi Brandon
    Thanks for getting back to me.
    See the example http://mktest05.businesscatalyst.com/index.html
    The image on the right is the original SVG and the 'preferred' end state,. I am viewing in Chrome.
    I have seen an example where an "Adobe Animate' file is placed behind the image and opacity comes in from zero to 100% over a 5 second period.
     
  13. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    169
    40
    Hi @Mick Kenyon

    Strange. Are the "Fill" settings set to a color (and not white or transparent)? If so, that is definitely not normal behavior. Due to the varying nature and complexity of different SVG's, we can't have multiple fill colors. The widget has to be told the fill color, so in the case of your icon, a single color would need to be chosen.

    Thanks,
     
  14. Mick Kenyon

    Mick Kenyon Well-Known Member

    62
    4
    Thanks Brandon.
    Thats what I thought and why I wondered if the end state could replace the SVG after it has done it's drawing animation with a PNG? This is just a suggestion as an enhancement, the current widget works just as it should.
     
  15. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,267
    243
    Mick, I may not be understanding your question, but any chance using multiple instances of the widget and breaking your logo into three parts so it can color the three objects?
    Just a thought
    Dj
     
  16. Brandon

    Brandon Widgetsman Staff Member Advisory Group

    169
    40
    Actually an interesting idea! Might be cool as an option...
     
  17. Mick Kenyon

    Mick Kenyon Well-Known Member

    62
    4
    Thanks DJ yes that would probably work.
     

Share This Page