@emmanuel I’m designing a slick transition through conditional custom states on an icon, I need one icon to ease into the other (which would take a transition component for smoothness) can we you add this or should I just time a fade in/out (essentially happening at the same time) between two icons and to create this illusion?
You could also “Add a pause before next action” (navigation workflow) to smooth it even more. Then prepare it as a custom function which can be triggered anytime you like. Or you can build the transition of your icon within an HTML Element and trigger the transition function with @mishav 's toolbox plugin. You might find some nice pre-made transition effects at codepen. I recommend to use SVG for the icons in that case.
1 Like
Yes, I used the workflow pause function, custom states, and conditional transitions to create a hamburger menu spinning around and turning into a back arrow as the menu slides open… But I really like some of the stuff over at codepen… How can I implement those here? I tried using the JS codepen code in @mishav 's JS editor but no luck… Any ideas?
The hamburger menu will be very fancy indeed 
Did you try to build it based on a css transition animation? Or do you have some JS code? The latter would be easier, i reckon. You just have to throw it into a HTML element and trigger that function via the toolbox plugin. In case you have a CSS transition you could paste the code into a condition state of the HTML element and anytime you change the condition with a workflow the code will be executed again. That might work. I did not try by myself, though.
A CSS transition can be triggered by a javascript function by assigning the transition to a class:
1 Like
Nice!
Hello guys,
Interested by this but I’m pretty lost… 
Could you explain more step by step how do you integrate a codepen animation into Bubble (for your own icon for example…) ?
Thanks a lot!
Matt
2 Likes