Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
laurent@belbar

Vertical Loop for Stacked Photos

Recommended Posts

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

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

 

  • Like 3
Link to comment
Share on other sites

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

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

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

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

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

  • 6 months later...

@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

  • 2 weeks later...

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 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×