Andy

Well, more keyframes definitely help. I've also lowered the bitrate which also helps (buffering kills the effect) . Chrome refuses to do nice tweening, whether that's to do with scrolling i'm not sure... IE11 Firefox Safari all do lovely tweens, so I've coded an exception for Chrome to bypass the tween and jump to the target percent. I may put together a codepen to illustrate at some point, if I do I'll post here. Andy

Great! Thanks for the link Carl, I did have a search but couldn't find the right thread. Sounds like more keyframes will help..

I'm trying to use scrolling to control video, all is essentially good, but it can be a bit jerky. I thought if i tween the playhead position rather than jumping to the current position it'd be much nicer. However it seems to wait until the tween is complete, then updates the displayed frame, making it much worse.. This is all happening within a much larger framework, so i'm just copying in the relevant snippet here; self.addScrollListener = function() { $(window).bind('scroll',self.updateTimelineByScrollPosition); } self.current_percent = 0; self.updateTimelineByScrollPosition = function() { var current = $(window).scrollTop(); var max = $(document).height() - $(window).height(); var pos = ( current / max ) * 100; var seek_time = self.time * pos; TweenMax.to( self, 0.5, { current_percent: pos, onUpdate: self.tweenUpdatePlayhead }); } self.tweenUpdatePlayhead = function() { self.jplayer_div.jPlayer( "playHead", self.current_percent ); }; Note I'm using jPlayer for the video, but I have tried doing this by setting the currentTime directly on the <video> element. Thanks, Andy

I don't think you can have top and bottom in css. try setting top: auto; for your redBox. Then you'll still have the problem that you're tweening a null 'bottom' value to 0..

ok so my codepen works beautifully, seems the issue is with my "real code", where a complex-ish function being called at the same time.. http://codepen.io/agsystems/pen/Dntvz If I move that function into a the tweens onComplete, it's all ok. Thanks for the help!

Sounds perfect! Will give it a go and let you know, if not, sure ill do a codepen thing.. Andy

Hi! (nice new site btw) I've got a nice quick animation, that works well on desktop (and on my phone), but on an ipad2 it's too quick. Ie it happens before the ipad has chance to render the frames. It's kind of a gratuitous animation, so it'd be nice (but not essential) if it could be seen. So odd request maybe, but is there a way to make a tween slow down for a slower processor? Thanks, Andy

Ah I see what you're saying. I'm not sure I was very clear about what I needed (sorry!) The problem is, I /do/ want the background to move, I just don't want it to animate. I think I've worked out a way to do it. I'll need 2 over classes instead of one, .over and .overtween (hopefully I can think of a better classname :s) .over{ // styles I want to change immediately Background-position: 20px 0; } .overtween{ // styles I do want to tween } Then I can do; TweenLite.to(div, 0, {className:"+=over"}); TweenLite.to(div, 0.5, {className:"+=overtween"}); Make sense? Is there a better way? Thanks again, Andy I made a codepen to illustrate; http://codepen.io/agsystems/pen/Jyzha

hi! I'm doing something a bit like this; TweenMax.to(element, 0.3, {className:'+=over'}); where the .over class has different colour, position etc, but also different background-position. My problem is, i'd like the background-position to not tween, while the rest of the properties do. is there a way to add an exception to the tween? Any ideas? thanks, Andy