AfterFX-Based Eko UI

The example above shows how to use EkoLottieDecisionButton and EkoLottieTimer, which are components that are animated using LottieWeb (previously known as BodyMovin) using animations exported directly from AfterEffects using the BodyMovin AE Extension.

AfterFX composition set-up

Each button should be a single afterFX composition, including composition labels reflecting the following Eko button states:

• Appear-Start
• Appear-End
• Idle-Start
• Idle-End
• Selected-Start
• Selected-End
• NotSelected-Start
• NotSelected-End
• Disappear-Selected-Start
• Disappear-Selected-End
• Disappear-NotSelected-Start
• Disappear-NotSelected-End

Each timer should be a single afterFX composition, including composition labels reflecting the following Eko timer states:

• Appear-Start
• Appear-End
• Progress-Start
• Progress-End
• Disappear-Start
• Disappear-End

AfterFX Animation Considerations/Limitations

• The animation has to work and be legible on various backgrounds, since it plays on top of video
• The animation has to be vector, and can’t include Bitmap effects, Motion-blurs, Expressions / script-based animated properties

Animation Quality

• The animation export for each component from BodyMovin has to end up small (up to 30kb), meaning animation needs to be optimized in terms of amount of vectors / keyframes used, and can’t be too detail-heavy
• Prior to delivery - the animation has to be tested and validated that is suitable for Eko’s platform:
  • As part of the AfterFX design and animation process: Use the AfterFX BodyMovin plugin’s preview to see it looks as intended
  • When you have a final animation you need to validate:
    • Use lottie/iOS App to see it looks as intended on iOS
    • Use lottie/android App to see it looks as intended on android
    • Use https://www.lottiefiles.com/preview to see it looks as intended on web

Animation Usage in code

JSON files (each component should be a separate file) should be referenced in the lottieData options of the EkoLottieDecisionButton or EkoLottieTimer

Sample Resources

Sample project for a Lottie-based Eko Components, including :

• Renders Folder
• Reference to see how it should look (showing just 1 path)
• Lottie JSON for each component - “abstain”, and “chug” buttons + “timer”
• AfterFX source project