Differing scroll speeds for items within collection list?

I am building out a design with 3 recent projects highlighted on the home page.

The design calls for the project previews to start all in a line but to scroll at different speeds so that as they scroll by they break out of line, like so:

Given that these are output from a collection list though, is it even possible to have the three previews each styled differently?

Design also calls for varied z-axis values (designer would like to see another element thread through the three columns) but I don’t know how to set anything for any one of these three items without doing the identical change to the other two.

Any thoughts or suggestions?

Thanks in advance
William


Here is my public share link

OK, so I figured out how to isolate each of the three elements and set the z-axis values appropriately. I was able to thread the marquee through as per the design.

Monosnap screencast 2022-12-13 00-22-38

Can anyone please suggest what I should even be searching for to stagger the list on scroll?

If you can give me tips on how to get started on it, I would be most appreciative!

OK, so it looks like although it’s not technically a parallax effect, this would appear to use a similar technique.

The problem seems to be that I can’t single out elements within a collection list for different scroll animations.

Or am I missing something? Is there a way to do this?

Hey William!

How i achieved pretty much this on this cloneable cms parallax scroll into view was by adding individual classes to the collection items (using a finsweet script) and animating those combo classes

This is an older cloneable so maybe this is achieveble now with attributes but I haven’t checked.

Give it a look and let me know if it helped or you have questions!

Bye for now!!!

Hey Maria. Thanks for this.

I am a bit confused. I looked up the Finsweet Class Adder script and it doesn’t say anything about collection list items. Was that the script you used?

Thanks so much this is very hopeful!

William

This one was part of the cms library. Will be replaced by attributes eventually but hasn’t yet.
There are also videos of Joe (Finsweet) implementing it.

I’m here to help if you need me to! :smiley:
(I believe going through the explanation, videos and my cloneable would be very helpful)

Cheers!!!

Running into some trouble using the Finsweet code. I want to change all three columns, but that wasn’t working. I figured I might have the syntax wrong for calling this function 3 times (I can never remember where semi-colons are necessary) so I cut back to just the first column so I could mirror the syntax exactly.

For whatever reason, it is not adding the class to the collection list item. I can’t see what I am doing wrong.

This is my read-only link

Here is the published version — where you could theoretically see the code working (but it’s not).

So, there are a couple of ommissions and a couple of wrongly targeted classes.
I’ll try to guide you through the changes and go from there

  1. Give a class to the collection list (I used home_portfolio-list)
    Screenshot 2022-12-19 at 00.26.32

  2. Add a combo class named ‘addclasses’ to ‘home_portfolio-coll-itm’
    Screenshot 2022-12-19 at 00.33.26

  3. In your code replace ‘.blog-posts-list’ with ‘.home_portfolio-list’

  4. and ‘.home_portfolio-parallax’ with ‘.home_portfolio-coll-itm.addclasses’

  5. Add two copies of the selected section

  6. and in those replace the numbers of flipSection01, is–column-01 and start with 2 and three for each

  7. I replaced the frequency (to all) from 0 with 3.
    While 0 it’s supposed to just not repeat, it seems not to work. Feel free to change the frequency if you have more items.

here’s my test project’s link in case I missed something or want to copy the code
William test project share link and the live version William test project live

Cheers!!!

Thank you SO much, Maria. I can definitely see several mistakes I had made now.

However, it is still not working for me. I do see it working however in the test code you created for me. For the life of me though, I cannot see your embed to compare the code I have to what you have. I don’t see where it is in the navigator. What am I missing?

Super elegant style with your code, by the way. I am jealous. Hope I can set up pages so cleanly in time. I know they call this “no-code” but it’s code!

I couldn’t find the code in the navigator but I found it in the source code for the live test page. I substituted for the code I have and it still doesn’t work — so my error has to be something structural, right? I could swear I have done everything you recommended exactly as you recommended. I can’t see what I am doing wrong.

No worries and thank you! :slightly_smiling_face:

I added the code in the page’s settings before the body tag

How to add code to the page’s settings

Give it a try and let me know how it went
(when I get back to my computer I’ll check your setup again)

Thanks. I hadn’t realized you could add the code that way. It is certainly cleaner.

I am curious what I have done wrong. I know I have got to be close!

1 Like

Hey Maria, if you get a chance to look at what I have done wrong, I would greatly appreciate it.

In the meantime, I will try adding the code to the page settings like you have done. I would like it to be as symmetrical as possible so I can narrow down what I might have done differently (aka incorrectly).

Thanks again so much!

1 Like

OK, when I moved the code to the page settings, it worked!

I must have had an error in my code. And I must have made a mistake when I copied your code from the page source vs your page settings.

Either way, that scroll effect the designer asked for is now working. Thank you so much!

1 Like

Hey William!

Sorry for missing your last message, crazy week.
It might have been also using an embed vs the page settings and when the code loads.

I’m happy it all worked out! :partying_face::partying_face::partying_face:

1 Like