Active State animation, like Apple Mood Selector

Hi Everyone,

Im currently trying to create a motion design piece, that emulates the effect apple uses within their Mental Health section, of their mood app.

How would this be possible. I’ve got the majority of what i need sorted, I just need a gradient to run seperately to the animation, highlighting lines on the piece, making them look like their moving from the gradient actively moving.

Has anyone tried to create something like this? with a gradient running over the top of their animation, highlighting certain section? are there any more referrences of something similar?

Any help / Advice would be greatly appreciated

Hello,
Design the Base Animation:
Use software like Adobe After Effects to create your base animation. This will be the main content over which the gradient will move.
Create the Gradient:
Design a gradient layer that will move independently of the base animation. You can use tools like After Effects or even CSS for web-based animations.
Overlay the Gradient:
In After Effects, you can use blending modes to overlay the gradient on top of your base animation. Experiment with different blending modes like “Overlay” or “Soft Light” to achieve the desired effect.
Animate the Gradient:
Animate the gradient layer to move across the screen. This can be done by keyframing the position of the gradient layer or using expressions to create more complex movements.
Highlight Specific Lines:
To highlight specific lines, you can use masks or mattes. Create a mask that follows the lines you want to highlight and apply the gradient to this masked area.
Best Regards
albert559