Time based instead of click

[barakadax]

There are some awesome animations here that I would really love to use but is there a way that instead of being click based event to pass a param like 2s or 0.5s to make animation happens and disable the click based?

for example I was trying to achieve this with this CodePen: https://codepen.io/yuanchuan/pen/MWjxRrL

[Danny-Engelman]

Wrap the <css-doodle> in your own Web Component <my-doodle>:

customElements.define("my-doodle",class extends HTMLElement{
  connectedCallback(){
      setInterval( ()=> this.querySelector("css-doodle").update() , 2000 )
  }
})

[barakadax]

That works, thank you very much but is there a way to stop the click functionality so it will be only by intervals?

[barakadax]

Took me a second to really read and now I feel a bit stupid, there was in the tag <css-doodle> an extra of click-to-update and after removing it everything is fine.

[Danny-Engelman]

Yes, better solution

While you were typing I had already written:

If you can't change the original component behavior; add a click handler that cancels all other clicks:

customElements.define("my-doodle",class extends HTMLElement{
  connectedCallback(){
      let doodle = this.querySelector("css-doodle");
      doodle.addEventListener("click", (evt)=>evt.stopPropagation() ,true );
      setInterval(()=>{
        doodle.update();      
      },2000)
  }
})

[barakadax]

That is amazing, should be added to https://css-doodle.com/ incase someone else wants this behavior, thank you very much

[Danny-Engelman]

Actually.. to be complete and correct

The connectedCallback fires on the opening tag.
So above code will fail if the Web Component is defined before it is parsed in the DOM, because <css-doodle> doesn't exist yet in the DOM (wasn't parsed yet).

Easy fix:

customElements.define("my-doodle",class extends HTMLElement{
  connectedCallback(){
     setTimeout(()=>{
        let doodle = this.querySelector("css-doodle");
        doodle.addEventListener("click", (evt)=>evt.stopPropagation() ,true );
        setInterval(()=>{
          doodle.update();      
        },2000);
     });
  }
})

[barakadax]

When I call my JS scripts from the HTML I usually use script defer and put the HTML tags in the bottom of my webpage so everything will surly be rendered before but thanks for the code :D

[Danny-Engelman]

Yes, that is the great escape;
but it will get you more FOUCs as the raw lightDOM content will now be displayed until the Web Component has processed it.

[barakadax]

laggyAnimation.mp4

So I have an Issue where the animation is lagging, I used:

customElements.define("custom-doodle", class extends HTMLElement{
   connectedCallback(){
      setTimeout(()=>{
         let doodle = this.querySelector("css-doodle");
         doodle.addEventListener("click", (evt)=>evt.stopPropagation() ,true );
         setInterval(()=>{
           doodle.update();      
         },2000);
      });
   }
});

And:

<custom-doodle>
         <css-doodle>
            @grid: 8 / 100vmax;
            --hue: calc(180 + 1.5 * @x * @y);
            background: hsl(var(--hue), 50%, 70%);
            margin: -.5px;
            transition: @r(.5s) ease;
            clip-path: polygon(@p(
              '0 0, 100% 0, 100% 100%',
              '0 0, 100% 0, 0 100%',
              '0 0, 100% 100%, 0 100%',
              '100% 0, 100% 100%, 0 100%'
            ));
         </css-doodle>
      </custom-doodle>

• Used MS Snappy to capture it and it doesn't look so lagging in the video but trust me it's lagging