laurent@belbar

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

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!

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! https://codepen.io/laurentbelbar/pen/jObLjXY?editors=1111 Thanks Laurent

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

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