How to Webflow: Creating scrolling interactions like the Apple MacBook Pro page - Tutorial (2019)

This was a tough challenge to solve. But I figured out how to create the same scrolling effort that you see on the new Apple MacBook Pro page.
Apple MacBook Pro page:
www.apple.com/macbook-pro-16/
Learn more about Z-Index:
university.webflow.com/articl...
Learn more about Position:
university.webflow.com/lesson...
Clone this page:
webflow.com/website/apple-16-...
#webdesign #webflow #apple
Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
kzbin.info_...
-------
/ thepixelgeek
/ pxlgk
pixelgeek.co

[@youcanwin325]

you are not only a good teacher you are also a very good person, hope you are doing well!

[@pixelgeek]

I appreciate you ❤️

[@hosseinpouladrag7466]

You are the best. I have learnt the best materials from you. Thank you so much.

[@morganjones6401]

bruh...really?! I literally followed this vid and built a website at the same time!! Never stop doing what you do!!

[@ElBeeEss]

Awesome! Saved to faves! x

[@jh8691]

Wow, that was so much fun! I loved it!!!!! THANK YOU SO MUCH FOR MAKING THIS PLEASE MAKE MORE TUTORIAL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@MadhuSudhan-te7li]

Awesome, you really saved our time.

[@edsonMobile1]

Easy and fast. Thanks a bunch, man!

[@pixelgeek]

Glad it helped!

[@pierrehartung1786]

You are doing an awesome job showing those things! Thank you very much for your work 👍👍👍👍

[@pixelgeek]

Glad you like them!

[@matthewpohthecaffeineexper7024]

Love your lessons.👍 Thank you. 🙏🏻😇 and God bless you.....

[@pixelgeek]

You are so welcome

[@josevillalobos8030]

Awesome Nelson!

[@ReadyDesignerOne]

Excellent work, keep it up

[@garyvoigt321]

Great job man!

[@pixelgeek]

thank you 🙇🏽‍♂️

[@mindtheart]

...when one feels like saying "hats off!", but what they actually mean is ...sombrero-the-size-of-a-parasol off! Thank you for serving us on a platter cool solutions while being gracious and entertaining!

[@pixelgeek]

My pleasure 😁👍🙇🏽‍♂️

[@frekaa]

Excellent!

[@pixelgeek]

Thank you! Cheers!

[@joshuawilliams8903]

I can’t believe that I just did that.. during these quarantine days I’ve decided to pick up the skill to market myself. I’m a video editor/creator so I have those video skill sets.. just not marketing skills. I decided to create my own website and after some research I decided upon webflow. I’m currently on version two of my site (after 1 month of trial and error) and am now able to replicate Apple!??? You’ve allowed me to *look professional in a matter of 4 hours of consuming your content over weeks and weeks of listening to you. Thanks so much for your knowledge. It’s free to view but oh so priceless. Thanks soooo much!!!

[@pixelgeek]

So happy to hear that! Would love to see what you've created when you're done. Don't forget to join the live streams every Saturday at 10am-12pm PDT to learn more. 😁👍🙇🏽‍♂️♥️

[@joshuawilliams8903]

pixelgeek for sure! I’m a new subscriber so I had yet caught on to you hosting live streams weekly. I will definitely check it out! And once things are finalized I’d love to show you what I’ve created.

[@joshuawilliams8903]

Hey! It's not completely fleshed out but it's at least on a sharable level. I think once you view it you'll tell how greatly influenced I was by your tutorials. Once again I came in as completely clueless, thus most of the time I couldn't do anything unless you guided it. Thanks again and I hope it looks decent. I appreciate all the free advice that you give and hopefully its apparent but what I created. www.willfilms.studio/

[@RD-jr8nv]

You're awesome. Subbed.

[@user-jj5eb8lc7u]

you are just awesome!!!

[@pixelgeek]

Thanks 😁

[@joshhighburger8869]

Absolutely top-class tutorial, as always. I was wondering if you'd ever be up for a part two to the Apple interactions, maybe touching on how to control video scrubbing via page scroll?

[@pixelgeek]

Thanks for watching 😁 this tutorial can help you with that university.webflow.com/lesson/jpeg-image-sequences-on-scroll

[@letstrythatathome4390]

Awesome tutorial! When you were figuring this out, did you also try using show/hide content? E.g. “Show laptop 1 when headshot 1 is 100vw/vh then do interaction on laptop 1” I’ve been mocking about with a similar scroll interaction but it’s buggy which I now guess is because of showing and hiding content :) Thanks again for putting this together, you are awesome! :)

[@blaiseposmyouck7999]

Next level Nelson

[@pixelgeek]

Thanks 😁

[@wildinsights5033]

this is gold bro , keep up the asian work !

[@MeerxG]

This was absolutely incredible! Been teaching myself Webflow and watching you work on this helped me understand so many concepts too. Any pointers on how to make this mobile friendly?

[@pixelgeek]

Glad it was helpful! As for mobile responsiveness? That's a whole 'nother stream/tutorial 😅

[@hnybrr]

I really like that you tell us the things you've personally learned (ex. setting the laptop image to fixed @8:30). I constantly go through this cycle of "finding an issue and playing around until I figure it out". Refreshing to hear a teacher being real.

[@nicolasmarquez5956]

Wow!

[@ChuckNorisss]

I did something similar to this few months back but i got stuck while trying to make it responsive for mobile. so I dropped that idea for time being.

[@jimbob7424]

Is it not possible to be made mobile friendly?

[@Disclosureclips01]

Me likey!!!

[@josephgraham6098]

Can you demonstrate how to add the text interactions like Apple does? When I set a heading and paragraph within the container to absolute, it's close but I'm stuck. Thanks for your awesome videos. You're a genius.

[@pixelgeek]

Can you give me a link to your example?

[@josephgraham6098]

@@pixelgeek Thanks for your response. I'm essentially trying to figure out the same interaction that Apple created, where the text fades in and out centered on the y-axis over the images that have the scroll interactions: www.apple.com/macbook-pro-16/ Thank you for considering this.

[@elharizmi]

thanks! why is it not possible to clone this website?

[@shire2506]

how to make the effect like open screen

[@zornaud]

Thank you for this great tutorial ! But it doesn’t seem to work on Chrome. Do you have the same issue ?

[@pixelgeek]

Hmmm... Can you post your read only link and I'll look into it

[@zornaud]

@@pixelgeek If fixed it ! But I had to duplicate the section. One for mobile (with a fixed div inside a wrapper) and one for desktop (with a fixed image background). It does not behave the same way for some reason.

[@deepanshmadhwani9043]

I'm having an issue in the second one. It slides from the right but simultaneously the girl picture also scrolls up. I've matched all the steps and cross checked from your cloneable site as well. Please help. Should I share a read only link?

[@ryanaldous2743]

Why not make the laptop display none and trigger it to be static when the image takes up the full screen?