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.
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.
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!
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!
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?
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!
(I believe going through the explanation, videos and my cloneable would be very helpful)
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.
and in those replace the numbers of flipSection01, isâcolumn-01 and start with 2 and three for each
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.
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.
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).
