Expand shape on scroll

Animations
1

Hi everyone,

New here. I hope you can help me or guide me into the right direction.

I’m trying to figure out how to recreate the horizontal bar animation shown in this example:
‘The State of Artificial Intelligence 2023’ from ‘The State of Artificial Intelligence’ – The 01. Market Overview section
As you scroll or land on the section, the bars smoothly expand from left to right. And I’m not sure how to achieve it.

Thanks!

2

You can’t do that kind of transformation; however, there are some workarounds that might help:

  • Create the shape as you expect it to be in its full form and place additional shapes on each side (same color as the background). You can then animate them to move to the sides when scrolling, creating the effect that the shape in between is expanding.
  • Do this through code.
3

Thanks Samus! Will look into your suggestions :slight_smile:

1 Like