knalle

Thank you OSUblake, I resolved to individual x,y,z properties in stead of a combined transform.

Perfect - makes sense! Thanks!

I would create the complete animation in a Timeline and then scrub back and forth in the animation (Timeline progress) var tl = new TimelineMax(); TweenLite.to(tl, 0.5, {totalProgress:yourScrollValue, ease:Expo.easeOut});

doh! I was so sure I had replaced the files.... sorry - of course works like a charm now

Yeah I tried the perspective thing on the container div ('stack'). I've put this css in: -webkit-perspective: 550; -webkit-perspective-origin: 50% 50%; - still isn't working

Haven't figured out how to use jsfiddle with gsap (?) but I've uploaded it here: http://www.knalle.dk/greensock/examples/fiddle.html it's suppose to be a stack of slides positioned in 3d space - but they are all just sitting at the same spot. all css and js is in the single html file (so perhaps you can inspect it - sorry for the inconvenience) When I inspect the elements

I have the latest download (just double checked it). Also I'm in Chrome and have tried some basic vendor prefixed css properties just to make sure that the trnasformations are working... I'll fiddle something in a minute.

Maybe I've missed something. Can't get the new 3d transformations working TweenMax.set($('#slide4'), {css:{x:"30px", z:"-100px", zIndex:500}}); Why?

There was one (now) obvious mistake we made... 5 repeats = 6 loops. So it should be: var repeats = 20, tl1 = new TimelineMax({repeat:repeats}), tl1ProgressUnit = 1 / (repeats+1); tl1.totalProgress(8 * tl1ProgressUnit); Probably a common mistake

Ok yeah of course But how about css properties. Would It be right to use a tween with 0 duration for setting for instance "left" and "opacity"?

I want to create somthing similar to the (Flash) Throw Slider: http://www.leebrimelow.com/?p=422 Anybody done anything like this with gsap? What touch libraries do you recommend?

Is setting animation time to 0 the (efficient) way of setting properties in gsap? I mean for instance, setting the timeline progress to 0.5 immediately when the html has been loaded: TweenLite.to(tl, 0, {progress:0.5}); ?

... so it could be: var tl = new TimelineMax({repeat:200}); and to move through the timeline once: TweenLite.to(tl, 1, {totalProgress:1/200, ease:Expo.easeOut}); and 4 times: TweenLite.to(tl, 1, {totalProgress:4/200, ease:Expo.easeOut}); still... is there a better way?

I have an infintie scrolling stack (actually its only 4 items looping) - and it's made up of a bunch of tweens, designed to seamless loop from progress 0-1, 0-1,0-1 and so on. So if I use tl = new TimelineMax({repeat:20}); It will play seamless. Eventually I want to swipe the stack and it just rolls continuesly until it has lost momentum... (think mobile browser scrolling - where you flick your thumb and it scrolls ahead smoothly) So I paused the timeline and test with a tweening. For instance I want to move the stack 8 positions (that is moving twice through the stack of 4 items) - and since I timed each stack move with a second it would be: TweenLite.to(tl, 1, {progress:8}); Naturally it wont tween progress beyond 1. Naively I briefly thought: TweenLite.to(tl, 1, {progress:8 % 1, ease:Expo.easeOut}); would work. But of course not - it isnt moving throught the stack twice So my question is is there a way of looping progress? I am thinking of doing the "progress modulu way" in an onUpdate. But I feel it isn't right tweening a vairable and using it in onUpdate - and won't it hurt performance? or I could use tl = new TimelineMax({repeat:20000}); and just tween the totalProgress or totalTime (if possible?) But is there a better and more propper way? TIA!

Thanks for the reply I have tried killing all tweens of the element (on unhover) - still not working the second time I hover will try uploading soon.

I have a looping animation on hover: TweenMax.defaultOverwrite = "all"; $('#box a').hover( function(){ $(this).addClass('hover'); // works TweenMax.to( $("#box .arrowbar"), 0.5, {css:{left:7}, repeat:-1, ease:Linear.easeNone}); }, function(){ $(this).removeClass('hover'); // works TweenMax.to( $("#box .arrowbar"), 0.5, {css:{left:7}}); } ); It works on first mouseenter and mouseleave. What's wrong (using it in a html5boilerplate setup). Using Chrome atm.