I would like to ask for your help to be able to replicate this button on bricks, with bricksforge. I even managed to execute part of it, but when I got to the logic part of checking whether it was opened or not to run the Hoover animation, I got lost.
exemple: https://codepen.io/BelMus/pen/VRzNpO
This animation should be completely replicable using css, no need for js imo.
A lil brainfried rn but I’ll cook up some css for you tomorrow 
Unless of course you really wanna use JS for this to practice or whatever, if that’s the case then we’ll figure that out too 
yes, I’m practicing JS, but I’m a newbie, I would like to replicate this function with bricksforge
Thank you for your support, I would be very grateful for your help
Ok, js it is then I’ll set it up tomorrow.
Are you using the regular menu toggle or a custom one? Just asking cause the regular menu toggle uses pseudo elements (::before, ::after) instead of regular html tags. While pseudo elements can be animated using gsap, it’s a little more involved (animating css variables instead of the pseudo element directly).
It would be helpful if you could post some screenshots of your setup (toggle and timeliness).
I’m creating a menu from scratch
I’ve already tried creating and removing class events, to see if the animation would stop if I remove the class, I’ve already tried pausing the animation. I have tried several things but without success.
link menu test
Ok so first of all, after taking a closer look at the codepen, I feel like it’s a nightmare to re-create it in any kind of gui haha. Just too many moving parts, much easier to keep the overview when it’s straight up code. I did take a few shortcuts but here’s the result. Can definitely still be tweaked..
Left one is using the Bricksforge Panel, right one is just some quick css. Css one unfortunately not as bouncy but that’d be possible as well by using keyframes instead of just a bezier curve.
I’m honestly not quite sure how to explain this without drowning you in a sea of screenshots that’ll be hard to follow. I’ll just outline everything and export the timelines n stuff so you can import and inspect them.
Note I used the classes from the codepen, template here → Filen
Timelines:
As in the codepen, I’ve separated the hover timelines into Hover In and Hover Out. This is cause if we simply reverse the timeline once the mouse leaves the burger, the bounciness just ain’t that bouncy
Hover IN → Filen
Events:
Hover IN → Filen
Hover OUT → Filen
Click → Filen
The css one uses the same structure just that I basically appended __css to all the classnames. Same goes for the event to toggle the classes on click, same as for the GSAP one, just different classname.
%root% .icon-bar__css {
transition: .25s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/*****HOVER WHILE BURGER IS CLOSED*****/
%root%:hover .span1__css {
width: 35px;
transform: translateY(-2px);
}
%root%:hover .span2__css {
width: 30px;
}
%root%:hover .span3__css {
width: 35px;
transform: translateY(2px);
}
/*****BURGER WHEN OPEN*****/
%root%.burger-open .span1__css {
transform: translateY(9px) rotate(45deg);
}
%root%.burger-open .span2__css {
opacity: 0;
}
%root%.burger-open .span3__css {
transform: translateY(-9px) rotate(-45deg);
}
I hope something in here helps you and that it’s kinda understandable haha. Again, personally I’d tweak the css one with some keyframe animations. If I were to go the GSAP route, I’d straight up use code as having multiple timelines for every span gets kinda messy, even though the BF UI already makes it a lot more manageable than I thought it would be. Also the codepen uses a timeline for every single state, instead of simply reversing them, which adds to the complexity.
Thank you very much my friend, with this information I can create the animation I wanted, I will make a tutorial with your tips to help the community.
It took me a while to respond because I only managed to test it today.
Legend @manc , I’ll give this a go myself.