There were a few tasks related to the graphics of the animation. First, our team needed to replace the image of the robot with an image of the new robot. We took a promotional press image of the Botvac™ Connected that was taken from the same angle as the previous robot and masked the image, making the background transparent. We also made changes to the background, which consists of different types of surfaces, to better show how the robot is capable of navigating over them. Finally, we wanted to show off the most impressive part of the new product- smartphone app integration.
Since the robot can be told to clean remotely via the app, we wanted to add an animation that shows somebody initiating the cleaning by pressing a button within the app. We combined video of a finger touching the screen of a smartphone with images of the app that change when the finger touches the screen. To display it, we created an image sprite consisting of frames of a video. The animation is triggered when the user begins scrolling. Once the new animation of the smartphone activation is complete, the page animation essentially runs the same as it did before the update.