Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About michaelsboost

  • Rank

Contact Methods

Profile Information

  • Gender
  • Location
    Rockford, IL
  • Interests
    Just a guy who’s goal is to make a positive impact!

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Examples of what I'm looking to do: I've been looking for a tool to manipulate a loaded svg path and polygon as I can use Snap.svg Free Transform for resizing and rotating. Well I couldn't find a library besides Paper.js that allows me to have interactive editing of Bezier curves however I don't want to work with canvas at all JUST SVG and I couldn't find anything for the SVG element. I'm still super confused as all I can find via Codepen and Github are demos in which the svg objects are inline HTML and the Javascript is targeting the inline HTML that wasn't dyna
  2. I learned how to control it using the position parameter. Just not showing the other animation come back.... Insert exactly 3 seconds from the start of the timelinetl.to(".class", {x: 100}, 3) My problem is showing that animation come back. Ideally like this...... var tl = new TimelineLite({paused: true}) tl.to("#green", 1, {x:750}, 0) .to("#green", 1, {x:0}, 2) .to("#blue", 2, {x:750, rotation:360}, 1) .to("#orange", 2, {x:750, rotation:360}, 2);
  3. I was playing with the TimelineLite Visualizer demo and ended up having a thought. Is it possible to animate the #green square by the x coordinate delay for 1 second and then rotate it showing on the timeline? Example screenshot (edited to show example result) Ideally the animation would go back like this except not only does the green animation not go back but it's not even visual on the timeline . tl.to("#green", 1, {x:750}, 0) .to("#green", 1, {x:0}, 2)
  4. As of June 7th, 2020 svgMotion has been officially released on Android. https://play.google.com/store/apps/details?id=com.webdgap.svgmotion Also as of June 8th, 2020 svgMotion is no longer an active project. All updates as of that date and on are solely contributor based implementations.
  5. I just realized the mouth of my character isn't staying white within the gif animation (from the image sequence). Not sure why tho
  6. I love making vector animations but if you're on a mobile device currently there's no app out there that allows you to make tween based animations. Desktop users have Blender, Synfig Studio, Keyshape, After Effects. If you're on a Chromebook you have Animatron Studio and even TweenUI but mobile users have been left in the dark far too long. So here's a preview of a free and open source app I'm working on in my free-time that will allow you to make svg/vector animations on a phone or tablet without writing a single line of code. It's still very much a work in progress and no-where near an al
  7. I decided to just put the onclick function into the img.onload function. Noticed on my computer it uses less cpu than promises. This demo I'm using gifshot to create the gif animation. https://codepen.io/michaelsboost/pen/MWWRMGL
  8. Why is it that after the image was already appended when I run.... document.querySelectorAll("section img").length In console it says "0"? Even when I run..... document.querySelector("section").innerHTML it says..... "" Can someone explain this for me? I'm confused.
  9. oh ok can't read it as a string must be an object.
  10. Thanks that actually makes since to me now lol. However I ran into another hiccup. I'm trying to append the image sequence as a PNG from a canvas element (cause that's the only way I know how to do it). (however it's not appending the image source as a image/png. when I console.log it shows fine but when I try and append it. I get.... Why is this and what can I do to fix it? https://codepen.io/michaelsboost/pen/WNNWBMo?editors=0010
  11. How would you grab the image sequence with multiple tweens going at once? Here's an example I tried in which the animation runs fine but the image sequence doesn't grab all the tweens. https://codepen.io/michaelsboost/pen/VwwNEEo?editors=0010
  12. I first heard about GreenSock a few years ago but never had a project where I needed it until recently. Anyway I started playing with it for the first time yesterday and really like it. However I'm now stuck and after all the reading I've been doing I can't find any help or solution hence why I registered. My question is simple, "How can I rotate just the eyeballs of my SVG without them changing position?" I've included my Pen via Codepen so you can take a look at the code. TweenMax.to(".clockexer .eye", 5, { y: 0, x: 0, rotation: 360, t