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

[@youcanwin325]

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

[@pixelgeek]

I appreciate you ❤️

[@morganjones6401]

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

[@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.

[@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/

[@ЕкатеринаЗахарова-ь5к]

Thank you for such difficult and interesting tutorial!

[@hosseinpouladrag7466]

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

[@edsonMobile1]

Easy and fast. Thanks a bunch, man!

[@pixelgeek]

Glad it helped!

[@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 😁👍🙇🏽‍♂️

[@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

[@MadhuSudhan-te7li]

Awesome, you really saved our time.

[@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 😅

[@josevillalobos8030]

Awesome Nelson!

[@pierrehartung1786]

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

[@pixelgeek]

Glad you like them!

[@jh8691]

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

[@ElBeeEss]

Awesome! Saved to faves! x

[@matthewpohthecaffeineexper7024]

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

[@pixelgeek]

You are so welcome

[@frekaa]

Excellent!

[@pixelgeek]

Thank you! Cheers!

[@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?

[@ReadyDesignerOne]

Excellent work, keep it up

[@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.

[@wildinsights5033]

this is gold bro , keep up the asian work !

[@garyvoigt321]

Great job man!

[@pixelgeek]

thank you 🙇🏽‍♂️

[@blaiseposmyouck]

Next level Nelson

[@pixelgeek]

Thanks 😁

[@НатальяДавыдова-т9ф]

you are just awesome!!!

[@pixelgeek]

Thanks 😁

[@ryanaldous2743]

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

[@elharizmi]

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

[@RD-jr8nv]

You're awesome. Subbed.

[@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! :)

[@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?

[@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.

[@shire2506]

how to make the effect like open screen

[@nicolasmarquez5956]

Wow!

[@Disclosureclips01]

Me likey!!!