michaelsboost

I feel like this is kind of a stupid question. So, I pulled up the MotionPathHelper.editPath() Demo (codepen.io) and I wanted to see if it works with a polygon element. So I gave it a test and obviously it doesn't. My question is 1 why? and 2 is this a plan to extend this plugin to add polygon support in the future?

I made a simple pen to show how to cycle different mouths for a character rig (can be used for eyes, noses, poses, etc: It's just to get the point across). What I'm trying to figure out is how can I apply the rig to the timeline using the GSAP way. For example, have mouth 3 show first and have a duration for 1 second and then mouth 5 show and have a duration for 2 seconds. I feel like I would need to use gsap.utils for this utilizing toArray() and maybe wrap() but only thing I got working was the demo I provided after 2 days of tinkering. If anyone can help it'd be greatly appreciated.

Of course ? I just use the free download you guys provide. I don't modify GSAP at all. What I did is I saw the GSDevTools demo and copied and pasted the code from Microsoft Edge's Dev Tools. Because GSDevTools is a membership benefit of Club GreenSock I'll just make my own UI and leave it alone. Thank you for clarifying that for me.

So, I'm making an app I would like to use a modified UI of GSDevTools for a completely free and open-source application I've been developing on and off in my free time for over 2 years. I just don't want to worry about any legal problems with licensing (even though I'm developing a free and open-source app). I know I can make my own similar to it, but I would like to save time hence the reason for the post. NOTE: I'm not a lawyer by any means. According to the Standard License - GreenSock Sounds good until I read... Does this mean I have to make my own UI similar to GSDevTools to use in my free and open-source app or no?

Wow!! ? that's a neat way to accomplish this. I didn't know about gsap.utils, toArray(), or wrap().

Fiddle: https://jsfiddle.net/gucmsja2/2/ I attempted this again using more frames and now I have a different problem that you can see pretty clearly in my fiddle. It starts with only 1 frame visible but then instead of hiding the others as it iterates displaying the index to block. All the others stay at display block until it plays. How can this be fixed? I know I can use onUpdate() and ticks to get the index but having difficulty setting the delay from that. (example: https://jsfiddle.net/jp2kasry/1/) Here's an example of what it's supposed to look like: https://jsfiddle.net/gucmsja2/3/

Is it possible to show/hide an array in GSAP like you can with SVGAnimFrames?

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

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?

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);

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)

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.

I just realized the mouth of my character isn't staying white within the gif animation (from the image sequence). Not sure why tho

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:

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