jimthornton

Thanks, Mikel! Seems like about how much js I should have needed to animate a circle mask opening. And maybe I should be thinking about the problem differently, like your solution doesn't even use a mask. Maybe there is a way I can cheat the visual effect, without needing the actual mask and unmasking a bunch of items, like tweening their opacity at the same time I expand the circle., I'm also going to have to spend some time with your scroll activated code, more elegant than my solution of using a scroll library and feels smoother! Will report back!

Hi gsap people, So I'm a bit at a loss. I did a ton of research to find the best "cross compatible" way to reveal a background image on scroll. Basically it works as intended on chrome in the codepen, a more clear example is above the fold to scroll on https://bell.works/work but you can for sure see it in the codepen. Just some notes - TLDR maybe using svg injector to load the svg circles except for the clippath SVG mask which is inline i'm using objectBoundingBox for the clipPathUnits, otherwise the size of the circle on load less easily controlled, and then I had to tween the attributes of the SVG mask ellipse to get it sized right so it wouldn't be an oval based on browser width, e.g. var relWidth = $("#site-header-area").width(); var relHeight = $("#site-header-area").height(); var $rX = relHeight / relWidth * 0.5; TweenMax.set("#circle-mask", { attr: {cx:0.5, cy:0.6, ry: 0.5 * 0.75 , rx: $rX * 0.75 }, transformOrigin:"center center"}); for the live url https://bell.works/work the mask works like the codepen and intended, but doesn't tween on scroll, BUT if you go to the bottom of the page and back up, it tweens it all open, and then doesn't close it back up like on chrome - does that make sense? it's like there's a big delay in any calculations but it is working, just not bound to scroll I've read a series of posts about similar issues with solutions that don't really work or help: https://stackoverflow.com/questions/44722751/svg-clip-path-not-working-on-safari this bug https://bugs.webkit.org/show_bug.cgi?id=126207 removing -webkit-clip-path property, which worked for some people on safari 11 for some reason I feel like I went down the rabbit hole on this one. Is there something obvious I'm missing? Is there a better way to do this purely with gsap? Should I just quit altogether and make an SVG that looks like a mask with a hole in the middle and then tween the attributes or scale the whole thing on scroll? Any help would be greatly appreciated!

@greensock @jonathan it's like you guys know everything. thanks much!

Hi party people, So I'm totally stumped on this. I've been building a series of animations and they work just fine on their own. But as soon as I put them in bootstrap tabs or ui-kit tabs, half of them start animating less precisely, or ignoring transformOrigin properties, and some elements even seem like they're rotating around the top left of the full svg. To simplify: this is what one is supposed to look like this is what it looks like in a bootstrap UI tab (second tab) I found the issue when using getuikit.com v2 tabs and the same thing happened. So after isolating that the issue only happened to the animations within the tabs, I lazily switched the uikit to bootstrap, and drum roll - same issue. But without the tabs, there is no issue. I don't think it's related to the bezier path, bc this is also happening on animations where i don't plot path points. It seems most common on tweens with transformOrigins declared. You can see the UI-Kit version of the issue on this page: http://apipro.io/#every-step and I can put that somewhere and update the link for posterity when it gets removed if it's worthwhile. Thanks for any thoughts or suggestions from the gsap community!

really appreciated this in depth response. things are starting to click. also feel like i have to go back and remove "css" from every tween i ever made. you know, like when I have the time.

Hi GSAP people, So I'm having trouble understanding why this is happening. If you hover over the left box in the codepen demo, an overlay image will popup in front of the logo in that left box. If you hover over the right box, an overlay image will popup but behind the logo in that right box. The only difference between the two functions is tweening css. I actually don't even need to tween a css property I can simply put the following with no props in the css bracket jawns: .to("a.one-half#tmg img", 0.4, { opacity: 0.5, autoAlpha: 0.5, css: { } }, 'targetPoint') ... and the same issue happens. What I'm trying to do on mouseenter is keep the logo on top of the overlay image that get's revealed (while animating it from grayscale to full color, but hide the other logos in the nearby boxes), if that makes sense. Any insight would be super appreciated! Thanks, Jim

