Button inside a link-card/Interactions

Hi, I hope you guys are having a great day, I have 2 questions.

  1. I have a button inside a card that is also a button, if I click at the button inside it triggers the card action also. How can I make it so that it doesn’t work that way using no-code/custom javascript,

  2. What is the best approach to make interaction in WeWeb? i.e. if something goes from no display to display it fades in or the sidebar slides in and out when on click.

Thank you.

For your point 1), you can use custom JS and event.stopPropagation(), which will stop the event so the action on the parent button will not trigger.
For your point 2) you can use the transform/animation property to have animation activated.

2 Likes

Sorry for 1 actually I don’t understand javascript much, can you show me an example how to do it for my case? On the 2nd I also don’t understand how to properly setup the animation in weweb. I hope you can clarify

  1. on the button workflow as your first action add a custom javascript action

    result:
    chrome_Vu2W0j7IRD
1 Like
  1. For animatable properties you can use transitions

for example you can animate the transition of opacity binding it to a variable and then adding a transition.

result:
chrome_7C6S42q0st

2 Likes

Thank you, 1 works perfectly, on the 2nd, I try to bind the opacity of a card to a variable called ‘opacitycard’, which is default at 0, and made a workflow for a button to change the variable to 1, the transition I put for the card doesn’t seems to be working.

how is your transition?

still haven’t figure it out

try this:

  • the opacity of the element should be bound to a dynamic value between 0 and 1 (eg. bind it to a variable)
  • on the same element in the style panel create a transition as the picture of the previous post
  • with a workflow change the value of the opacity
1 Like

doesn’t work I don’t know why. Nvm I used the modal kit for the previous use case. Btw can I make an animation like svelte where if a user searches a table, the results/table row kinda blinks/or changes opacity u would say

indeed the modal element has builtin animations for transitions between show and hide. If you are using another element and still need help add some screenshot about your setup (eg. forbula of the binded opacity, transition property, workflow actions changing the transition)

do you need to animate a table specifically?
Sure it should be doable with a custom plugin.