PricingBlog

Svg action

  • akorniic-1233363116868239521

    Artur K / akorniic

    1 year ago

    Hello. Need help, please. How to make so svg will change it color for 5 seconds after i will click by mouse on it?
    1
  • Svg action
  • erikbeus-1233364082665459732

    Erik Beuschau

    1 year ago

    You can use the SetTimeout action to delay another action 5 seconds. In the delayed action, you would then change a variable, and use the value of that variable for a class on your svg that would then change the color.
    1233364082472517632-Screenshot_2024-04-26_at_12.27.08.png
  • akorniic-1233413610349269023

    Artur K / akorniic

    1 year ago

    Maybe you have a video with similar situation?
  • erikbeus-1233417912803528734

    Erik Beuschau

    1 year ago

    Ah, actually the action is called Sleep. I've made a small example project you can look at here. You'll notice the action for the button's click event https://editor.nordcraft.com/projects/erik_delayed/branches/start/components/HomePage?mode=design&leftpanel=design&rightpanel=events&canvas-width=800&canvas-height=800
    1233417913038274580-Screenshot_2024-04-26_at_16.02.03.png
    1233417913361502218-Screenshot_2024-04-26_at_16.02.08.png
  • akorniic-1233437622110781531

    Artur K / akorniic

    1 year ago

    Thank you very much! I will come back with my status asap.
  • Tod-1233437623477862521

    Tod

    1 year ago

    Great energy @Artur K / akorniic! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
  • akorniic-1233438941336698930

    Artur K / akorniic

    1 year ago

    In my project, I need the icon to change its color to green after being clicked and then return to its original color after 5 seconds.
  • jacobkofoed-1233477066800762911

    Jacob Kofoed

    1 year ago

    - Create a variable, you can call it "triggered"
    - On the click-event, set the variable to true
    - On the same click event, do what Erik suggested of using the sleep-action to then set the variable back to false after 5s
    - Use this variable to trigger a class triggered on your SVG
    - Make the style changes to your class
    - Profit 💵

    I've done it all in this example, based on Erik's initial branch https://editor.nordcraft.com/projects/toggle_button_color/branches/main/components/HomePage
  • akorniic-1234119964244574249

    Artur K / akorniic

    1 year ago

    Thank you very much!