The Apple Airpods landing page has been quite famous because of its WOW-effect to get an interactive webpage! We wrote a blogpost and analyzed its design, you can read it here: https://www.naker.io/posts/apple-designs-an-interactive-product-landing-page-for-the-airpods-pro
We told you that it was easily cloneable with Naker. We used the Webflow integration since Webdesire recreated the Apple Airpods Website Template on Webflow here: https://webflow.com/website/AirPods-Pro-Website. But the 3D interactive scene you'll create is embeddable on any CMS, website.
Ready? Let's start this 12-minutes tutorial:
Step 1: Clone the Webflow Template
Go on Webflow and clone the following template: https://webflow.com/website/AirPods-Pro-Website. You can do it with any other Webflow template and, as mentioned earlier, you can integrate the 3D interactive content made with Naker on any CMS/website.
Step 2: Download a 3D model
Download a 3D model in a GLTF format among the 3D free existing libraries (Google Poly, Clara.io or Sketchfab). In this case, you can buy the Airpods model for 9$ or use any other one for free on Sketchfab.
Step 3: Go to Naker.io and create your project
Go to https://app.naker.io/dashboard/story and create a new project from a blank story.
Step 4: Set up your scene and upload your 3D model
Go to the Content Tab and remove the 2 elements in the Selection panel by selecting the "bin" icon in the right menu or hitting "delete" or "⌫ ".
Hit the "add model" and drag'n drop your zip.file in the window. Manipulate your model with the gizmo (allowing to change the position, rotation and scale of your model) in order to have it in front of you.
Step 5: Add the light and its animation
In the Aripods landing page, there is a cool light animation which we can very easily recreate in Naker. Add the light in the Content Tab > Add Light. Put it in the back of the model and reduce its intensity to 14,5 .
Go to the Interactivity Tab > hit "+" to add an interaction. Add 10 in the X position and -10 in the Z position. Afterwards, choose the scroll effect and define the end time at 20% of the journey.
Step 6: Build the Journey / Position your cameras
Place the first camera/sceneview in front of the Airpods or your 3D model. You can see in the bottom bar, what will be shown.
Then copy the coordinates of your 1st sceneview (thanks to the the button in the upper left corner of the coordinates) and paste it on your 2nd sceneview. Afterwards, place it a little bit behind from the 1st camera.
You can anytime hit the "Preview" button to check the end result and always adjust your sceneviews.
Step 7: Publish, Embed, Integrate
Hit the button "Publish & Embed" button in the upper right corner and "Embed Story". Copy the script and go to your Webflow template.
Since we are embedding the 3D interactive scene in the whole body of your page. It's quite easy. You just need to hit the "Pages" button and go to "Edit Page Settings" of your Home page. Finally, paste your script in "before </body> tag" input.
If you'd like to integrate your interactive webcontent in a specific section of your website, check our following Helpcenter article: https://help.naker.io/en/articles/3560328-integration-in-webflow
Step 8: Adjust your Journey
You can anytime add the "Follow mouse" to your journey. It allows to have your camera moving when you move your mouse in your 3D interactive scene. You can also anytime adjust your cameras (add some cameras, change their position, ...). All your modifications made in Naker.Story can be directly updated on your website, you just need to hit the "Publish & Embed" button and hit "Update Story".
Hope you enjoyed this tutorial and feel free to ping us in the app for any question or any other suggestions for tutorials ✌️