The goal of this website update was to create a header animation that tells a story about one nurse using the Hallmark platform to fill a last-minute job at the hospital, help a patient, and achieve a happy work-life balance, where she can then go to the break room and take a break.
Design:
I achieved this by finding stock imagery of the same actor in all 3 situations. (I would say this was both my good stock footage finding skill and a little bit of luck, haha). I then created overlay graphics based on the hallmark platforms Ui to help tell the story through the app. Next up was animations, I went and animated everything using Adobe After Effects to create smooth transitions between each scene, and brought the Ui to life with entry animations. Once the animation was complete, I used the bodymovin plugin to export the animation as a Lottie/JSON file to use in our WordPress builder's Lottie file plugin. Then it was ready to hand off to the developer (aka me).
I achieved this by finding stock imagery of the same actor in all 3 situations. (I would say this was both my good stock footage finding skill and a little bit of luck, haha). I then created overlay graphics based on the hallmark platforms Ui to help tell the story through the app. Next up was animations, I went and animated everything using Adobe After Effects to create smooth transitions between each scene, and brought the Ui to life with entry animations. Once the animation was complete, I used the bodymovin plugin to export the animation as a Lottie/JSON file to use in our WordPress builder's Lottie file plugin. Then it was ready to hand off to the developer (aka me).
Development:
From there, I tested and resized the animation for the 3 major web breakpoints. I used Google Chrome's inspector view with the responsive size preview to make sure it didn't break at any size/breakpoint. I then tested it on all web browsers, and we found a bug where the animation was choppy on only the Safari browser. It turned out that one of the animation states for the objects was causing the stuttering, so I re-formatted the animation and got it working on all browsers and mobile devices.
From there, I tested and resized the animation for the 3 major web breakpoints. I used Google Chrome's inspector view with the responsive size preview to make sure it didn't break at any size/breakpoint. I then tested it on all web browsers, and we found a bug where the animation was choppy on only the Safari browser. It turned out that one of the animation states for the objects was causing the stuttering, so I re-formatted the animation and got it working on all browsers and mobile devices.
Below is the final animation with all the bells and whistles (extra effects that were not supported on safari web browsers)
Below here is the published look without the extra effects so it worked on every browser.
The main changes made were removing the Gaussian blur effect (giving it the look of frosted glass) and removed the trim paths effect on the blue in green line animation in the beginning to create a seamless loop.