In this frontend coding test, you will implement an animation within the Aviamedia frontend.
We created a NextJS application you can find in this repo. As a first step, please run npm install && npm run dev on localhost. The application should look something like:
The goal of the project is to animate the "Try it out" links. The output should look something like the videos in the files moving_links_desktop_demo.mov and moving_links_mobile.MP4.
Some requirements are:
- Animation:
- The "Try it out" links should be animated to be horizontally scrolling from right to left.
- The animation should work with any finite number of "Try it out" links.
- The animation should be circ 5C3C ular. That is, once a link scrolls out of view of the left side, it should reappear on the right side at some point.
- The animation should be smooth, continuous, and without lags.
- Scroll (only for mobile):
- The animation should interact naturally with the user's scroll.
- When the user presses on the try it out links, the animation should stop and the user should be able to scroll the "Try it out" links horizontally.
- When the user stops scrolling, the animation should resume.
- The user should be able to click on the "Try it out" links and be redirected to the corresponding page.
- You are only required to implement this scrolling feature for mobile. However, make sure that the animation works and the UX is natural on desktop too.
To get a feel for how this should work, please download the Perplexity app (Android, iOS) and scroll the links on the home page. Please also make sure that your solution works on popular mobile browsers such as Chrome or Safari.
Please submit these two tests within 24 hours.