elegantseagulls

You are targeting `#line` in your .each, and you only have one ID of 'line'. You should be using a class in this case if you want to be semantically correct. See updated pen:

Hey GSAP friends! I'm tweening a SVG circle's radius value and need it to sorta vibrate as it expands and contrasts. I'm just wondering, from a performance standpoint, what should give me best performance: var tl = new TimelineMax({repeat: -1, ease:Power0.easeNone}) //A: tl .to(svg, 2, {attr:{r:150}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")}) .to(svg, 2, {attr:{r:100}, ease: CustomEase.create("custom", "M0,0,C0,0,0.051,0.218,0.06,0.256,0.073,0.245,0.138,0.197,0.155,0.185,0.166,0.209,0.213,0.311,0.22,0.324,0.222,0.316,0.291,0.284,0.294,0.276,0.299,0.29,0.362,0.23,0.386,0.284,0.466,0.375,0.446,0.529,0.474,0.56,0.479,0.538,0.574,0.486,0.58,0.462,0.622,0.505,0.803,0.689,0.905,0.792,0.911,0.871,0.923,1.026,0.925,1.045,0.929,1.038,0.973,0.959,0.98,0.948,0.982,0.954,1,1,1,1")}) //B: tl .to(svg, 4, {bezier:{curviness:1.25, values:[{ {attr:{r:90}}, {attr:{r:40}},{attr:{r:50}},{attr:{r:80}},{attr:{r:150}},/*...etc...*/{attr:{r:95}},{attr:{r:100}} ]}} }) //or C: tl .to(svg, .1, {attr:{r:90}}) .to(svg, .1, {attr:{r:40}}) /*...etc...*/ .to(svg, .1, {attr:{r:150}}) /*...etc...*/ .to(svg, .1, {attr:{r:100}}) I know the level of control/readability will be different with each, but just wondering from a performance standpoint what will be best, or if it'd be minimal? Also, how would one go about testing this? There will be more going on in the timeline (several circles being animated in a similar way).

FYI. And for anyone else who may experience this: Looks like it's an issue with Uglify; I think I have it pin-pointed to this issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/355 NOTE: I edited the topic of this post for more clarity with the cause of the issue.

Ok. Sorta figured it out...or at least found a solution. Looks like my build environment got corrupted or buggy somehow. I was installing packages via `npm install` and it would fail, however if I used `yarn install` it works. Not at all sure why this is happening, but my gulp compiled JS is different after installing from npm vs yarn. ?

I'm at a loss. I cannot replicate this issue in a CodePen so sorry in advance. Here's what I have: var aiAnimations = (function () { function init() { TweenMax.set('.ai-hero__flare', { opacity: 1, transformOrigin:'50% 50%'}) TweenMax.from('.ai-hero__flare', .7, { scale: 0, ease: Power3.easeOut }) } return { init: init, }; })(jQuery); $(document).ready(function () { aiAnimations.init(); }); The output is: element { transform-origin: 0px center 0px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); } I cannot figure out what is going wrong with transformOrigin. I'm loading GSAP v: 2.0.2 via NPM and am compiling via Gulp. If I remove the line with transformOrigin nothing shows up for transform-origin inline, so it's not being overwritten elsewhere. Any ideas? I can set the transform-origin in my CSS, but I'd rather control it via GSAP. Thanks, Ryan

@PointC Oh, dang! Thanks! Not sure why that didn't cross my mind.

Hi Friends, I'm trying to scrub to different labels in my timeline using `tweenTo` and I want the time to tween there to be 1s no matter where in the timeline I start from. Is there any way to set a time duration on a `.tweenTo`?

Ok, diving even deeper, it def seems to be a bug in Chrome-based browsers. I tested this in FireFox and it works great. It breaks in Chrome and Safari. See simplified new pen:

Found a Solution. I ended up defining the SVG as a symbol and displaying it using `use`. Seems to break if I I add display none to the sprite SVG

