What’s the easies way to make the animation of the black section on this vid?
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)
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.
Hmmm what about a plugin that does it for me? Can’t get into JS+CSS 
Would you mind sharing the exact implementation of that? That’d be super awesome
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.
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.
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.
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
This topic was automatically closed after 70 days. New replies are no longer allowed.
