0

I'm trying to translate an element as the user scrolls.

If possible, to class on scroll up and from a class on scroll down.

I think this is possible as the magic-wand does this on scroll down in this demo: http://janpaepke.github.io/ScrollMagic/

However, I can't figure out how to use this script ( https://github.com/janpaepke/ScrollMagic )

Here is my code to tell whether the user is scrolling up or down:

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    if(scrollTop>lScrollTop){
        //scroll up
    }
    else{
        //scroll down
    }
    lScrollTop = scrollTop;
});
brbcoding
  • 13,378
  • 2
  • 37
  • 51
gomangomango
  • 661
  • 1
  • 10
  • 29

1 Answers1

1

DEMO

var controller = new ScrollMagic(); 

var scene = new ScrollScene(offset: 1000).setTween( new TweenMax.to('#foo', 2, { css: { transform: 'translate3d(500px, 0, 0)' }}))
    .addTo(controller);

I set the fixed positioning of that element so that it didn't scroll beyond the fold (for demo purposes). You'll see that it doesn't start the animation until you scroll 1000 pixels and it reverses the animation when you are < 1000 px. I'm just translating left to right, but this will work with any translate values.

Updated demo and code...

var controller = new ScrollMagic();

var scene = new ScrollScene({ offset: 1000}).setTween( new TweenMax.to('#foo', 2, { css: { top: 150 } }), 1000)
    .addTo(controller);
brbcoding
  • 13,378
  • 2
  • 37
  • 51
  • `var controller = new ScrollMagic(); var scene = new ScrollScene({ offset: 1000}).setTween( new TweenMax.to('#foo', 2, { css: { top: '32px' } }), 1000).addTo(controller)` is what I have, but that animates when the scrollTop reaches 1000. I want it to move as the scroll-bar is moving until it has reached the style (32px). – gomangomango Mar 10 '14 at 20:34
  • I'm not getting any errors now, but it is still not working: http://jsfiddle.net/rYh7J/10/ Thank you for the help! – gomangomango Mar 10 '14 at 21:01
  • Thank you, sorry for that stupid mistake. But, still, it animates at a scroll position. I have seen this script be able to animate while the scrollbar moves. So it is attached to the scroll-bar and moves until it reaches the style. I want it to go to position:fixed, top:32px. And to move there as the scrollbar moves. – gomangomango Mar 10 '14 at 21:08
  • Oh, I see... Just pass it a duration parameter too.. `var scene = new ScrollScene({ offset: 32, duration: 100 }).setTween( new TweenMax.to('#foo', 0.5, { css: { transform: 'translate3d(0, 150px, 0)' }})).addTo(controller)`. – brbcoding Mar 10 '14 at 21:20
  • Thank you, works perfectly! Please update the answer with this code. – gomangomango Mar 10 '14 at 21:26
  • actually, one last thing. I need it to go down, to 32px, while scrolling up and go up when scrolling down. http://jsfiddle.net/rYh7J/13/ – gomangomango Mar 10 '14 at 21:34
  • If you use `translate` it will go up and down **[demo](http://jsfiddle.net/rYh7J/16/)**... you want it to be inverted though? If that's the case, just change the second param of the transform to be a negative. (change `translate(0, 150px)'` to `translate(0, -150px)`')[Like this](http://jsfiddle.net/rYh7J/15/). If that's what you mean, let me know and I'll update my answer. – brbcoding Mar 10 '14 at 22:25
  • Okay, thank you. That is good, but how do I do that with the top value and not translating? – gomangomango Mar 11 '14 at 00:59
  • Thank you, I'm sorry. So here's what I have `var scene = new ScrollScene({duration:100}).setTween( new TweenMax.to('#foo', 2, { css: { top: 32 } }), 1000).addTo(controller);` and that works great except I need it to go to 32 when scrolling up. – gomangomango Mar 11 '14 at 01:11
  • Change it to `top: -32` – brbcoding Mar 11 '14 at 01:12
  • If you have any ideas on how to solve this, I'd appreciate it. https://github.com/janpaepke/ScrollMagic/issues/18 – gomangomango Mar 11 '14 at 01:32