Create a stunning scrolling zoom interaction for your Webflow portfolio in just minutes

Join host, Nelson Abalos Jr, for another fun episode of Build With Me as we recreate the scrolling zoom interaction as seen on the Discovery Builders homepage.
discoverybuildersllc.com/
We’ll learn more about:
- Setting up the HTML and CSS for this design
- Creating the Webflow interaction
- Making a mobile version of the interaction
Cloneable: wfl.io/livestream-scrolling-zoom
----------
Timestamps:
00:00:00 Stream start
00:01:27 Stream intro
00:02:23 Stream topic and demos
00:05:39 Stream agenda
00:06:48 Breaking down the design
00:13:10 Building the page in Webflow
00:22:56 Adding the scrolling zoom interaction
00:36:12 Q&A
00:40:01 Credit roll and outro
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@TheKetoSurvivor]

Nelson! You are such a space cadet man 🧑‍🚀! Great stream. AWESOME interaction. Thank you for sharing this!! I'm feeling inspired. 😁👍

[@willmurray-phillips4639]

Legend. Your teaching style is fantastic. @Webflow should be proud!

[@wisdomezeogu6650]

I have only used Webflow to build my personal portfolio website. With this video, I am now an ardent student of webflow. Watching out for tutorials, live chats, conferences and events. Thank you Webflow.

[@vtasopulos]

Just found this and loving the teaching! Thank you for making me laugh too! :)

[@ioanlungutranole3553]

Great work Nelson. You're a legend!

[@Webflow]

I appreciate that!

[@Webflow]

Clone today's project here: wfl.io/livestream-scrolling-zoom

[@Pawelrudko]

Page not found :/

[@mateusvidal3187]

the clonable is not working guys.

[@Webflow]

Hm.... I've tested it just now in incognito mode and its working. Does this page still show 404? webflow.com/made-in-webflow/website/bwm-16-scrolling-zoom

[@mateusvidal3187]

@@Webflow I've tested it again in the incognito mode, but it didn't work again. :/

[@ioanlungutranole3553]

Still 404 but it works fine after you clone it.

[@tatiana8252]

Loved it! Thank you very much.

[@grantemerson5932]

Nelson is the man!

[@nav-unger]

Thanks Nelson.

[@natehenson71]

Awesome! Thank you.

[@Webflow]

You're welcome!

[@TheFlamingCookie]

Nice!

[@baharozyyev667]

Omg, this guy is so nice

[@KatieM-ix1jw]

What about the images moving away from each other on the Discovery version?

[@JonathanMoralesGarcia-q9d]

At 35:10 you mention how by adding a mask, you can make the main image expand around the other images. What I'm having trouble with is that two of my cells are going over the main image. How would I make it like yours, where the main image covers everything? thanks

[@RajnikantLimbachiya]

Awesooooome!!!

[@Webflow]

Thank you! Cheers!

[@danielglorioso9066]

Thank you for making this! When I put the pictures in my grid the pictures blow up to crazy heights and widths and cant figure out how in yours in stays defined within the grids

[@Webflow]

Try setting your images width and height and also apply object-fit:cover; to them. Hope this helps :)

[@thenoiseinmotion]

I have question: I used this solution to zoom a section at the top of my page. However, when using it on mobile (iphone specific) the page is stuck. You cannot scroll the page at all. Any ideas?

[@rubenmartini9599]

How can you make it responsive to smaller devices ?

[@samuelkuehne]

How would you optimise it for different viewpoints

[@Webflow]

I would suggest to simplify it for mobile by removing the animation and the images around the main image. This is what the Discovery Builders website has done.

[@pushingpandas6479]

why is cloneable 404?

[@United_Wings]

😮

[@Alexander-cd9zx]

Should we start using SVH instead of VH? 🤔

[@Webflow]

Yes. Here is a full explanation as to why: kzbin.info/www/bejne/bZvYlaynrNaggdE

[@Razattax]

You MISSED one last thing... The other images also move away from the main image as it zooms.

[@KatieM-ix1jw]

I realized you can fix this by playing with the 2/3D transform settings and scaling down the outer images on scroll (the 2D/3D transform setting makes it look like it's moving away). I set the Quick Stack "child perspective" at 400px distance and scaled it down to 0.7 as it fades out during the animation. Hope that helps!

[@kasperd]

Bummer, was hoping to see the whole page recreated, and not just the zoom effect.

[@Webflow]

Which other parts of the page would you like for me to rebuild in Webflow? We can schedule those for a future stream.