In order to create an immersive experience for the user, I knew that it was important to include some interactive animations in the final site. Animations, whether they are complex or simple, can make the user’s experience more engaging and visually interesting, and that’s something I want to achieve in this project.
For my ‘Crew’ section in my site, I wanted to animate this photo of Neil Armstrong and bring it to life.
I downloaded this high-res photo and brought it into the app, Remini. Remini – AI Photo Enhancer uses AI technology, that turns low-resolution, blurred, pixelated, old and damaged photos into HD, with sharp and clear facial focus. It also has other features, such as animating a static photo which I used here.
I realised I made a mistake. I should have colour corrected the photo to black and white first before bringing it into Remini. But since I already had this Remini animation, I brought it into Adobe Premiere and adjusted it to black and white, leaving the red hues intact such as the stripes on the American flag. This was to keep a consistent colour scheme with the rest of my site’s imagery of black, white and red.
I exported the animation, but it lacked something. I decided to bring it into Photomosh. Photomosh is a site that offers creative control for image and video glitching. I added a simple static filter and RGB shift to give that old-timey televised look.
It was a challenge to create this hover animation in Webflow. Using Figma – hover animations are simple but with Webflow it’s tedious. I had to look at several online forums for guidance on a step by step tutorial on how to accomplish this hover interaction since there was no walkthrough video on Youtube that showed how to do this.
It was frustrating, but in the end I managed to get it to work by placing both the animated gif and the photo in the same div block, and making the photo’s opacity change to 0 when the user hovers over it, revealing the bottom gif. I also added a fade transition so the animation would be smoother.
I believe the finished hover animation is successful and makes the page more visually interesting. I also did this for the other crew members, Aldrin and Collins.