animate.js

const quad = n => n * n;

const animate = ({
    timing = quad,
    duration,
    draw,
}) => {
    const start = performance.now();

    const anim = (time) => {
        // timeFraction [0, 1]
        let timeFraction = (time - start) / duration;
        if (timeFraction > 1) timeFraction = 1;

        const progress = timing(timeFraction);

        draw(progress);

        if (timeFraction < 1) {
            requestAnimationFrame(anim);
        }
    };

    requestAnimationFrame(anim);
};

export default animate;

ScrollTo.js

import { string } from 'prop-types';
import { compose, setPropTypes, withHandlers } from 'recompose';

import animate from 'utils/animate';

import { ScrollDownButton } from './style';

const enhancer = compose(
    setPropTypes({
        elementId: string.isRequired,
    }),
    withHandlers({
        onClick: ({ elementId }) => (event) => {
            event.preventDefault();

            const element = document.getElementById(elementId);
            const top = element.getBoundingClientRect().top;
            const startY = window.pageYOffset;

            animate({
                duration: 800,
                draw: (progress) => window.scrollTo(0, startY + top * progress),
            });
        }
    })
);