Move elements by up/down scrolling.

[Kees]

Hello.

Is it possible to make flowing elements on screen like here (3 columns of images)

http://pixelgrade.com/demos/pile/

 

I understand how to trigger movement on Y axis by scroll, but dont understand how to make it associated with up/down scrolling.

I dont ask to do the job for me, just guide me, please.

[Diaco]

Hi Kees 

 

i think maybe this is a bit beyond what we normally handle for support , but you can get ScrollTop on scroll and multiply or divide that for objects position ( simplest way ) .

[Carl]

hmm, I'm having difficulty understanding the question. Not sure what effect you are trying to achieve.

Perhaps you can elaborate on what you need to do. I don't really notice much animation on that page other than some rollovers.

[Jonathan]

Hello Kees, and Welcome to the GreenSock Forum!

 

Here is a quick solution in detecting if scrolling up or down using jQuery, could also be done in native javascript:

 

See the Pen KwBgoK by jonathan (@jonathan) on CodePen

:

var prevScroll = 0;
    
$(window).on("scroll", function () {
       var $this = $(this),
           $statusText = $("p > span"),
           currScroll = $this.scrollTop();
 
       if (currScroll > prevScroll){
          // scrolling up
       } else {
          // scrolling down
       }
       prevScroll = currScroll;
});

:

Hope this helps!

[Rodrigo]

Hi Kees,

 

In order to add to the great advice by Jonathan, the images' animations in the sample link provided are a very common type of parallax effect. Some time ago Chrysto made a great example using GSAP, perhaps could be enough to get you started:

 

See the Pen aEkwL?editors=001 by bassta (@bassta) on CodePen

 

If you need more help feel free to keep asking.

 

Happy Tweening!!