Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Andy

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



    • Like 1
  2. 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()
    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.




    • Like 1
  3. 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? 




  4. 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)

    // styles I want to change immediately
    Background-position: 20px 0;

    // 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,


    I made a codepen to illustrate;

    See the Pen Jyzha by agsystems (@agsystems) on CodePen

  5. 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?