Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About jimthornton

  • Rank

Recent Profile Visitors

2,034 profile views
  1. 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!
  2. 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
  3. @greensock @jonathan it's like you guys know everything. thanks much!
  4. 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 t
  5. 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.
  6. 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 th
  7. 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/
  8. 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.
  9. ahhh brilliant. now i feel not too bright. thanks so much.
  10. 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
  11. 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 per
  12. 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 add
  13. 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 is