How is this Kloks template doing this image transitioning?

I’ve been trying to recreate some UX from this template:

In the “Sticky Section” where the right hand text scrolls up and the images transition to the next. I’ve been trying to figure this out by looking in the animations of that section, but there doesn’t seem to be anything set?

I’ve noticed that the images are in link boxes, and I see their effects in the style panel, however none of which are opacity. I’ve noticed that there are different settings with opacity perhaps in the hover states, however.

Also, in the link settings panel, I understand that they link to a section, which I think correspond to the sections for the images perhaps, but those images aren’t in any sections.

I can’t otherwise figure out how to get the images to disappear/reappear like that and it’s driving me crazy!!

To top if off, I couldn’t get the right container to be sticky, like in the Kloks template. I had to make the image itself sticky.

Can anyone please shed some light on this???

My site is:

https://preview.webflow.com/preview/ox-and-rabbit-designs?utm_source=ox-and-rabbit-designs&preview=98181a6fc19fdb7c43d0f4c9f42c30c5

The page in question I need help on is “Home

Thank you!

1 Like

Hey @oxandrabbitdesigns

I think they are doing the trick with section id and current states.

See here > https://www.loom.com/share/1ce923926a3740f6a9311f3d40beb21c

So, each text div on the right has an id for section linking. Each image on the left links to the specific id. When the image reaches the text div with the id she links to, you see a current green selector appears and adds extra styles for the current state > 100% opc. The images are set to 0% opc, but when the current selector hits the new styles are applied > 100% opc.

Hope this makes sense.

Feel free to reach out if you need more help with this.

Piter :webflow_heart:

Thanks Piter, that video helped. I understand it now and think I got the hang of it. I do think it’s confusing though from Webflow’s end on the element’s [none] state vs [current] state. I had a hard time trying to figure out when that was enacted.

I was able to link the images with the text boxes, however the timing wasn’t quite right. I’m wondering if maybe that’s just a function of image aspect ratio, and/or monitor size? Someone editing on a laptop vs 27" monitor for example will result in different vertical scrolling distances as an element is considered “scrolled into view.”

In any case, I’ve actually opted not to replicate this exact same effect, in part due to the fact that the right image container wasn’t being “sticky.”

But thanks for your time in answering and creating that video!