I am trying to build an interactive component in toddle to use as a web component in webflow....
Hello everyone , i am trying to build this interactive component in toddle . . .i am able to get the svg to animate but it i am struggling to achieve that bounce effect . . . . .Anyone have an idea how i can achieve this effect ? My Toddle component is the one on the left the inspiration is the right image Physics based timing functions are not natively supported in Nordcraft (yet ! π ) . I did this fun proof of concept a while ago of how the tech could work https://physics_animation_editor.toddle.site/spring You can then (using the raw CSS editor ) set a transition-timing-function: linear(0 0%, 0.009 0.695%, 0.038 1.53%, 0.141 3.199%, 0.734 9.597%, 0.868 11.266%, 0.969 12.796%, 1.053 14.465%, 1.112 16.134%, 1.132 16.968%, 1.148 17.942%, 1.156 18.776%, 1.159 19.193%, 1.16 19.75%, 1.161 20.028%, 1.16 20.445%, 1.157 21.28%, 1.151 22.114%, 1.14 23.088%, 1.118 24.757%, 1.042 29.764%, 1.02 31.433%, 1.004 32.962%, 0.992 34.492%, 0.982 36.161%, 0.979 36.996%, 0.976 37.969%, 0.975 38.804%, 0.974 39.777%, 0.974 40.612%, 0.975 41.446%, 0.978 43.255%, 0.993 49.93%, 0.999 53.129%, 1.001 54.659%, 1.003 56.328%, 1.004 57.997%, 1.004 59.805%, 1.004 63.282%, 1 73.157%, 0.999 79.972%, 1 100%) You can use the tool to create spring timing functions to your liking . https://motion.dev/ is also really cool , as @NoCode ProCode mentions , but in this case it would add more overhead and will never be as performant as CSS transitions . There is also a bounce version here https://physics_animation_editor.toddle.site/bounce in case that fits your scale better . Please share your project in the showcases channel if you work it out π it looks fun ! π₯1π₯1π₯1π₯1π₯1π₯1π₯1π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯2π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1π₯3ππ½1
.jpeg/public)