LILITH-TRANSITION

WHAT

LILITH-TRANSITION is a toy project that used Paint API (Houdini APIs), it add just one transition-paint to simulation dot-transition.

WHY

No reason, just want to try new things😀.

HOW

How to import LILITH-TRANSITION

• Use Node.js (with rollup.js):

  1. install LILITH-TRANSITION:

     npm install lilith-transition -S

  2. import LILITH-TRANSITION on anywhere:

     // import all (painter and web-components).
     import("lilith-transition");
     
     // import painter only.
     import("lilith-transition/painter");

• Use CDN:

  1. add script tag into your html:

     <script type="module" src="https://raw.githubusercontent.com/JuerGenie/lilith-transition/master/release/index.js"></script>

     TIPS: this resource always is latest version, if you want to fixed version, you should copy the file into your project's static folder.

  2. add style into your element:

     <div style="background-image: paint(lilith-transition); --lilith-transition-position: 50%"></div>

How to use LILITH-TRANSITION

• sample:

  <div class="lilith-transition"></div>
    
  <style>
      .lilith-transition {
          background-image: paint(lilith-transition);
          --lilith-transition-position: -50%;
          --lilith-transition-length: 50%;
            
          transition: --lilith-transition-position 1s ease-out;
      }
  </style>
    
  <script type="module">
      const div = document.querySelector(".lilith-transition");
      div.addEventListener("mouseenter", () => {
          div.attributeStyleMap.set("--lilith-transition-position", "60%");
      });
      div.addEventListener("mouseleave", () => {
          div.attributeStyleMap.delete("--lilith-transition-position");
      });
  </script>

See example folder, the scss file (example/style.scss) defined some stylesheet class to help you for use this.

And if you want to know what is the example's look like, you can try:

1. clone this repository
2. run yarn
3. run yarn watch
4. open new terminal, run yarn dev
5. open web page http://127.0.0.1:8080

this example page look like:

About custom properties

| Property Name | Syntax | Inherits | Initial Value | Description | | ------------------------------- | ---------------------------------- | :------: | ---------------------------------- | ------------------------------------------------------------ | | --lilith-transition-color | <color> | √ | #000 | context's fill style. | | -–lilith-transition-density | <length> \| <length-percentage> | √ | 100px | distance between dots.recommend use px cause now just handle px and per, and finally all use px. | | --lilith-transition-direction | horizontal \| vertical | √ | horizontal | transition direction. | | –-lilith-transition-length | <length> \| <length-percentage> | √ | 200px | transition length.recommend use px cause now just handle px and per, and finally all use px. | | –-lilith-transition-max-size | <length> \| <length-percentage> | √ | with --lilith-transition-density | dot's radius, range (0, MAX], if value lt or eq 0, it will use --lilith-transition-density's value.recommend use px cause now just handle px and per, and finally all use px. | | --lilith-transition-position | <length> \| <length-percentage> | × | 0 | current transition progress.recommend use px cause now just handle px and per, and finally all use px. | | --lilith-transition-style | fade-in \| fade-out \| fade-in-out | √ | fade-in | transition's style, see example. |

Finally

You can contact me by email.