WTC Perspective Card

wtc-perspective-card provides a way to create a fake 3d card animation.

Installation

$ npm install wtc-perspective-card

Demo

https://codepen.io/shubniggurath/pen/99df48ac9073736b0bbf5bd0e062a096?editors=0110

Usage

Import it into your project.

import PerspectiveCard from "wtc-perspective-card";

Import the stylesheet with sass or use the css file.

@import "~wtc-perspective-card";

Add your markup.

<div class="card">
  <div class="card__transformer">
    <div class="card__artwork card__artwork--front">
      <img
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/9b1b5b5-1.png"
      />
    </div>
    <div class="card__artwork card__artwork--rear">
      <img
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/pokemon_card_backside_in_high_resolution_by_atomicmonkeytcg_dah43cy-fullview.png"
      />
    </div>
    <div class="card__shine"></div>
  </div>
</div>

You now have 2 options to initalize the component.

Instanciating

1. Using The Decorator function

If you are using just add data-decorator="PerspectiveCard" to your markup.

<div class="perspective-card" data-decorator="PerspectiveCard">
  <img class="perspective-card__img" src="path/image.jpg" />
</div>

And then write your decorator code to take a set of DOM elements and decorate them with the class

const decorate = function (decorator, nodeSet) {
  const controllers = [];
  Array.from(nodeSet).forEach((node) => {
    const controller = new decorator(node, node.dataset);
    node.data = node.data || {};
    node.data.controller = controller;
    controllers.push(controller);
  });
  return controllers;
};

Then feed your DOM elements to the decorator code

const controllers = decorate(
  PerspectiveCard,
  document.querySelectorAll('[data-decorator="PerspectiveCard"]')
);

2. Vanilla JS

Plain vanilla javascript with ES6 and module imports.

const card = new PerspectiveCard(document.getElementById("card"));

Classes

PerspectiveCard

This sets up the basic perspective card. This class expects markup at least conforming to:

.perspective-card
  .perspective-card__transformer
    .perspective-card__artwork.perspective-card__artwork--front
      img
    .perspective-card__artwork.perspective-card__artwork--back
      img
    .perspective-card__shine

This class is designed to be used with a decorator function (provided by the new wtc-decorator static class) or used directly like:

const p = new PerspectiveCard(element);

Kind: global class

• PerspectiveCard
  • new PerspectiveCard(element, settings)
  • instance
    • .motionOff : boolean
    • .element : HTMLElement
    • .position : Array
    • .tPoint : Array
    • .lookPoint : Array
    • .center : Array
    • .zoom : Array
    • .zoomSize : Number
    • .intensity : Number
    • .size : Array
    • .debug : Boolean
    • .ambient : Boolean
    • .axis : Array
    • .playing : Boolean
    • .lastFrameTime : Number
    • .delta : Number
    • .lastDelta : Number
    • .pointerControlled : Boolean
    • .play(delta, raf)
    • .calculateLookDifferential()
    • .pointerMove(e)
    • .pointerEnter(e)
    • .pointerLeave(e)
    • .resize(e)
    • .intersect(entries, observer) ⇒
  • static
    • .targetTo(eye, center, up) ⇒ mat4

new PerspectiveCard(element, settings)

The PerspectiveCard constructor. Creates and initialises the perspective card component.

| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The element that contains all of the card details | | settings | Object | The settings of the component |

perspectiveCard.motionOff : boolean

(getter/setter) The motion value

Kind: instance property of PerspectiveCard
Default: true

perspectiveCard.element : HTMLElement

(getter/setter) The element value

Kind: instance property of PerspectiveCard
Default: null

perspectiveCard.position : Array

(getter/setter) The position of the element relative to the viewport.

Kind: instance property of PerspectiveCard
Default: [0, 0]

perspectiveCard.tPoint : Array

(getter/setter) The 3D target look point. This is the point that the look point will animate towards.

Kind: instance property of PerspectiveCard
Default: [0, 0, -800]

perspectiveCard.lookPoint : Array

(getter/setter) The 3D look point. This is the point that the card look look at.

Kind: instance property of PerspectiveCard
Default: [0, 0, -800]

perspectiveCard.center : Array

(getter/setter) The 3D point that the card sits at.

Kind: instance property of PerspectiveCard
Default: [0, 0, 0]

perspectiveCard.zoom : Array

(getter/setter) The current zoom value. If this is very different to the Z component of the center point, the animation frame will attempt to animate towards this.

