Hi everyone. I am looking to recreate this cool ‘springy’ menu effect that I noticed in Capital One’s online banking site. Any suggestions how to please? 
You could look at it as how to animate the rectangle, or how to side in the sub-positions. I would use CSS animations that trigger on the initial click to show.
If you google CSS animations, you can find examples on the web of CSS that lead to the kinds of things you might like. Here’s one result that seemed to have at least one example a bit on-point: Animated Dropdown Menu | UnusedCSS
With a bit of that eyeballing, you might also gain the pattern recognition to be able to check the animation that interests you with devtools. YOu may be able to pull out the animation sequence it is using by looking at the elements tab for relevant CSS. Sometimes, this kind of examination can be non-obvious, so don’t let it become a rabbit hole if it’s not producing insight for you - reverse engineering and finding other examples can often get you there pretty quickly.
Then it’s a matter of integrating the CSS you like into Weweb. I often do this by making more complex CSS in ScriptTag (which, as a State Change member, you have access to) for faster prototyping/learning. I just make a change in the CSS, bang that refresh button, and I see the effect.
2 Likes