How to make floating div appear on scroll interaction

[mattmcs (Matt)]

Hey all, does anyone know if there is a video on how to make this scroll in and out monkey on the webflow interactions page? see attached as what I mean

Its on this page http://interactions.webflow.com/

Thanks !

[makloon]

1. Create div B
2. Set height
3. Position absolute left:0, right:0, bottom: -(height of div B)

Create interaction on div A

1. Scroll To
2. Affect div B
3. move up by 100

Be Merry

[mattmcs (Matt)]

Thanks - Im trying to make the attached guy scroll on the attached section …

https://preview.webflow.com/preview/the-quiet-room30021136?preview=6faff9e7c39a862f9a8976ecedfbf772

[cyberdave (Dave S.)]

Hi @mattmcs, take a look at a video I made from your read-only link:

- YouTube

​I hope this helps. If not, please let me know – I’m happy to assist further!

Cheers,
Dave

[mattmcs (Matt)]

Hey all

Im trying to get this guy on the left hand side to scroll in (bottom left)

And then stay with the section

And then scroll out when you leave the section

Heres the link: http://matt-test-march2015.webflow.io/scrollfollow

Heres the preview link: https://preview.webflow.com/preview/matt-test-march2015?preview=7e4140c4b226c0f7dc89b9a617fb0253

Thanks !

[AlexN (Alex Nichol)]

Sure no problem begin by setting the div the image is in to fixed rather then absolute and make it fixed to the bottom left corner.

[AlexN (Alex Nichol)]

Currently you have the image set to appear 50px down and with a 0% opacity. On the section you want to control the image with create an interaction that affects the class that is on the image div. On the scroll into view section you want to move the image back to its origin. Click the move property and leave everything to 0. Now set the opacity to 100%.

On the scroll out section use the setting you used for the initial appearance. Down 50px opacity of 0%.

[mattmcs (Matt)]

Thanks Dave ! great video

Appreciate it