# Easiest way to make this animation **URL:** \ **Category:** Need help\ **Created:** [April 10, 2024, 2:37pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079 "2024-04-10T14:37:18Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![eurogar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eurogar/32/28456_2.png) [@eurogar](https://forum.bubble.io/u/eurogar)\ **Post date:** [April 10, 2024, 2:37pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/1 "2024-04-10T14:37:19Z")
What’s the easies way to make the animation of the black section on this vid? ![ezgif-4-9758d33539](https://us1.discourse-cdn.com/bubble/original/3X/5/0/50a1240962a80269c25f357c4b27bd19c4ca780a.gif) I already have the rounded square black shape created, but I want it to be shown only after a certan scroll level (before that, the rounded square black shape is hidden, like on the attached GIF) ---
**Author:** ![GH5T](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gh5t/32/209141_2.png) [@GH5T](https://forum.bubble.io/u/GH5T)\ **Post date:** [April 10, 2024, 2:42pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/2 "2024-04-10T14:42:53Z")
Javascript, scroll listener, and CSS baby 🙂 That tabs, I have already created. The animation effect you’re seeing is height adjustment based on scroll. You might be able to achieve this with conditionals and transition speeds. ---
**Author:** ![eurogar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eurogar/32/28456_2.png) [@eurogar](https://forum.bubble.io/u/eurogar)\ **Post date:** [April 10, 2024, 2:43pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/3 "2024-04-10T14:43:56Z")
Hmmm what about a plugin that does it for me? Can’t get into JS+CSS 😕 ---
**Author:** ![eurogar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eurogar/32/28456_2.png) [@eurogar](https://forum.bubble.io/u/eurogar)\ **Post date:** [April 10, 2024, 2:45pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/4 "2024-04-10T14:45:43Z")
Would you mind sharing the exact implementation of that? That’d be super awesome 🙂 ---
**Author:** ![GH5T](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gh5t/32/209141_2.png) [@GH5T](https://forum.bubble.io/u/GH5T)\ **Post date:** [April 10, 2024, 2:48pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/5 "2024-04-10T14:48:09Z")
[[NEW PLUGIN] - Tabby Nav | Advanced Keyboard Controlled Navigation - Showcase / Plugins - Bubble Forum](https://forum.bubble.io/t/new-plugin-tabby-nav-advanced-keyboard-controlled-navigation/315135) This is the tab navigation. It has that animation. Nothing else does it (on Bubble) unless you add the CSS yourself. For the transition, I’d suggest playing with the scroll percentage conditional with the height animation. [Height: 0] | **When scroll height** \> **90%** : [Height: 100] Appearance \> Transition Properties \> Height (200ms Ease-in-out) That’s a basic setup for something like that. There is better ways (with actual code of course), but this can work. ---
**Author:** ![eurogar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eurogar/32/28456_2.png) [@eurogar](https://forum.bubble.io/u/eurogar)\ **Post date:** [April 10, 2024, 2:50pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/6 "2024-04-10T14:50:41Z")
Thanks! But I guess the plugin you shared is for the tab buttons, right? Sorry for the confusion, but I’m not interested in the tabs, but in the black square (with rounded corners) that seems “stuck” until you reach the footer of the site. If you scroll up again, that black square gets hidden. ---
**Author:** ![GH5T](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gh5t/32/209141_2.png) [@GH5T](https://forum.bubble.io/u/GH5T)\ **Post date:** [April 10, 2024, 2:51pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/7 "2024-04-10T14:51:08Z")
Yes. That’s what I was referring to. I was just stating the animation from the tab effect itself as well. Essentially building this functionality the “bubble way” will take some effort and time (to make it clean and work the way you expect). The route I gave you is where you would start for that. Doing-so will hopefully teach you other routes of making things happen on your site appear more “magical” as well. ---
**Author:** ![eurogar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eurogar/32/28456_2.png) [@eurogar](https://forum.bubble.io/u/eurogar)\ **Post date:** [April 10, 2024, 6:01pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/8 "2024-04-10T18:01:29Z")
Thanks for this! At the end, I’ve achieved a similar effect with the “AOS - Animate On Scroll” plugin and the “Zenscroll” plugin, plus some conditions. Not perfect, but good for now 🙂 ---
**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\ **Post date:** [June 19, 2024, 2:37pm UTC](https://forum.bubble.io/t/easiest-way-to-make-this-animation/317079/9 "2024-06-19T14:37:59Z")
Closed on June 19, 2024, 2:37pm UTC This topic was automatically closed after 70 days. New replies are no longer allowed.