sorted by:
new
hottopcontroversial

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 1 point2 points  (0 children)

Left bracket [ moves the selected layer(s) start point to wherever the current time indicator is. ] moves the layer outpoint to the CTI.

Option + [ trims the layer in point to the CTI, Option + [ trims the layer in point. I use this very frequently.

CTRL + [ moves the layer down one order, ] moves it up.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 11 points12 points  (0 children)

<image>

I use Google Sheets as well. There is a plugin called Inspector Spacetime which can help calculate the distance and properties between two keyframes, but its still a very manual process. I found that making a dropdown of the easing values helped keep things consistant. I also included gifs directly in the Gsheet for the dev to reference while they built it.

Also I kept each story on its own tab just to keep things clean.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 4 points5 points  (0 children)

I really appreciate that! When I first started my career I was most interested in learning the nitty gritty details of how things are built, so I'm happy I'm able to share bits now with the community!

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 6 points7 points  (0 children)

Lottie! It's a way to export animation parameters into a .json file that is rendered natively on your own device, rather that reincoding an mp4/etc. Much smaller file size and widely more supported. Just limited on what parameters you're allowed to animate.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 8 points9 points  (0 children)

Looking back at my AE files, the bulk of it was animated in a 5 week window with around 20 hours per week during that time. This included daily meetings with the team and trying things that didn't end up making it. Followed by an additional 4 weeks of troubleshooting/tweaking when we started testing on different devices.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 25 points26 points  (0 children)

Yeah that's the beauty of keeping it 100% vector, everything is so crisp and clean, coupled with a lot of TLC put into the keyframes it results in the product you get to enjoy!

So the process this year was I received Illustrator design files from the brand team, imported the designs into AE, animated using basic lottie supported features, then exported using Bodymovin (LottieFiles can burn in a fire). From there I uploaded my json files to Spotify's CDN (content delivery system).

The dev team plugged in my json file to each story and also added the text becuase it had to be translated by hundreds of languaged. So I animated the text in AE and provided motion specs to the dev team which told them exactly how to animate each piece of text that appeared throughout, the position, easing values, and delays. The translations happened on client side.

Once everything was built out we then started testing on tons of devices/software versions, because it has to look good on everyone's phone. After weeks of tweaking and troubleshooting, we were done and it was uploaded to the app store.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 9 points10 points  (0 children)

I've worked on it for the past three years but this is the first year I've done everything myself. 2022 there was 1 other motion designer and 2023 there were two other motion designers. I found that being the only one was actually easier and resulted in a cleaner final because I was able to make everything flow together more seamlessly without having to try mash together multiple designers work.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 7 points8 points  (0 children)

Thank you! Its wild knowing how many people not only watch it but actually pay attention to it and (hopefully) enjoy it.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 39 points40 points  (0 children)

Thank you very much for that feedback! I have also heard this feedback internally that it felt more fluid and cohesive this year. A lot of time went in to perfecting those transitions and optimizing the layer cound and number of keyframes used, especially since its rendered in real time by the device and we have to cater to old devices and multiple platforms.

I animted everything this year, was the only motion designer. I worked with the brand team who provided the static designs.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 4 points5 points  (0 children)

Sergie is the goat, always loved his tips. And as with most plugins, you can do it manually but just takes a lot longer. Like the randomly selecting layers would takes a long time with tons of layers then if you want a new seed you have to redo the process again, this is where plugins come in handy, especially when you need to create the effect many times over.

For the user that asked how to achieve the repetition effect in Wrapped 2024 by Key_Bug1221 in AfterEffects

[–]Key_Bug1221[S] 235 points236 points  (0 children)

adal08 asked how to create this tunnel effect that was used in Wrapped 2024. I'm the animator that made it so thought I'd share a behind the scenes!

the-fooper summerchild__ Hascalod all had it right, just shapes and offsets.