sjerrentrup

Hello, I have a short animation made using the DrawSVG Plugin. There's a lighting bolt in the middle. Problem is, it shows a long white line at the very beginning and then when in animates, it just jumps at the end to close off the object. I need this line to be invisible at the beginning and for the animation to run smoothly. Please check my Codepen URL. Thanks, -Stefan

Hi, I want to change the color of this box/background, smoothly from one color to the next. Right now, each time it changes color, it jumps back to alpha 0 and then fades the new color in. If I set alpha to 1 then the last color covers the other colors. You'll see what I mean in my pen. Thanks, -Stefan

I made a simple animation which works fine on desktop, but when viewed on my iPhone it staggers. It doen't run smoothly and doesn't do all the tweens it should. Can understand why this happens. I only use TweenMax as my external source. Somehow the phone won't accept all of it. Any idea what I can do to get this running smoothly on my phone? Thanks!

Is it possible to spool to a certain part in a timeline and play forward (or backward) from there? Like setting a flag and on init() calling a flag on that part of the animation (e.g. init("thirdPart"))? I ask this, because I need to debug and right now, I have to sit through the full animation to check the end. Would save a lot of time. Thanks, -Stefan

Hello, I'm working with SplitText and can't seem to get the opacity to work. I have it set to 0 in the CSS and then tween it to 1 in the code but it doesn't work. Any idea why? Also, I can't get the animation running on codepen like I can on my PC. Maybe I'm missing a file or something, but it isn't tweening. Thanks, -Stefan

Hello, I made a codepen page to illustrate my issue. Basically, I have a black box that tweens its' width and height properties, then tweens down Y 150px and tweens its' width and height again. However, when I resize the page, I need to change the Y and width and height coordinates. How can I do this when it's written in the script? Can I save the coordinates as variables and somehow change them when the browser resizes? Thanks!

No sorry, that isn't it. It was something else. I'll keep looking. Thanks!

HI, Sorry, if I might be wrong, but I read somewhere on this site, that you offer a type of app or utility that helps people make calculations. I can't quite remember what it's called, but it's somewhere mentioned on this website. Any idea? I'd really like to use it. Thanks!

I got it all working now! Thanks!

Ok, this is great! I got it working like I want! One last thing. I just uploaded a new page. I added, Play and Reverse buttons. If you click for fullscreen, then allow the animation ro run. When it's done, click "Reverse", and at then end of that animation, there's a small line at the bottom of the "X" leftover. How can I get that to appear gone? http://codepen.io/hyperbola/pen/OVEPrm

Hello, I'm finally starting to get somewhere with DrawSVGPlugin and I really like it! However, I have 2 questions. I posted my project in the CodePen URL and would like to know this: 1. How do I autofade a fill in and set the stroke to 0? Right now, I have the lines being drawn and then at the end of the animation, it sets the fills back in. But when they come in, they just appear, they don't fade in (as how I want them to). .set(".aux-sym-1-shadow, .aux-sym-2-shadow, .aux-a-line, .aux-u-line, .aux-x-line", {fill:"#75674a"}); 2. How can I call the onComplete trigger at the end of the animation? Thanks!

Thanks for the answers. What I'm looking for is more of an instructional manual. New to SVGs and I just want to know where I place my code etc., like the paths and so forth on my designs. I'm more of a designer. There's so much SVG code, I'm not sure where to start.

Hi, Are there any written tutorials on using the SVGPlugIn and complex SVGs? I'm getting new to SVG animation and would like some help. I see some examples on CodePen, but I need more indepth information on how it all works etc. Thanks.

Hello, I would like to produce an animation similar to the Physics2D example where there are many green dots shooting up (as seen on this website). The only thing I see for documentation are a few lines of code, but not more than that. Is there any sample, demo I can look into? Thanks!