Thanks, @Carl. I dove a bit deeper and think the issue is stemming from the `display:none;`. I updated the pen without buttons wrapping to confirm this. Any suggestions?

Running into something super strange. I have a site with two nav menu actions that I wanted to control a single timeline. When you click the hamburger then resize the other menu hamburger crops in an unexpected way. To replicate: toggle the menu and resize the screen (the breakpoint is at 900px). Any ideas what's causing this?

@OSUblake Very interesting. Looks like I'll have to change my markup/js to use SVG filters. IEdge support wont be a big deal, as it's basically just an enhancement to provide some environmental depth. Thanks for the help!

Thanks @OSUblake! That should do the trick for Chrome, but it doesn't seem to be working in FireFox, I tried prefixing, as well as moving the color values back to end. Any thoughts?

Hey GSAPers, I'm working on animating a drop-shadow filter, but every time I try to add a color value in, the tween breaks. Am I doing something wrong? See Pen for example: https://codepen.io/ryan_labar/pen/rGaQYP

Thanks as always, Carl! I suppose I should have checked that, but never guessed that would have caused it as it seemed like a small filter! I think I'll end up only adding the filters for the desktop experience. Have a great day!

Hi GSAP Friends, Question/Observation/Bug: Working on a DrawSVG animation and was having some huge performance issues on iOS mobile. It turns out that adding a size directly to the SVG element was causing the issue (adding a size to a div wrapper helped eliminate the issue). Size on SVG pen (awful on iOS): http://codepen.io/ryan_labar/pen/wWqGZk Size on div wrapper pen (much better on iOS): http://codepen.io/ryan_labar/pen/mErPEK Any reason for this issue (am I doing something wrong)? Not needing to wrap an SVG in a div would really be idea. Is it a GSAP bug, or the fault of the browser (or both)? Thanks! **UPDATE** even with the div wrapper, performance isn't great on mobile, what should I do? From my understanding, resizing my SVG's viewbox/internals may help, but IDK if that will eliminate the problem, it's not exactly a huge svg file--size or otherwise

Hi @PointC and @Shaun Gorneau, Thanks for the timely responses! Both answers are great. I think I was just over complicating as I'm used to adding classes for CSS transition Hamburger Menus! Have a great day! Ryan

Hi All, I'm trying to get an element to reverse its animation once it's clicked a second time. I'm using GSAP to add and remove classes (to it, and other elements), as a way to start the initiate the animation. I've not uses reverse before, but have looked at other examples and documentation and can't see what I'm doing wrong. It seems like I'm overlooking something pretty simple. codepen.io/ryan_labar/pen/QyyzVX Any thoughts?

Here's the "end" product: http://codepen.io/ryan_labar/pen/vNozXO

Thank you so much for the detailed response, @Jonathan! It's answers like this that makes me love GSAP! Thanks for the info on the CSSPlugin. I was hoping to leverage the variables for colors in SCSS, but I might just have to hardcode those into the JS... Also, you'll be happy to know I wasn't planning on keeping the <br/> elements.

Hi all, I'm having an issue with transformOrigin combined with scale in Chrome (for OSX) (not the case in FF or Opera). Check a box, and click the CORRECT button. The 'check' jumps up the the viewBox in Chrome, but stays nicely centered in FF and Opera. This Pen has been fixed to show solution. http://codepen.io/ryan_labar/pen/vNozXO

Well I figured it out. Sorta. It was breaking due to the .from() I was using with DrawSVG. I needed to set the length to 0 and use to(). Solution is here: http://codepen.io/ryan_labar/pen/vNozXO

Hi All, I'm working on a custom radio checkbox using drawSVG and am having a bit of trouble getting my animation to play more than once. I'm thinking that resetting the timeline once the animation is completed is how it should be done, but I'm not able to quite figure that out. Please see the Codepen ( details. Thanks! Ryan