How to create a Section left fixed and right scrolling Effect?

Design help Animations & Interactions
1

Hello community :slight_smile:

I’m trying to reproduce an effect i saw on this website :

Just after the section with this title :
Eco-friendly courier service, go green with us

There is 3 sections, and on the scroll, the image on the left stay fixed then fade to each other, while the text on the right continue to scroll normally

I’ve try with interactions but can’t succeed.

You can see on my shared link the sections without effects

Please help me find a way to create this interaction on webfow, or with custom javascript code if needed.

Thank you !

David

Here is my public share link: https://preview.webflow.com/preview/swoopin?utm_medium=preview_link&utm_source=designer&utm_content=swoopin&preview=2132be455860e4c8618863cb03db0834&mode=preview
(how to access public share link)

2

I know I have seen a webflow tutorial on this many times but can I find it. no.
So here is another persons video on how to.
https://www.youtube.com/watch?v=fG8XLvP-KHw

1 Like
3

Hi @iDATUS
Thanks for the link
It misses the feature i’m in need the most:
the change between the images on the right.
This is what i’m struggling with…

4

ok bit confused here.
there is 2 columns
first has a picture and the second text.
the text scrolls and when another load of text appears the picture in column 1 changes.
is that the effect you are after?

5

Yes exact, with a fading effect.
I found a javascript library that seems really useful for that but quite complete, GSAP, i’m gonna jump into this for the moment.

6

couldn’t you just apply the scroll effect to both columns?

7

Pixelgeek explains it here.

He is doing text hide but you can just change it to pictures.

8

Thanks it’s almost exactly what i need !