Jump to content

Ginger Soul Records

  • Posts

  • Joined

  • Last visited

Ginger Soul Records's Achievements


Newbie (1/14)



  1. @OSUblake Great to hear from you, was hoping you'd chime in Happy to create a pen for this - it pertains to the functionality of an animation plugin I've been working on for a while. Think you'd dig it. Meanwhile, I'd love to catch up - I think we're still Skype contacts, hit me up! DB
  2. Hey Greensockers, Got a question that I think has a pretty simple answer. I'm using a Timeline to animate three horizontally-aligned targets that share a common class (myclass), e.g. var tl = new TimelineLite(); tl.from('.myclass', 0.5, {left:100, opacity:0}); This works fine on desktop, when these elements are horizontally aligned and all enter a user's viewport simultaneously. On mobile, the elements stack, so when the Timeline fires, you only see the first element animate and 'miss' the other two animations as the target elements are below (outside of) the viewport. Here's my question: Is there a way to pause the Timeline after each 'loop' if its target isn't in the mobile viewport (aka run a function after each loop to check this), and resume the Timeline if that element enters the mobile viewport? I'd be combining this with jQuery Waypoints to watch for 'entering the viewport' events, I'm just curious if/how you can run functions during a multi-target timeline that has one 'step.' Thanks! Dave Bloom
  3. Ah, that's helpful. I guess my jitter just came from a lack of memory I have an animation helper plugin that's in alpha, and I may now change my scale fx to translateZ. Thanks for clarifying.
  4. Is this jitter going down on Apple's new design? http://www.apple.com/ The scale on the carousel titles? Just wondering if this is affecting the 'big boys...'
  5. Thanks for fighting for us front-enders, Team Greensock I wonder what they 'fixed' to introduce this issue...perhaps there's another way to solve that problem that doesn't compromise our animation performance.
  6. Now I'm seeing the jitter on scaling - can we do what we did last time and inform them that the competition seems to have a better handle on things? That seemed to light the right fire....
  7. Any idea why will-change is to be used so sparingly? They used to say that about fats on the food pyramid, but I tried eating 6 baguettes a day and didn't lose my love handles. Is it bad for a single instance of animation performance, does it affect load times, or repaints..? DB
  8. Best email I've gotten all day. Thanks everyone! DB
  9. Appreciate the hounding. I think the key was to mention how well Safari and Firefox perform in comparison, so thanks Carl! DB
  10. Thanks to everybody who put these janky demos together and explained the issues that this bug is causing to the Chrome team. I build sites (like this one) with ScrollMagic + GSAP scale tweens, both of which make me look like a champion to my non-techy clients. Smooth scaling is muy importante to me, both in the background (Ken Burns FX, etc) and the foreground (clients want pop; scale pops). This bug came around and screwed that allll up. I've starred the issue and I hope that my clients are using other browsers (or have good graphics cards) until a fix comes though. Blagh, Dave Bloom
  11. Super useful tool, thanks Blake! I used this to create a 'Ken Burns' effect (scaling an absolutely-positioned, 'faux background image' from 1 to 1.5 over the course of about 20 seconds) in a plugin I'm building. Traditional easing functions (like ease-out) accelerated too fast at the start; I needed something that started off 'linear' and slowly eased out so that, at the end of the animation, you didn't notice a jerky stop to the scaling. This made it easy as pie. Much appreciated. Dave Bloom
  12. Has this been documented? What's the utility designed to do, anyways? Just curious Dave Bloom
  13. Very helpful, and thanks for the quick reply. I feel like these properties would be a helpful add-on to the documentation (or, at least, the article I linked). Please consider adding it. Thanks! DB
  14. Hello, I've searched around but I'm not seeing a comprehensive list of how GSAP needs CSS3 properties formatted for tweens. In other words - let's say that I want to move an item 100px on the X axis, like so (unprefixed): transform: translate(100px, 0px); I think the answer is something like transformX:[value] within the context of a tween. But where is this in the documentation? The 'goodies' article states that these transforms are possible, but it doesn't go into much detail about how to implement individual properties. I feel like I'm missing something obvious. In that case, please smack me with the correct answer and I'll go away Thanks DB
  15. Got it, thanks for clarifying! I'll put together a few layouts that employ different techniques and see how that works. Take it easy, Dave