Jump to content

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


  • Posts

  • Joined

  • Last visited

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.

michaelsboost's Achievements

  1. Is it possible to show/hide an array in GSAP like you can with SVGAnimFrames?
  2. Question: How would you generate a GSAP animation as an image sequence that uses repeat and yoyo where it also generates the image sequence of the animation going backwards before it replays the animation again? (aka: not re-appending the images composed of the overall animation) See CodePen demo for an example I found years ago: https://codepen.io/osublake/pen/JKEjLb?editors=0010
  3. 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 dynamically added. Such as this following Codepen demo - https://codepen.io/osublake/pen/GrJQMR?editors=0010 I know there are libraries like Vector.js, Snap.svg or SVG.js that I maybe able to use. However while reading up on the API's I know SVGGeometryElement has a method getPointAtLength() which returns the point at a given distance along the path. My question is first is there a js library that allows me to have interactive editing of Bezier curves both fill and stroke? If so where and is there a demo to help me understand how to use it? If there isn't based upon what I want to do which is to to ONLY work with SVG what library of the 3 is the best and why?
  4. 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);
  5. 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)
  6. 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.
  7. I just realized the mouth of my character isn't staying white within the gif animation (from the image sequence). Not sure why tho
  8. 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 alpha release but I wanted to share it with you all and get your input. (Source code is available via Github - https://michaelsboost.github.io/svgMotion/) If you're familiar with GSAP and would like to collaborate please send me a message as I'm learning more about it as I'm making this application. You can watch the video from the link here:
  9. 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
  10. 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.
  11. oh ok can't read it as a string must be an object.
  12. 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
  13. 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
  14. 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, transformOrigin: "50% 50%", yoyo: false, repeat: -1, ease: Power0.none });