Reverse Engineering Apple Airpods
This coding challenge is all about Reverse Engineering Apple's Website to Build Airpods Pro Animation. This month we are going to have fun with something that you may have encountered: You see something amazing on a website and you think to yourself "WOW How did they do that?". Apple recently launched AirPods Pro and it is one of the most visually beautiful page you will see. The coolest part is this:
All you have to do is recreate this animation! But wait!??!!! How am I suppose to do that? Don't worry I will get you started by showing you how this animation is done and you can finish off the rest yourself. You can get as creative as possible:
What you need:
- Apple is using this library for the wave animation. Visit the "examples" section to see all the things you can do with it.
- You need to hide the play button and just have the wave play automatically in the background.
- Use the Developer Tools to inspect the website and see how other parts are working.
- Bonus if you want to add scrolling events like Apple does onthe website so the wave moves from left to right (there are lots of libraries online for you to do this).
- Show off to your friends.
At the end of the challenge, we will post everyone's custom animations page down below so you can see what others have done. In order to see your submission below, make sure you read the next section for the submission guidelines (In The Rules Are section)!
-
You have until November 30th at 11:59pm EST to submit your solution (using Github. If you don't know how to do that, check out the lecture in the Git + Github section of the course). You will have to submit the link to the #coding-challenge Discord group with the following message: -challenge URL LINK TO YOUR ENTRY" . The bot will listen for the command and will reply with "thanks for your submission" if it succeeded.
-
Use whatever tools you have as developers (google, friends, Discord, programming buddy etc...) but I will not be offering any help with this challenge. Just like a developer, you must solve a problem and build something that will be challenging. Nobody will hold your hand during the job so we want to experience that by figuring it all out on your own with your team.
Please note: As with all my challenges there is zero benefit or monetary gain I recieve from it. This is just my way of thanking my students and making sure that you are able to continue gaining valuable knowledge outside of just my videos. It would mean a lot to me if you are able to rate my course...5 star reviews make my day :)