Kind: instance property of PerspectiveCard
Default: [0, 0, 0]

perspectiveCard.zoomSize : Number

(getter/setter) The target zoom value

Kind: instance property of PerspectiveCard
Default: 40

perspectiveCard.intensity : Number

(getter/setter) The intensity for the ambient animation.

Kind: instance property of PerspectiveCard
Default: 10

perspectiveCard.size : Array

(getter/setter) The size of the element.

Kind: instance property of PerspectiveCard
Default: [0, 0]

perspectiveCard.debug : Boolean

(getter/setter) Debug setting.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.ambient : Boolean

(getter/setter) Ambient setting. Setting to tru will automatically animate the card.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.axis : Array

(getter/setter) The axis of the element relative to the top-left point.

Kind: instance property of PerspectiveCard
Default: [0, 0]

perspectiveCard.playing : Boolean

(getter/setter) Whether the simulation is playing. Setting this to true will start up a requestAnimationFrame with the play method.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.lastFrameTime : Number

(getter/setter) The amount of time the last frame took

Kind: instance property of PerspectiveCard
Default: 0

perspectiveCard.delta : Number

(getter/setter) The animation delta. We use this and not the RaF delta because we want this to pause when the animation is not running.

Kind: instance property of PerspectiveCard
Default: 0

perspectiveCard.lastDelta : Number

(getter/setter) The animation's last frame delta delta.

Kind: instance property of PerspectiveCard
Default: 0

perspectiveCard.pointerControlled : Boolean

(getter/setter) Whether the card animates based on the position of the pointer. If this is true it will set the pointermove event listener, otherwise it will try to remove it.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.play(delta, raf)

This is the main run-loop function. It is responsible for taking the various previously set properies and transforming the card. This can be called individually, or (more commonly) as the callback to a animation frame.

Kind: instance method of PerspectiveCard
Access: public

| Param | Type | Default | Description | | --- | --- | --- | --- | | delta | number | | The delta of the animation | | raf | boolean | true | This just determines whether to run the next RAF as a part of this call |

perspectiveCard.calculateLookDifferential()

Calculates the difference between the look point and the look point target

Kind: instance method of PerspectiveCard
Access: public

perspectiveCard.pointerMove(e)

The event listener for the pointer move event. This sets the target point to a value based on the pointer's position

Kind: instance method of PerspectiveCard
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

perspectiveCard.pointerEnter(e)

The event listener for the pointer enter event This sets the pointerControlled property to true, updates the target zoom and adds the class perspective-card--over to the element.

Kind: instance method of PerspectiveCard
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

perspectiveCard.pointerLeave(e)

The event listener for the pointer leave event This sets the pointerControlled property to false, updates the target zoom and removes the class perspective-card--over to the element.

Kind: instance method of PerspectiveCard
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

perspectiveCard.resize(e)

The event listener for the resize and scroll events This updates the position and size of the element and sets the axis for use in animation. This is bound to a debouncer so that it doesn't get called a hundred times when scrolling or resizing.

Kind: instance method of PerspectiveCard
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

perspectiveCard.intersect(entries, observer) ⇒

Listener for the intersection observer callback

Kind: instance method of PerspectiveCard
Returns: void
Access: public

| Param | Type | Description | | --- | --- | --- | | entries | object | the object that contains all of the elements being calculated by this observer | | observer | object | the observer instance itself |

PerspectiveCard.targetTo(eye, center, up) ⇒ mat4

Generates a matrix that makes something look at something else.

Kind: static method of PerspectiveCard
Returns: mat4 - out

| Param | Type | Description | | --- | --- | --- | | eye | vec3 | Position of the viewer | | center | vec3 | Point the viewer is looking at | | up | vec3 | vec3 pointing up |

ClickablePerspectiveCard ⇐ PerspectiveCard

The clickable perspective card adds functionality that allows the zooming the card by clicking on it. In doing so the card flips and animates up to a modal style display.

Kind: global class
Extends: PerspectiveCard
Created: Jan 28, 2020
Version: 2.0.0
Author: Liam Egan [email protected]
Todo

• [ ] Add some extra functionality here like a close button and keyboard close

