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. martis

    xPercent, yPercent

    Hey guys, Been wanting this xPercent, yPercent forever, thanks! I am a little confused on how this works... If you look at my codepen: http://codepen.io/anon/pen/Ljheu I expect the box to go from the top left side of the container to the bottom right side of the container. It seems to just move a percent based on its own size... any ideas how I would make the box move in relation to the size of the parent container? Thanks!
  2. Hey guys, I've been developing on a macbook for a long time now and just recently got a new Macbook Pro with the nice retina monitor. I love the quality of the display, but I have noticed some pretty serious performance hits as far as animation goes (especially in certain browsers). I don't have an example to post, but I can tell you that when I run animations in a browser on my non-retina cinema display they perform great. When i run my animations on my retina screen (same box) I experience some noticable lag (even when not using Retina images). I am definitely not blaiming GSAP, more rather wanted to see if others have experienced such results and have found a solution? As retina displays become more common I worry this will become more of an issue... sadly 8( I almost think it is a retina browser issue, would love to hear what you all think...
  3. Say I have 3 timelines. Can I change their timescale independantly of each other? Thanks
  4. martis


    Thanks, I get some weird results when I try and do 0 duration tweens in the timeline (most if jumping around from label to label). set() works great though, thanks!
  5. martis


    Hey guys, Is there a way to perform staggered set commands? ie... .staggerSet(array, {autoAlpha:0}, .5); right now I am doing this hacky method... .staggerTo(array, .01, {autoAlpha:0}, .5); This brings me to my next question... What is the best way to do 0 duration tweens in a timeline.... set? Thanks!
  6. Yep, that answers it!
  7. When do you need to/should you use the css:{} object in tweens? For example... TweenMax.to(obj, 1, {autoAlpha:0}); vs TweenMax.to(obj, 1, {css:{autoAlpha:0}}); Trying to cut down on the amount of code I have to write
  8. Hey guys, Say I have a label "myLabel" in a timeline. Imagine I add in a bunch of tweens with varying times to "myLabel". Is there a way to append a tween to the end of the label time without having to manually do... "myLabel+=time" ? Thanks!
  9. Hey guys, I am building an experience where I am fading on many large images, one on top of the other. I am creating a timeline that will have to play both forwards and backwards. I want to optimize performance by only displaying the image that is currently visible, and the image that is fading over it. Once the image fades over it, I want to hide the image that it faded over. Anyone have ideas on how to best approach this where I don't have to manually set the image that it faded over to autoAlpha:0 after every fade? Thanks!
  10. Hey guys, I am building an experience with many images on a page. I am optimizing for browsers that benefit from applying the z:.01 to put it on the GPU. My question is... is there a way to cache an asset on the GPU, then remove it once its done tweening? Example: I start to fade on image0, caches image0 to GPU, fade completes, remove image0 from GPU. (this will have to work with reverse timeline also) Thanks!
  11. martis

    Famo.us vs. Greensock

    Anyone know if you can control the famo.us objects using Greensock?
  12. Does it work for safari on iPhone and iPad?
  13. Heya, I am running into an issue on one of my sites where when I navigate away (open a new tab) and come back to my tab my animations are out of sync. Does anyone know a way to detect if the user has navigated away, and navigated back? Tried blur and unload on window, but no luck...
  14. Om, You can pass a paused parameter when you create a timeline. tl = new TimelineLite({paused:true}); timelines begin to play by default unless otherwise stated. From the docs:
  15. Fixed! Thanks Jack... I understand everything minus the unitFactor, but looks like I don't need to understand that come next release. Sorry for always creating these weird fringe cases lol
  16. Hey all, I made a simple codepen that closely illustrates my logic setup. http://codepen.io/anon/pen/KvmFh When you hold the button down I am manually changing the time() of the timeline When you release the button I am performing a throwProps tween. Notice that the time() does not tween to the desired targetTime (6). Thanks, getting closer!
  17. That's exactly the issue, I want to use the dynamic time that ThrowProps generates based on the velocity. Make sense?
  18. I got it working with "time", but the actualy throwProps tween is not moving the playhead. I know targetTime exists
  19. Hey all, I want to track a timelines time() getter, then later do a ThrowProps tween using dynamic time... I figured out how to track the timeline's time() with ThrowPropsPlugin.track(tl, "time"); console.log("velocity is: " + ThrowPropsPlugin.getVelocity(tl, "time")); //works later I call this tween and I get no results, any suggestions? ThrowPropsPlugin.to(tl, {throwProps:{time:targetTime}}); //nothing? targetTime exists Thanks!
  20. Hey guys, Was wondering if anyone has a solution for controlling a draggable instance using mousewheel and the arrow keys? I saw this post that explains how to control the scrollbar using mousewheel http://forums.greensock.com/topic/7327-custom-mousewheel-scroll-with-scrollto-plugin/?hl=mousewheel but nothing in regards to Draggable. I would love to use ThrowProps, and snapping in the solution. Thanks!
  21. Thanks Rhernando, I am running into one issue where I drag the draggable to the final snap spot. I swipe up again, but it snaps DOWN the snapIndex (I basically want it to not do anything). Tried looking at the math, can't figure out why the endValue is now less (is it because its at its max Y position)?
  22. Hey guys, I ended up using this solution, since I wanted to track if the snap was moving forward or backwards... works pretty well, would love any input on how I could improve/optimize! // Setup Draggable function setupDraggable() { TweenMax.set($proxy, {css:{height:Math.round(tl.totalDuration() * pixelScroll) + $window.height() + "px"}}); TweenMax.set($proxy, {css:{visibility:"hidden"}}); drag = Draggable.create('#proxy', { type:"y", bounds:$('#proxyContainer'), trigger:$('#site'), force3D:true, dragClickables:false, zIndexBoost:false, edgeResistance:.8, dragResistance:.1, throwProps:true, minDuration:2.5, maxDuration:4, overshootTolerance:0, snap: { y: function(endValue) { if (!snapping) { console.log("snap"); snapping = true; var lastEndValue = snapPoints[snapIndex]; if (endValue < lastEndValue+10 && snapIndex < snapPoints.length-1) { snapForward = true; snapIndex++; } else if (endValue > lastEndValue-10 && snapIndex > 0) { snapForward = false; snapIndex--; } } return snapPoints[snapIndex]; } }, onDragStart:function() { snapping = false; }, onDragEnd:function() { if(snapForward == true) { drag.vars.minDuration = 4; drag.vars.maxDuration = 6; } else { drag.vars.minDuration = 1; drag.vars.maxDuration = 3; } if(this.tween.duration() < drag.vars.minDuration) { this.tween.duration(drag.vars.minDuration); } if(this.tween.duration() > drag.vars.maxDuration) { this.tween.duration(drag.vars.maxDuration); } console.log("end"); console.log("max: " + drag.vars.maxDuration); console.log("min: " + drag.vars.minDuration); console.log("snapForward: " + snapForward); console.log("duration: " + this.tween.duration()); snapping = false; }, onDrag:function () { processMobileTimeline(this.y); }, onThrowUpdate:function() { processMobileTimeline(this.y); } })[0]; }
  23. Thanks for the reply... Only problem is I am calculating the maxDuration based on the direction the draggable is moving, so it happens mid snap calculation. 8(