Join us on Tuesday, January 9th at 10am (pacific)
[ Watch live ] [ Join the live chat room ]
In this stream, we’ll create a zooming effect based on the new Magic Leap website (https://www.magicleap.com/). Using basic HTML site structure and simple scroll interactions, you’ll learn how easy it is to create this very engaging animation.
Very cool indeed!! 
Can’t wait for the first stream of 2018!
Magicleap’s home page is simply awesome, can’t wait to see how you handle that in Webflow.
Not only am I looking forward to watching this, I cannot wait for this product and to see how it will evolve over the next 20 years. I’ve always said wearable AR is far more practical than VR! (But that’s another topic!)
Hello, nice post website.
The website you created was awesome but at the end of the scroll animation and introduction of the next section, the previous “space” and “mac” section didn’t go up, as in the magic leap’s website…
The newer “Webflow blue” section just scrolled from the bottom and didn’t push the previous section to the top.
Would it be possible to do so by any means, sir?
oooo. good point. What you could do is set another animation to move the desk and space elements up to -100% on the Y axis.
Try it
Wow, Took me some time as I’m just starting up with webflow, But that worked Perfectly… Thank You.
One minor thing is:
As I scroll down and then up again, there is some glitch like gap between “blue section” and the desk-space elements…
Any ideas on how that can be removed/fixed?
Tried to animate the moon too a little bit, but the scaling is very less.
Hello Nelson,
Thank you from Women in Technology Oslo!
More than 50 people took part in the workshop, where we recreated the zoom effect that you built, 3D cube, and flip-card animation. People were impressed with the possibilities of Webflow and enjoyed creativity.
The project that we recreated: https://webflow.com/website/workshop-create-website
Thank you very much!
Can you please explain exactly what you’ve done (or give me access to your example)? I also want to do exactly what you’ve done but I’m struggling with that. I’m new on webflow. Thank you
This interaction is something I want to do. But how is a regular website going to handle such a huge PNG image (1MG)? The site would take forever to load, even with Webflow’s servers. Any ideas on how to do this effect with a smaller size image (like 100KB)?
@PixelGeek DOES this work for videos. For example, Apple TV+ - Apple (UK) Like this? How can you do that?
