[Vertical Loop for Stacked Photos]

I'm self taught so they might be better ways. You'll need to have some basic knowledge of CSS, JS. 

- Use a blank page and add the photos or whatever you want to scroll.  

- you will need then to add some code in the advanced section on that page (click on the wheel, Advanced is the last item)

- assign height:100%, overflow:hidden to that page, should start with #collection-...

- I'm using a Brine template, to adapt the code above  const pictures = document.querySelectorAll(".sqs-block-image")

- const totalHeight = document.querySelector(".sqs-col-6").offsetHeight; .sqs-col-6 is my div containing all my photos

 

Hope it helps 

[Vertical Loop for Stacked Photos]

Thanks.

 

You're right about the magic mouse. I'll use a different function to calculate the speed.

 

I cannot scroll up "infinitely" even if I use a negative timeScale, it will take me to the very start of the timeline but not "past it". This is why I set it way forward and it does the trick!  

[Vertical Loop for Stacked Photos]

Hey Zach, i've added a couple of functions. Resize which works fine and a mouse wheel scroll which is almost there but I have a couple of problems.

 

The main one is that for some reasons it works completely fine with a standard mouse but doesn't work with the apple magic mouse.

 

Also i would like to have add an ease in once finished scrolling, I could code it in the setInterval function but was wondering if there is a better way.

 

Last to be able to scroll up, it didn't seem to work with the infinite repeat, I did find a solution though not very elegant.

 

Any advice would be great!

 

See the Pen jObLjXY?editors=1111 by laurentbelbar (@laurentbelbar) on CodePen

 

Thanks 

 

Laurent

[Vertical Loop for Stacked Photos]

Hey Zach, thanks so much. Its' great, I've managed to adapt most of it to Squarespace. It's looping perfectly  just need to tweak the loading section. I'm using $( document ).ready(function() to launch, do I still need the loading section?

 

I think I understand better the modifiers now. I thought the function was applying once the duration was completed but it applies continuously, right?

 

I'll definitely use camelCase, i knew about it and used it. I get a bit lazy sometimes

 

Thanks again 

 

Laurent 

[Vertical Loop for Stacked Photos]

Hi guys,

 

I’m developing my website using Squarespace which  is very templated but I have managed to add quite a bit of customisation learning some basic  html, css and js coding.

 

I’ve come across an animation that I really like in https://www.thomasdemonaco.com/ and I thought that I could do something similar using gsap.  For a start I’m trying to do a simple verical loop - Squarespace will have pictures stacked on the viewport - but after trying so many different things, I cannot get find a solution. The repeat will start from the beginning and not loop. Attached is the codepen.

 

Zach kindly helped with with initial code, I wish I had found a solution!  Any help would be much appreciated.

 

Thanks

 

Laurent

See the Pen jObLjXY by laurentbelbar (@laurentbelbar) on CodePen