Jump to content

Ginger Soul Records

  • Posts

  • Joined

  • Last visited

Everything posted by Ginger Soul Records

  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
  16. Wow, fantastic response. You really went the extra mile, and I appreciate it. You opened my eyes on this one! I'll see what effect that code has on the build, and yes, I think a CSS animation may be appropriate for these kinds of 'pushing' effects. Glad to know there are such knowledgeable devs here. Looking forward to doing more with this framework. DB
  17. Hello Greensock community, A small question that had me scratching my head late last night. I have a simple mobile slide-out menu on http://swizzy.gingersoulrecords.com/ (below 767 px browser width, trigger is in the upper left). If you use a desktop browser to narrow your browser and trigger the slide-out animation, it's smooth as butter...but on an actual mobile device (iPhone 4 in my case), it gets a little choppy as it has to 'push' the lorem ipsum down as it expands. Interestingly, if I get rid of the text and leave just the menu there, it has nothing to 'push down' by expanding and slides down perfectly with no choppiness. This may be due to my device being slow, but I'm thinking it's because Greensock has to do double duty - animating the transition of the target and then animating the 'push down' of the non-targeted content area. I tried adding the z(0.1) trick to kick for hardware acceleration, but that didn't seem to do much for me. Anyone want to open http://swizzy.gingersoulrecords.com/ on a mobile device and compare the slidedown animation performance with desktop? I may just design around this (I think a fixed, persistent nav is better for mobile anyways), but I imagine that one of my greensock animations will be 'pushing' content in the future, so I'd like some help understanding this. Thank you! Dave Bloom Ginger Soul Records