For this task, we’re required to take what we’ve learned in Task 2 and turn our ideas into actual, working micro-interactions for our app. Instead of just visualizing animations like before, we now need to fully develop them using HTML, CSS, and JavaScript—and we can also use animation frameworks if needed. The goal is to improve the user experience by adding interactive elements that feel smooth and engaging. We also have the freedom to make creative decisions about which animations or interactions we want to include in our app.
Some examples of the components we can work on are:
Interactive navigation menus
Side menu transitions
Pop-up boxes
Animated call-to-action buttons
Page or screen transition effects
Basically, the outcome of this task should be fully functional animations that are ready to be integrated into our final app—not just mockups like in the previous task. If we have ideas beyond what’s listed, we can discuss them with our module coordinator for approval.
Process
Splash animation
The splash animation was created using Lottiefiles, then integrated with some of Flutterflow's animation to create the transition into onboarding screen effect. Initially I tried to use the upload the animation into Flutterflow's initial splash image setting, but it turned out really blurry so I did not use it.
Arrived Button
The tick icon was animated using Lottiefiles as welll, it's convenient when you can just paste the link of the animation in Flutterflow.
Arrived pop-up animation
When users press the arrived button, an overlay will slide up, and an arrived animation will show.
Screen Transitions
For all the main pages there are screen transition animations by adjusting the timing delay, then using fade and slide animation.
(the initial walkthrough is a little laggy, and some animations were not captured, so some changes were made to make the animations clearer)
FEEDBACK
N/A
REFLECTIONS
For this task, I used FlutterFlow to create functional micro-interactions for my app. Instead of coding manually, I explored FlutterFlow’s built-in animation features to design elements like pop-up boxes, button transitions, and navigation effects.
It took some trial and error to get the animations to feel smooth and intentional, especially when adjusting timing and triggers. One challenge was ensuring the interactions worked well across different screen sizes.
Overall, using FlutterFlow made the process faster and more visual, while still helping me understand how animations can improve user experience and interface flow.
.jpeg)
.jpeg)
Comments
Post a Comment