Video yükleniyor...
Video Yüklenemedi
how does Apple make those awesome 3d effects as you scroll? it's easier than you think - let me show you how you can do it too:
192,573 görüntüleme • 1 yıl önce •via X (Twitter)
32 Yorum

try it out in and lmk your feedback

Not true, for performance Apple uses a technique where hundreds of pre-loaded images are displayed sequentially using a canvas element and JavaScript to create a 3D animation as a user scrolls.

Am I the only one that hates these scrolling animations. Takes like forever to scroll down and see the actual information

It’s usually a video that attaches frames to the scroll position of the page, not 3d objects on a canvas element. It’s more performant that way.

This is giving 'draw the rest of the owl' tutorial energy 🦉 Step 1: Add some CSS. Step 2: Make it look exactly like Apple's $2 billion design system:)

I paused it right at the start to guess; is it a video that has its seeking tied to the scroll-y value?

I hate their website. Very difficult to get useful information bc of the silly animations other media

What a cool effect . Hope it becomes even easier for non coders like me . Done a few tests on Grok and can sort of create a 3D animation video of certain items . Not always accurate though

so much power

Check out @animockapp. It will help you create stunning mockup animation👌

How to make is "effect" in WP ELEMENTOR ?

I always thought they use video sequence 👀

Scroll might be pretty heavy on performance… i wonder if you could use intersection observer and have it animate and rotate through different scroll checkpoints instead

That’s cool!

Apple is using image sequences. Over 20 years old technique that you definitely don’t need any LLM or Ai.

Great shared 👍

Thanks for sharing! Excited to learn how to create these stunning effects. Looking forward to your tutorial.

Used this concept a couple of years ago for this one:

This is great 👍🏽

Excellent 👌

@MuizMusk

Mind blown

This is exactly the kind of content I needed to see today! The step-by-step approach makes it actually actionable, thanks!

They use image sequences because of compatibility

Fantastic . Thanks for sharing.

@grok Can you send me the code for this 3D effect by DM?

It’s a video

I've always been fascinated by those 3D effects on Apple devices! I experimented with similar techniques when creating a mobile app last year, and it completely transformed the user experience. Can't wait to check out your link and learn more!

Thank you for the tutorial and the work you do.

Cool 🤯

This breakdown is pure gold! Apple's scroll effects always felt like black magic but you made it so accessible. Time to rebuild my entire portfolio with these techniques

@grok what type of website would need to be built? (Ex: Wordpress, etc,)
