Streaming live at 10am (PST)

Animations using Grid 2.0: Getting grid context boxes to appear from off the page on scroll

Hi, all!

Page read-only link: https://preview.webflow.com/preview/kay-waller?utm_medium=preview_link&utm_source=designer&utm_content=kay-waller&preview=bf28a0aac9b61779a000d0db026b87c6&mode=preview

I am trying to replicate the behavior on page load and scroll that’s on this web page: https://www.poulos.co/, but I’m having trouble doing so!

I know this site was made with Webflow so I know it’s possible, I’m just not sure how. I want each content box to come from either the left, top, or right of the screen (using the move animation) either on page load or scroll (depending on if the box is in the first 100vh or not).

I was able to slightly mimic the behavior, but with some noticeable differences. By just choosing the Div Block and then creating an animation that has a move -100x (initial state) to 0x (after 1 second), it cuts off the content box when it’s off the screen (for example, see the “Hello!” box in the upper right hand corner). Instead of the whole box coming in from off the page (as it does in the example), the content gets cut off by the grid. I could move the whole grid and it would keep the box and content intact, but that won’t work because I want each block in the grid to come in from different sides, and at different times.

Does anyone have any ideas on how to accomplish this?

Side note: I will eventually be trying to mimic the bouncing behavior on the example page (where it shifts into place, then bounces a bit outwards, then shifts again to its place), so if anyone has done this before easily I wouldn’t mind feedback on that as well.

Thank you so much in advance!

Kay

@kay19 like this?

1 Like

yes, exactly! How did you do that?! Thank you so much for helping!

change overflow to visible