iOS Animation Contest 2021

The task in this contest is to implement animations in Telegram for iOS based on the mockups provided, optimize them to run on older devices, and create an editor that allows tweaking their parameters.

Round 1: 16 full days, until 23:59 Dubai Time on the 31st of January.
Prize fund for this round: $50,000

Download demo materials for Round 1

The Task

You should use the Telegram for iOS code available on GitHub and the updated build instructions.

  1. Modify Telegram for iOS to display the animations provided in the demo videos when messages are sent.
  2. Ensure that the animations are optimized to run smoothly on all devices.
  3. Include an editor that allows tweaking each of the components.
  4. Support exporting and importing animation parameters.

Your code must be written in Swift. Do not use third-party UI frameworks (e.g. Flutter or React Native).

Required Animations

Message Bubble Animations

Your app should display message sending effects from Animations.mp4 for messages of the following types:

  • Small message that fits in the input field
  • Large message that is too large to fit in the input field
  • Message containing a link preview
  • Message with a single emoji that turns into an animated emoji
  • Sticker selected from the sticker panel
  • Voice message
  • Video message
  • Multiple messages sent one after another

All message sending effects should be optimized for both standalone messages and messages sent as a reply.

Make sure that your animations are as true as possible to the mockups provided in the demo videos.

Animation Editor

Tapping the header in any chat (top bar with the chat name) should open Animation Settings (Editor_example1.png, Editor_example2.png).

Animation Type opens the list from EditorExample_Animations.png.

Background Animations

Your app should display the background shown in Animations.mp4. Sending any message should animate it like in the video.

Opening Animation Settings and choosing Background under Animation Type should open Editor_exampleBG1.png. Open full screen shows the interface from BackgroundPreview.png.

Tapping the Animate button plays the background animation, see BackgroundPreview.mp4

Background_Animation.mp4 provides a visual explanation of how the animation was put together. You will need to come up with your own model to achieve the same or similar result.

Evaluation

During evaluation we will focus on the following aspects:

  • How close your animations are to the mockups provided
  • How smoothly they play on modern devices
  • How smoothly they play on older devices (including iPhone 6 and SE1)

Authors of the best submissions in this round of the contest will be able to participate in Round 2.

Submitting Your Work

You will be able to submit your application to @ContestBot closer to the end of the contest. Watch out for announcements in @contest.