Preact + popmotion component v2 beta (isolated)

index.html

<div id="root"></div>

preact-popmotion-component-v2-beta-isolated.markdown

Preact + popmotion component v2 beta (isolated)

A Pen by james quinn on CodePen.

License.

script.babel

const { h, Component, render } = preact; /** @jsx h */
const { styler, spring, listen, pointer, value } = popmotion;


/** 
TODO: popmotion animation intregrated correctly with Preact. Use in production version
*/
class ViewportIcon extends Component {
    shouldComponentUpdate() {
        // do not re-render via diff:
        return false;
    }

    componentWillReceiveProps(nextProps) {
        // you can do something with incoming props here if you need
    }

    componentDidMount() {
        const ball = document.querySelector('.svg')
        const divStyler = styler(ball);
        const ballXY = value({ x: 0, y: 0 }, divStyler.set);

        listen(ball, "mousedown touchstart").start(e => {
            e.preventDefault();
            pointer(ballXY.get()).start(ballXY);
        });

        listen(document, "mouseup touchend").start(() => {
            spring({
                from: ballXY.get(),
                velocity: ballXY.getVelocity(),
                to: { x: 0, y: 0 },
                stiffness: 200,
                mass: 1,
                damping: 10
            }).start(ballXY);
        });
    }

    componentWillUnmount() {
        // component is about to be removed from the DOM, perform any cleanup.
    }

    render() {
        return (
            <div class="viewport-icon svg">
            <svg viewBox="0 0 32 32">
                <title>arrow</title>
                <path fill="#f5f5f5" d="M16 32c8.859 0 16-7.141 16-16s-7.141-16-16-16-16 7.141-16 16 7.141 16 16 16z"></path>
                <path fill="#100" d="M23.955 13.921c-0.271-0.271-0.723-0.362-0.994-0.090l-6.96 5.785-6.96-5.785c-0.271-0.271-0.723-0.271-0.994 0.090-0.271 0.271-0.181 0.723 0.090 0.994l7.412 6.147c0.090 0.090 0.271 0.181 0.452 0.181s0.362-0.090 0.452-0.181l7.412-6.147c0.362-0.271 0.362-0.723 0.090-0.994z"></path>
            </svg>
        </div>
            );
    }
}

class App extends Component {
    render() {
        return <main>
            <header>
                <ViewportIcon />
            </header>
            <h2>Lazysizes</h2>
            <p>lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster.</p>
            <p>It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.</p>
        </main>


    }
}

render(<App />, document.querySelector("#root"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/8.4.2/preact.min.js"></script>
<script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"></script>

style.less

:root {
  // --viewport-icon__z-index:1;
  background:snow;
}

header {
  /* Create grid spanning viewport width & height */
  display: grid;
  grid-template-rows: 100vh;
  background:white;
}

.viewport-icon {
  position: absolute;
  left: calc(50% - 1.375rem); 
  top: calc(100vh - 5.5rem) ;
	//z-index: var(--viewport-icon__z-index);
}

.viewport-icon svg {
  width: 2.75rem;
  height: 2.75rem;
	//fill:currentColor;
}