• ClickablePerspectiveCard ⇐ PerspectiveCard
  • new ClickablePerspectiveCard(element, settings)
  • .enlarged : Boolean
  • .tweening : Boolean
  • .tweenTime : Number
  • .tweenDuration : Number
  • .onEndTween : function
  • .targetPosition : Vec2 | Array
  • .screenPosition : Vec2 | Array
  • .screenScale : Number
  • .targetDimensions : Vec2 | Array
  • .motionOff : boolean
  • .element : HTMLElement
  • .position : Array
  • .tPoint : Array
  • .lookPoint : Array
  • .center : Array
  • .zoom : Array
  • .zoomSize : Number
  • .intensity : Number
  • .size : Array
  • .debug : Boolean
  • .ambient : Boolean
  • .axis : Array
  • .playing : Boolean
  • .lastFrameTime : Number
  • .delta : Number
  • .lastDelta : Number
  • .pointerControlled : Boolean
  • .resize(e)
  • .play(delta, raf)
  • .calculateLookDifferential()
  • .pointerMove(e)
  • .pointerEnter(e)
  • .pointerLeave(e)
  • .intersect(entries, observer) ⇒

new ClickablePerspectiveCard(element, settings)

The ClickablePerspectiveCard constructor. Creates and initialises the perspective card component.

| Param | Type | Description | | --- | --- | --- | | element | HTMLElement | The element that contains all of the card details | | settings | Object | The settings of the component |

clickablePerspectiveCard.enlarged : Boolean

(getter/setter) Whether the card is enlarged or not. This is a BIG setter and is really responsible for generating the tweening values setting up the tween and initialising it.

Kind: instance property of ClickablePerspectiveCard
Default: false

clickablePerspectiveCard.tweening : Boolean

(getter/setter) Whether the card is in a tweening state. This just enforces a boolean value.

Kind: instance property of ClickablePerspectiveCard
Default: false

clickablePerspectiveCard.tweenTime : Number

(getter/setter) The current tween time.

Kind: instance property of ClickablePerspectiveCard
Default: 0

clickablePerspectiveCard.tweenDuration : Number

(getter/setter) The current tween duration.

Kind: instance property of ClickablePerspectiveCard
Default: 0

clickablePerspectiveCard.onEndTween : function

(getter/setter) The function to call when the tween ends.

Kind: instance property of ClickablePerspectiveCard
Default: null

clickablePerspectiveCard.targetPosition : Vec2 | Array

(getter/setter) The target position on-screen for the card.

Kind: instance property of ClickablePerspectiveCard
Default: [0,0]

clickablePerspectiveCard.screenPosition : Vec2 | Array

(getter/setter) The current position on-screen for the card. This also updates the element's styles left and top. So this should only be set during a tween.

Kind: instance property of ClickablePerspectiveCard
Default: [0,0]

clickablePerspectiveCard.screenScale : Number

(getter/setter) The card's current scale value.

Kind: instance property of ClickablePerspectiveCard
Default: 0

clickablePerspectiveCard.targetDimensions : Vec2 | Array

(getter/setter) The target dimensions for the card.

Kind: instance property of ClickablePerspectiveCard
Default: [0,0]

clickablePerspectiveCard.motionOff : boolean

(getter/setter) The motion value

Kind: instance property of ClickablePerspectiveCard
Default: true
Overrides: motionOff

clickablePerspectiveCard.element : HTMLElement

(getter/setter) The element value

Kind: instance property of ClickablePerspectiveCard
Default: null
Overrides: element

clickablePerspectiveCard.position : Array

(getter/setter) The position of the element relative to the viewport.

Kind: instance property of ClickablePerspectiveCard
Default: [0, 0]
Overrides: position

clickablePerspectiveCard.tPoint : Array

(getter/setter) The 3D target look point. This is the point that the look point will animate towards.

Kind: instance property of ClickablePerspectiveCard
Default: [0, 0, -800]
Overrides: tPoint

clickablePerspectiveCard.lookPoint : Array

(getter/setter) The 3D look point. This is the point that the card look look at.

Kind: instance property of ClickablePerspectiveCard
Default: [0, 0, -800]
Overrides: lookPoint

clickablePerspectiveCard.center : Array

(getter/setter) The 3D point that the card sits at.

Kind: instance property of ClickablePerspectiveCard
Default: [0, 0, 0]
Overrides: center

clickablePerspectiveCard.zoom : Array

(getter/setter) The current zoom value. If this is very different to the Z component of the center point, the animation frame will attempt to animate towards this.

Kind: instance property of ClickablePerspectiveCard
Default: [0, 0, 0]
Overrides: zoom

clickablePerspectiveCard.zoomSize : Number

