textura-renderer v1.0.41

Renderer

Optimized small library for convenient work with coordinates and render loop. Renderer is written on typescipt. You can use with frontend frameworks or native js. Aimed on creating websites animations

• excellent support projects on native JS or TS
• excellent support React.js
• partable support Vue.js. If you get errors, and use typescript, try import all components from "textura-renderer/src".
• no support for Angular.js. But you are able to copy "textura-renderer" folder from "node_modules/" and put the file directly in your project. If u still get errors, try import all methods from "src" folder.

Current Updates (24.02.2023, v1.0.4)

• "label" & "delay" parameteries now is not required in "setToRender" method.
• Fix "getInterpolated" method. Now it works stable.
• Fix error in "getInterpolated" method example.

Next Update (v1.0.5)

• Add new methods: getMouseVelocity, getMouseVelocityX, getMouseVelocityY.
• Add new methods: getScrollVelocityX, getScrollVelocityY.

Future Updates (v1.0.x)

• Add hooks for React and Vue.
• ...

Quick start

Installation

npm

For module bundlers such as Webpack or Browserify.

npm i textura-renderer

import {
	startRender,
	stopRender,
	...
} from 'textura-renderer'

CDN

Recommended for learning purposes, you can use the latest version:

<script src="https://cdn.jsdelivr.net/npm/textura-renderer/dist/index.js"></script>

All methods are available on the object "Renderer":

<script type="text/javascript">
	Renderer.startRender()
	Renderer.stopRender()
	...
</script>

Docs

• Installation
• All methods
• Core renderer methods
• Mouse methods
• Coordinates methods
• Interpolation
• Tweening

All methods

import {
	startRender,
	stopRender,
	setToRender,
	removeFromRender,
	getRendering,
	subscribeMouse,
	unsubscribeMouse,
	getMouseCoords,
	getMouseCoordsFromElement,
	getElementDocumentCoords,
	getElementWindowCoords,
	getScrollCoordsFromElement,
	isElementHovered,
	isElementFullyVisibleX,
	isElementFullyVisibleY,
	isElementFullyVisible,
	isElementPartableVisibleX,
	isElementPartableVisibleY,
	isElementPartableVisible,
	getInterpolated,
	Tween,
	Ease,
	lerp
} from 'textura-renderer'

Core renderer methods

Add "startRender()" at the top level of the app to use renderer. Then to add code to render loop use "setToRender()" where you want

Example

//App.tsx
useEffect(() => {
	startRender()
	return () => stopRender()
}, [])


// component.tsx
useEffect(() => {
	const label = 'myCustomAnimation'
	setToRender({
		label,
		handler: ( time: number ) => { /* your code */ },
		delay: 10 //ms
	})
	return () => removeFromRender( label )
}, [])

Mouse methods

Add "subscribeMouse()" at the top level of the app to use mouse methods.

Example using with renderer

//App.tsx
useEffect(() => {
	subscribeMouse()
	startRender()
	return () => { 
		unsubscribeMouse() 
		stopRender()
	}
}, [])


// component.tsx
function myAnimation() {
	if ( !myRef.current ) { return }
	const isHovered: boolean = isElementHovered(myRef.current)
	if ( isHovered ) {
		console.log( 'Hovered!' )
	}
}
useEffect(() => {
	const label = 'myCustomAnimation'
	setToRender({
		label,
		handler: ( time: number ) => myAnimation(),
		delay: 10 //ms
	})
	return () => removeFromRender( label )
}, [])

Coordinates methods

Convinient functions for dom elements coords. Use this methods anywhere.

Example

const isVisible = isElementPartableVisibleY(myRef.current)

Interpolation

Use "getInterpolated(config, time)" to create frameByFrame animation. For example on scroll. Or animate any looped object in render loop. U able to scroll video, transform any html content and so on

Example

const Timeline = ( scrollContainer ) => {
	const dist = scrollContainer.getBoundingClientRect().height

	const START = 0
	const MIDDLE = dist / 2
	const END = dist

	const timelineInterface = {
		header: {
			opacity: 0,
			translateY: 0,
			$TIME: [ START, MIDDLE, END ]
		},
		svg: {
			rotate: 0,
			$TIME: [ MIDDLE, END ]
		}
	}
	
	const timeline = [
		{
			$TIME: START,
			header: {
				opacity: 0,
				translateY: 0
			}
		},
		{
			$TIME: MIDDLE,
			header: {
				opacity: 1,
				translateY: 100
			},
			svg: {
				rotate: 30
			}
		},
		{
			$TIME: END,
			header: {
				opacity: .5,
				translateY: -50
			},
			svg: {
				rotate: -180
			}
		}
	]

	return { timeline, interface: timelineInterface }
}

useEffect(() => {
	const label = 'myScrollAnimation'
	setToRender({
		label,
		handler: ( time ) => {
			if (!scrollContainer.current || !header.current || !svg.current) { return }
			const config = Timeline( scrollContainer.current )
			const t = getInterpolated( config, window.scrollY )
			header.current.style.cssText = `
				opacity: ${t.header.opacity};
				transform: translateY(t.header.translateY);
			`
			svg.current.style.cssText = `
				transform: rotate(t.svg.rotate);
			`
		},
	})
	return () => removeFromRender( label )
}, [])

Tweening

Light tween and easing functions for interpolating between two values.

TweenPropsType = {
	from: number / {}, 
	to: number / {}, 
	{ 
		duration?: number, 
		renderDelay?: number, 
		delay?: number, 
		onChange?: Function, 	
		onComplete?: Functions 
		ease?: Function //Ease.InOut by default
	}
}

@author: denkravchu@gmail.com