How to link div to collection page without using collection list

Design help CMS
1

I have 4 divs inside of a div wrapper. I am trying to connect each of the 4 divs to each collection page I created.
The reason I cannot use a collection list instead of divs is that I am trying to animate a card-stacking animation while scrolling. I can animate those divs but could not connect those divs to my collection pages.

My read-only link: Webflow - David extra

I want to have that animation while keeping the layout plus connecting “Project 1 Sticky” divs to the desired collection pages I have created.

How should I pursue this without writing a code? Any help would be great. Thanks

Card stacking

card stacking 2

2

Use a standard link directly to your page, e.g.
/product/cereals/captain-crunch

3

Hello @Jeet_Patel
You could do something like this

  • Have a seperate field in the collection for the combo class you have added (project 2, project 3 etc)
  • Have a seperate field in collection for bg color of each card
  • Then use collection list and add a class attribute to the collection item and connect it to dynamic field “class”. and get bg color from collection
  • Then you can add a link block inside the item and make it absolute positioned and span accross the parent and set link to collection item page
  • Additionally you sort the items based on created old to new to show in right order.

Check this loom video -

Hope this helps!

1 Like
4

Thanks, Hari, I’ll try it out and let you know the update.
Also, could you elaborate more on how did you do the animations? and what is the “relative” field?