(getter/setter) The target zoom value

Kind: instance property of ClickablePerspectiveCard
Default: 40
Overrides: zoomSize

clickablePerspectiveCard.intensity : Number

(getter/setter) The intensity for the ambient animation.

Kind: instance property of ClickablePerspectiveCard
Default: 10
Overrides: intensity

clickablePerspectiveCard.size : Array

(getter/setter) The size of the element.

Kind: instance property of ClickablePerspectiveCard
Default: [0, 0]
Overrides: size

clickablePerspectiveCard.debug : Boolean

(getter/setter) Debug setting.

Kind: instance property of ClickablePerspectiveCard
Default: false
Overrides: debug

clickablePerspectiveCard.ambient : Boolean

(getter/setter) Ambient setting. Setting to tru will automatically animate the card.

Kind: instance property of ClickablePerspectiveCard
Default: false
Overrides: ambient

clickablePerspectiveCard.axis : Array

(getter/setter) The axis of the element relative to the top-left point.

Kind: instance property of ClickablePerspectiveCard
Default: [0, 0]
Overrides: axis

clickablePerspectiveCard.playing : Boolean

(getter/setter) Whether the simulation is playing. Setting this to true will start up a requestAnimationFrame with the play method.

Kind: instance property of ClickablePerspectiveCard
Default: false
Overrides: playing

clickablePerspectiveCard.lastFrameTime : Number

(getter/setter) The amount of time the last frame took

Kind: instance property of ClickablePerspectiveCard
Default: 0
Overrides: lastFrameTime

clickablePerspectiveCard.delta : Number

(getter/setter) The animation delta. We use this and not the RaF delta because we want this to pause when the animation is not running.

Kind: instance property of ClickablePerspectiveCard
Default: 0
Overrides: delta

clickablePerspectiveCard.lastDelta : Number

(getter/setter) The animation's last frame delta delta.

Kind: instance property of ClickablePerspectiveCard
Default: 0
Overrides: lastDelta

clickablePerspectiveCard.pointerControlled : Boolean

(getter/setter) Whether the card animates based on the position of the pointer. If this is true it will set the pointermove event listener, otherwise it will try to remove it.

Kind: instance property of ClickablePerspectiveCard
Default: false
Overrides: pointerControlled

clickablePerspectiveCard.resize(e)

The event listener for the resize and scroll events This updates the position and size of the element and sets the axis for use in animation. This is bound to a debouncer so that it doesn't get called a hundred times when scrolling or resizing.

Kind: instance method of ClickablePerspectiveCard
Overrides: resize
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

clickablePerspectiveCard.play(delta, raf)

This is the main run-loop function. It is responsible for taking the various previously set properies and transforming the card. This can be called individually, or (more commonly) as the callback to a animation frame.

Kind: instance method of ClickablePerspectiveCard
Overrides: play
Access: public

| Param | Type | Default | Description | | --- | --- | --- | --- | | delta | number | | The delta of the animation | | raf | boolean | true | This just determines whether to run the next RAF as a part of this call |

clickablePerspectiveCard.calculateLookDifferential()

Calculates the difference between the look point and the look point target

Kind: instance method of ClickablePerspectiveCard
Overrides: calculateLookDifferential
Access: public

clickablePerspectiveCard.pointerMove(e)

The event listener for the pointer move event. This sets the target point to a value based on the pointer's position

Kind: instance method of ClickablePerspectiveCard
Overrides: pointerMove
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

clickablePerspectiveCard.pointerEnter(e)

The event listener for the pointer enter event This sets the pointerControlled property to true, updates the target zoom and adds the class perspective-card--over to the element.

Kind: instance method of ClickablePerspectiveCard
Overrides: pointerEnter
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

clickablePerspectiveCard.pointerLeave(e)

The event listener for the pointer leave event This sets the pointerControlled property to false, updates the target zoom and removes the class perspective-card--over to the element.

Kind: instance method of ClickablePerspectiveCard
Overrides: pointerLeave
Access: public

| Param | Type | Description | | --- | --- | --- | | e | event | The pointer event object |

clickablePerspectiveCard.intersect(entries, observer) ⇒

Listener for the intersection observer callback

Kind: instance method of ClickablePerspectiveCard
Overrides: intersect
Returns: void
Access: public

| Param | Type | Description | | --- | --- | --- | | entries | object | the object that contains all of the elements being calculated by this observer | | observer | object | the observer instance itself |