Dependency free library for CSS transform effects based on mouse position.
Documentation site coming soon. For now refer to the Documentation section below.
Currently the only way to use Position Based Transform is to manually download and link positionBasedTransform.min.js in your HTML
<body>
<!-- Your HTML body stuff goes here --->
<script src="./positionBasedTransform.min.js"></script>
<!-- Link your JavaScript file that uses sliceRevealer here --->
</body>For a basic example head over to this CodePen
Create a DOM element and make it targetable by giving it a class or id.
<div id="pbt-target"></div>Then in your javascript file target the DOM element and create an options object. Pass both into pbTransform()
const target = document.getElementById("pbt-target");
const options = {
// Options go here... for example a translate!
translate: 50
}
pBTransform(target, options);And that's it! For more in-depth information on customizing your Position Based Transform refer to the options section below.
For a quick demo on intializing, targeting, and setting options head to this CodePen
All PBTransform() instances are created through the pBTransform() function which takes two arguments.
const target = document.getElementById('pbt-target');
pBTransform(transformTarget, options);Creates and returns an instance of PBTransform()
const target = document.getElementById("pbt-target");
const instance = pBTransform(transformTarget, options);When passing a target to pBTransform() you can use both getElementById() or getElementsByClassName().
// Both of these work!
const target = document.getElementById("targetID");
const target = document.getElementsByClassName("targetClassName")[0];While Position Based Transform is dependency free and does not rely on jQuery you can still pass in jQuery objects as targets.
// This works too!
const target = $(someJQuerySelector);| Name | Type | Example | Description |
|---|---|---|---|
| hoverTarget | DOM Element | CodePen | Sets which DOM Element the event listener will be created on the detect the mouse position for the animation. If not defined then sets the transformTarget to be the hoverTarget as well. |
| updateRate | Number (milliseconds) | CodePen | Sets minimum delay between animations on the transformTarget. Default is 40. |
| translate | Number (pixels) | String | CodePen | The maximum amount the transformTarget can be translated. If you want to affect only one axis then use translateX or translateY instead. If passing in a number it defaults to pixels. |
| translateReverse | Boolean | CodePen | If true then direction the transformTarget translates is reversed. If you want ot affect only one axis then use translateXReverse or translateYReverse. |
| tilt | Number (degrees) | CodePen | The maximum amount the transformTarget can be tilted (equilavent to RotateX/RotateY). If you want to affect only one axis then use tiltX or tiltY instead. |
| tiltReverse | Boolean | CodePen | If true then direction the transformTarget tilts is reversed. If you want to affect only one axis then use tiltXReverse or tiltYReverse. |
| rotate | Number (degrees) | CodePen | The maximum amount the transformTarget can be rotated (equilavent to RotateZ). If you want to affect only one axis then use tiltX or tiltY instead. |
| rotateReverse | Boolean | CodePen | If true then direction the transformTarget rotates is reversed. If you want to affect only one axis then use rotateXReverse or rotateYReverse. |
| rotateStyle | Number (1|2|3) | CodePen | Accepts either 1, 2, or 3. Sets a different way the rotatation is calculated depending on mouse position. Please see example for details. |
| scale | Number (float) | CodePen | Hovering over hoverTarget scales to this value. 1 = 100% |
| initialTransform | Object | CodePen | Sets initial transform properties in case your element already has some transform properties on it or you want it to start at a different position. |
| duration | Number (milliseconds) | String | How many milliseconds/seconds it takes for a transform transition to complete. Default is 200ms | |
| easing | String | Specifies the speed curve of the transition effect. Default is "cubic-bezier(0.215, 0.61, 0.355, 1)". | |
| resetOnMouseLeave | Boolean | If true, then when mouse leaves hoverTarget then it resets position of transformTarget. Default is true. | |
| onEnter | Function | Callback function that fires when mouse enters hoverTarget. | |
| onLeave | Function | Callback function that fires when mouse leaves hoverTarget. | |
| onChange | Function | Callback function that fires when mouse moves inside of hoverTarget and a new transition is fired. |
All methods are called on the instance that is created when initializing
const target = document.getElementById('pbt-target');
const instance = pBTransform(transformTarget, options);instance.resetPosition();Calling .resetPosition() will reset the transformTarget to it's initial position by taking off any transform values.
instance.disable();Calling .disable() will prevent any transition effect from taking place.
instance.enable();Calling .enable() will renable any transition effect.
instance.toggle();Calling .toggle() will switch between disabled and enabled state.
Position Based Transform is an open source software under the MIT license
Interested in who made this? Come visit my portfolio at MaiCoding
Want more sick and easy to use animations? Come over to AnimationZone