NikeLab recently tapped Craig Winslow for an exciting project: turning patterns from their NikeLab x Riccardo Tisci Training Redefined collection into animations for use online and on digital billboards in New York City and Rio de Janeiro.

“I’ve always wanted to do work with Nike, but NikeLab specifically reaching out was a dream come true since they explore, experiment, and bring to life the most future of future concepts,” says Winslow. “After being immediately excited to animate the collection’s beautiful patterns, we riffed on ideas to expand the movements into full installations and unique experiences that have never been done before.”

Check out the NikeLab x Riccardo Tisci Training Redefined collection.  

Supplied with the collection’s designs, Winslow began by exploring different ways of animating them, sketching his ideas on an Apple iPad Pro with Adobe Illustrator Draw. The patterns themselves led him to distinct concepts for each. As the Kaleidoscope print was more abstract, it lent itself to a looping, gyratory animation with a mesmerizing effect. The Floral print seemed to demand a more literal animation, one depicting organic growth.

“Once NikeLab agreed with my proposed animation intent, I needed to deep dive into Floral,” says Winslow, “analyzing how it was created, as well as locating repeating and mirroring elements, so I could begin to break it down into manageable chunks with which to animate.”

Detail of the collection’s Floral pattern, as animated by Winslow.  

He continues, “Eventually, I identified 15 unique sections that I would animate, that make up the entirety of the pattern. After isolating them on separate layers in Photoshop, I dove into After Effects, where I created nesting compositions for each section that all come together to assemble into the final pattern. Then I just had to animate each section, and the whole piece would come alive.”

Then Winslow began the time-consuming process of individually masking every leaf, berry, branch, and flower petal on their own layers; modifying anchor points; and animating scale, mask shape, and often rotation—in order to achieve a growing effect.

“The Kaleidoscope animation had a similar process,” he says, “but with a flat pattern, there was a lot more Photoshop work required to separate layers and add black borders to each object before animating.”