Jump to content

martis last won the day on July 28 2012

martis had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by martis

  1. Is there a way to use onUpdate or pass a function to an end value to update the end value of a tween? Thanks!
  2. Rodrigo, Thanks for the detailed reply. I feared it was a browser/cpu issue. I can't wait for the day when performance concerns are a thing of the past! I've really only had success by wrapping everything in a Draggable() object, but this can't always be the method I use... I'll give lagSmoothing() a shot and let you guys know. Thanks!
  3. Hey guys, Wanted to see if anyone out there using scrollmagic experienced some performance issues on mobile devices (iOS) on flick when controlling a timeline using duration. When I drag the page it tracks really well, but when I flick the page I get a lot of stutter and lost frames. Wondering if its scrollmagic or how iOS updates the page on "flick". Has anyone had success with any library doing scroll animations on iOS? Thanks!
  4. martis

    React and GSAP

    Hello everyone, I am about to dive into React JS and wanted to see if people were using GSAP with React JS? I searched the forums but did not find much. I found a gsap react plugin, but wanted to poll the forum. Thanks!
  5. For what it's worth... I was applying rotationZ: 0.01 to all three images inside my svg element to get smooth movement. This was causing Firefox to throw an NS_ERROR_FAILURE. I took off the rotationZ: 0.01 on the images and put it on the svg element itself which fixed the issue and retained the smooth movement.
  6. Hello, Ran into a bug in the latest version of firefox when using AttrPlugin... I cannot create a codepen as its a real complex build but here is my error for both Mac and PC firefox. Works fine on all other platforms... NS_ERROR_FAILURE: deploy/js/libs/greensock/TweenMax.min.js Line 15 My code looks like: Note the HTML is inside of an <svg> element <image id="animation-careers-na-cloud-mask-1" x="194" y="0" clip-path="url(#cloud-mask)" width="450px" height="281px" xlink:href="_global-assets/img/careers-na/cloud-1.png" preserveAspectRatio="xMidYMin slice"/> cloudMaskTimeline1.to($cloudMask1, t, {attr:{x:-700}, ease:Linear.easeInOut}) Thanks in advanced!
  7. Nevermind... their docs must of been old. You just need to use setTween(tween);
  8. Hey guys, Anyone have a good example of creating a timelinemax then controlling it using scrollmagic? I am trying, but keep getting: TypeError: scene.addTween is not a function scene.addTween(tl); Thanks!
  9. Hey guys, I see as of 1.15 force3D is set to "auto". Is there a way to override that setting on a global scale to test out true/false? Thanks!
  10. Just an FYI... Firefox 35.0.1 was released today and it has seemed to resolved the PNG layering issue to some extent. I still see the issue in a few small cases, but it's MUCH better.
  11. I just tested the Firefox Nightly version and the issue is totally gone. Any idea what this might mean?
  12. Jonathan, I will give a non optmized PNG a shot, but I really do need to optimize as I have many PNGs and file size is an issue. The PNGs are PNG-32.
  13. Jonathan, Totally understand this is a FF issue and not a GSAP issue. I do need transparency support in my PNG files. I have optimzied them using tinypng. I am even seeing the issue with embedded fonts vanishing after animating Think I am out of luck until they release an update to FF *sigh*
  14. Thanks Vonscriptor, I will give that a shot, I sadly cannot reduce the amount of PNGs... The animation is in a timeline that plays out based on user interaction so can't really have a setTimeout either. This is really dissapointing as anyone using Firefox 35 on Mac will have a horrible experience on the site.
  15. Just wanted to check back in and see if anyone else was having problems with animating layered PNGs in the new Firefox 35 on Mac?
  16. Carl, I am also experiencing very similar image flashing/masking on my end as well. This seems to be a Firefox 35 MAC only issue (PC is testing fine). I am in the middle of a build and don't really have time to recreate the scenario, but the common thread of the issue seems to be multiple PNG images animating on top of each other.
  17. Hi guys, Wanted to see if anyone else had experienced HUGE render issues on animations on the new Firefox 35? Tried upgrading to latest GSAP and still the issue remains. I can post some examples later, but wanted to take a quick poll. Thanks, James
  18. Hi guys, Just wanted to pick your brains about creating a Maze Game (A single object that a person can drag through a maze). The maze will most likely have curved pathways, so not sure lock-axis would be enough. My first thought is some kind of collision detection... Thanks in advanced!
  19. Hey guys, Been wondering how to do this for quite some time now.... say I have a tween like tl.to($box, 1, {x:$(window).width()}); Now, xPercent aside... I am wondering how I could update this tweens "x" target while its running... in case someone had resized the window. I assume I could run an onUpdate method to update the tweens value? Thanks!
  20. I found the solution: http://codepen.io/anon/pen/CqIce If you want something to go from the top to bottom.... you have to initially set the bottom to 0, and do a from top 0.
  21. Hey guys, I often have unknown sized elements (sometimes larger than my screen size) that I want to tween from butting up against the bottom, to butting up against the top or vice versa. I figured out how to get things from the bot to top, but if you try top to bot, it doesn't work. Please see my codepen for the example. Thanks!
  22. Hi guys, I have a path that was drawn in illustrator. I want to have an element, a dot, move along this path from the bottom to the top. I tried plotting the points using the default bezier tween, but it was a little off. I then tried using the quadratic and cubic methods, but had horrible luck. Is there an easy way to use this existing path to setup my bezier tween? Here are my points (assuming that the bottom of the line is 0, 0) {x:-199, y:-667}, {x:208, y:-947}, {x:315, y:-1072}, {x:350, y:-1156}, {x:381, y:-1303}, {x:342, y:-1497}, Thanks!
  23. yes, I am using #1, and I will give #2 a shot. How do you recommend I jump the timeline and reverse? timeline.progress(1); timeline.progress(0); ?