Building a content templeting system with the ability to add art directed title treatments with animation.
My team at Digitas needed a way to deliver design templates that allowed for the delivery of content pages with the option to include art directable, animated title treatments. The turn around time for these requests were generally five to ten days. So the templates had to be simple and repeatable.
I started by building a prototype in Gatsby, a static site generator built in React. For the title treatment I made an animatic in After Effects. This would guide my development of animating the title in GSAP down the line.
Next, I established my grid and styles based on brand guidelines.
I broke down the title treatment into svgs and animated them with the GSAP animation library.
Finally, I composed everything everything together and triggered the animation of the bar charts on scroll to grab our readers attention and reinforce the importance of the data.
Impact
After integrating the template system into our workflow, we were able to reduce our overall delivery time by 50%.