laurent@belbar Posted April 30, 2020 Share Posted April 30, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 30, 2020 Share Posted April 30, 2020 Hey Laurent and welcome to the GreenSock forums! Good work since the email that I sent you. The biggest issue with your current approach is that you're using one tween to affect all of the pictures. You should instead create a tween for each picture so that each one can wrap in the way that you need it to. Besides that, in the demo below I also added support for it to wait until all images are loaded to start the animation (since the animation is reliant on the total height of all of the images) and support for an additional image on particular images if you want that (which it seems that you do). In general people don't capitalize the first letter of classes and IDs. Most developer stick to camelCase or using under_scores or dash-es for classes and names. It's not wrong to use capitalization on the first letter, just not standard. Feel free to ask about any particular aspects of the demo, especially related to GSAP, and I'm happy to answer See the Pen LYpzEMb?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
laurent@belbar Posted May 1, 2020 Author Share Posted May 1, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 1, 2020 Share Posted May 1, 2020 2 hours ago, laurent@belbar said: I'm using $( document ).ready(function() to launch, do I still need the loading section? Yep. Image loading is separate and comes after the document loading. 2 hours ago, laurent@belbar said: it applies continuously, right? Correct! Link to comment Share on other sites More sharing options...
laurent@belbar Posted May 5, 2020 Author Share Posted May 5, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 5, 2020 Share Posted May 5, 2020 30 minutes ago, laurent@belbar said: for some reasons it works completely fine with a standard mouse but doesn't work with the apple magic mouse. It seems to work for me, you just have to have large motions with the magic mouse, meaning the function likely isn't sensitive to the smaller increments that magic mice have. 31 minutes ago, laurent@belbar said: 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. Sounds like you should tween to or from whatever value you're currently using. 33 minutes ago, laurent@belbar said: 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. I don't really understand your approach. You can have a negative timeScale so I don't know why you'd need a solution similar to what it seems like you have. In general it's not great to mix setTimeouts with GSAP tweens and timelines. Usually if you feel the need to use setTimeouts then something could be refactored to avoid the need. Unfortunately we don't have the capacity to help out with every step of your project. If you have a specific questions, especially related to GSAP, please let us know and we're happy to help! Link to comment Share on other sites More sharing options...
laurent@belbar Posted May 5, 2020 Author Share Posted May 5, 2020 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! Link to comment Share on other sites More sharing options...
StephYoung Posted December 4, 2020 Share Posted December 4, 2020 @laurent@belbar I'm looking to implement a scroll into squarespace as well, but I can't figure out where to implement it within that site. How did you get it to work? Link to comment Share on other sites More sharing options...
laurent@belbar Posted December 12, 2020 Author Share Posted December 12, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now