Ok so I was having trouble searching the forums quickly for common issues/solutions so I created a public Google custom search. Search GSAP forum and GSAP related codepens here // Added tabs to filter codepen only and forum only results Tip: To remove results from flash / actionscript forums, append the following to your search: -actionscript Right now it only searches URLs including the following: http://greensock.com/forums/topic http://codepen.io/GreenSock/ http://codepen.io/osublake/ http://codepen.io/rhernando/ // Added from osublake post #2 http://codepen.io/MAW/ http://codepen.io/jonathan/ http://codepen.io/bassta/ http://codepen.io/chrisgannon/ http://codepen.io/jamiejefferson/ http://codepen.io/grayghostvisuals/ Keep in mind if Google hasn't yet indexed a new posting, that it will not show up in the results. Also, it seems like some moderators use the GreenSock codepen account, so if there are other codepen accounts that predominantly have GSAP animations, let me know here? And I will happily add them.

ooooohhh. ok cool. I had no idea about scroll throttling or debouncing. that's a great tip! will definitely spend some time with this and implement.

ahhh brilliant. now i feel not too bright. thanks so much.

So it looks like Iconic SVGInjector.js is preventing GSAP from firing? I've tried a couple of different things and it seems to only be an issue when animating SVGs or specific indicators within an SVG. I noticed this on my dev site and added simplified demos below. Working example with inline SVG + GSAP http://codepen.io/jimthornton/pen/YXrNdr Broken example with SVGInjector working, but GSAP not firing - just a static SVG. http://codepen.io/jimthornton/pen/BNwpvO Does anyone have any experience with this issue? I'm wondering if there is a workaround, alternative for getting the benefits of inline SVG without them being inline so they can cache, or if SVGInjector just injects the SVGs inline to the DOM too late?

So for posterity, i was referring to the SVG layers getting blurry on scroll with a scale tween, when I changed it to animating the width of the div, the blurryness issue went away but the performance in firefox was subpar. I ended up removing all of the divs and putting the 14 or so SVGs into one SVG and tweened the identifiers directly. This fixed the blurriness in Chrome on the SVGs when scaling their sizes up (by scrolling) and helped with firefox performance a little from what I can tell. I also think there's an element where binding it to the scroll event is what's making firefox perform poorly. I was also animating top and bottom properties with percentage changes absolute positioning and changed that to x/y. As Jan Paepke points out here, transforms should be used over top and left tween animations (when using scrollmagic.js). I think this made the biggest ff improvement

Thanks for your quick reply Carl It does seem like the more animations added to each element, the more work is being done, especially when using percentages for absolute positioning changes? I know there's a plethora of ways to animate with gsap. Do you know of any documentation on performance of different methods? Should I be staying away from anything specific? Like toggling css classes or animating with left, right, etc., percentages? If not, I'll look into learning how to measure performance with chrome dev tools timeline. It's all kind of over my head right now . I even tried adding a check FPS plugin to no avail. Re chrome, do you have any idea what I'm missing with trying to fix the blur on scale issue by increasing and recentering svgs then using tweenmax.from to scale to a percentage? Thanks again

Hey GSAP People, Ok. SO I'm loving GSAP. But I'm having a little trouble with performance, specifically blur on scale for SVGs in chrome (v43.0.2357 on mac) until fully rendered animation and choppiness in firefox (v38.0.5 on mac). I've read a bunch of stuff and saw a solution in making elements larger initially and then scaling down as needed so the "capture" has better pixelation. I'm working with mostly full width SVGs. So I tried implementing this solution with css svg {width: 500%; height: auto} and then using TweenMax.from's for scale(0.2): My attempt here: scale issue You can see that on scroll there is a huge lag, and then it tries to catch up and essentially skips the above the fold parallax animation. It also creates issues resizing the svg when scrolling back up: But if I ignore the blur issue, and don't enlarge elements and then scale down as needed with tweens, it scrolls just fine here except on firefox. So I looked at lagSmoothing() but am having trouble implementing it and kind of feeling like I must be missing something if the performance is this bad and I need it in animating 20-30 elements. I also tried animating width of the divs wrapping SVGs with SVGs at 100% width and that actually fixed the blur issue in chrome, but created even worse performance issues in firefox. This actually seems like a good solution (codepen example here) except its shaky in webkit? but seemed like it started causing strain getting choppier on scroll when I was animating a series of them because i'm also animating the marginLeft to keep it centered. For main codepen, you can see that I used width on the lowest two divs in codepen but kept scale for upper divs to see the difference. I also feel like I might be putting too much strain with how the animations are updating? Does anyone have any suggestions? Am I implementing the scale down enlarged elements as needed wrong? Thanks for any help anyone might be able to provide.