coffeekraken-s-square-scale-transition-component v1.0.0

Coffeekraken s-square-scale-transition-component

Table of content

1. Demo
2. Install
3. Get Started
4. Principle
5. Advanced usage
6. Even more advanced usage
7. Javascript API
8. Sugar Web Components Documentation
9. Browsers support
10. Code linting
11. Contribute
12. Who are Coffeekraken?
13. Licence

Install

npm install coffeekraken-s-square-scale-transition-component --save

Get Started

First, import the component into your javascript file like so:

import SSquareScaleTransitionComponent from "coffeekraken-s-square-scale-transition-component"

Then simply use it inside your html like so:

<s-square-scale-transition></s-square-scale-transition>

set a color for our transition

s-square-scale-transition {
  background-color: red;
}

and control your transition with javascript like so:

const $transition = document.querySelector("s-square-scale-transition")
await $transition.animateIn($target) // the target is an HTMLElement from where the transition will start
await $transition.animateOut($target) // the target is an HTMLElement to where the transition will end

Principle

The principle of this component is quite simple. It is splited in 6 phases:

• in:0 : This is the initial phase where the square is set at the $target size and position
• in:1 : This is the phase where the square scale to the $target size
• in:2 : This is the phase where the square scale to the screen size
• still-frame : This is when the animate in transition has ended
• out:1 : This is the phase where the square scale down to the $dest size and position
• out:2 : This is the phase where the square scale down to dissapear

At each phase, the transition element will have a different class applied:

• in:0: no class
• in:1: class animate-in--phase-1
• in:2: class animate-in--phase-2
• still-frame: class still-frame
• out:1: class animate-out--phase-1
• out:2: class animate-out--phase-2

The class s-square-scale-transition will be applied on the body element during the transition

This principle allows you to override the transition between the different phases like so:

s-square-scale-transition {
  background: s-color(primary);

  &.animate-in--phase-1 {
    transition: height 0.4s cubic-bezier(1, 0, 0, 1) 0s, width 0.4s cubic-bezier(
          1,
          0,
          0,
          1
        ) 0s, top 0.4s cubic-bezier(1, 0, 0, 1) 0s, left 0.4s cubic-bezier(
          1,
          0,
          0,
          1
        ) 0s;
  }
}

Note that the component will automatically take care of sequencing the phases depending on your phases animation/transition durations

Advanced usage

For each phases we've seen that you can override the css transition. Now you want maybe to override more than that. Let's say that you want the transition to start from the mouse click position in the $target element. Here's how to proceed:

animateIn

First, here's our code to trigger the transition:

Array.from(document.querySelectorAll("a"), $a => {
  $a.addEventListener("click", e => {
    e.preventDefault()
    $transition.animateIn(e.target, e).then(() => {
      console.log("in finished")
      setTimeout(() => {
        $transition.animateOut(e.target).then(() => {
          console.log("out finished")
        })
      }, 2000)
    })
  })
})

Note that we've passed two parameters to the animateIn function. The first e.target is the $target and as the second parameter we pass the mouse click event to use it later

in:0 style

In the phase 0, we are going to place the transition element where the user has clicked inside the \$target element:

SSquareScaleTransitionComponent.setProps({
  animateStyle: (phase, $target, data) => {
    switch (phase) {
      case "in:0":
        return {
          top: data.clientY + "px",
          left: data.clientX + "px",
          width: 0,
          height: 0
        }
      default:
    }
  }
})

Note the data argument here. This is the mouse click event that we've passed in the animateIn function

in:1 style

In the phase 1, we want to transition element to fill the $target element. Here's how to do that:

SSquareScaleTransitionComponent.setProps({
  animateStyle: (phase, $target, data) => {
    switch (phase) {
      case "in:0":
      // ...
      case "in:1":
        const targetPos = $target.getBoundingClientRect()
        return {
          top: targetPos.top - window.pageYOffset + "px",
          left: targetPos.left - window.pageXOffset + "px",
          width: $target.offsetWidth + "px",
          height: $target.offsetHeight + "px"
        }
      default:
    }
  }
})

Then we can leave the default behavior of the transition so our update is complete.

Event more advanced

If you need to customize even more your transition, you can hook each phase with your own function like so:

SSquareScaleTransitionComponent.setProps({
  animateStyle: (phase, $target, data) => {
    // we've already seen this function
  },
  animate: (phase, $target, data) => {
    switch (phase) {
      case "in:1":
        return new Promise(resolve => {
          // do whatever you want here
          // and resolve the phase when it is finished
          resolve()
        })
      case "in:2":
      // etc...
      default:
    }
  }
})

Browsers support

As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.

The webcomponent API (custom elements, shadowDOM, etc...) is not supported in some older browsers like IE10, etc... In order to make them work, you will need to integrate the corresponding polyfill.

Code linting

This package uses some code linting rules. Here's the list:

1. StandardJS for javascript files
2. Stylelint with stylelint-config-standard for scss files

Your commits will not been accepted if the code style is not respected!

Contribute

This is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:

1. Share the love ❤️
2. Declare issues
3. Fix issues
4. Add features
5. Build web component

Who are Coffeekraken

We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.

More on who we are

License

The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...