v2.0.0

[electerious]

Changes

New

• Track window size changes and recalculate and update instances when the size changes (#7)
• track option to disable window size tracking for each instance individually (#7)

Changed

• The props callback parameter is now nicely formatted
• The update method returns a nicely formatted object of props
• Direct mode must now be defined globally per instance instead of setting it on each prop individually

How to update

Direct mode

Direct mode must now be defined globally per instance instead of setting it on each prop individually.

1.x

const instance = basicScroll.create({
    elem: document.querySelector('.element'),
    from: 'top-bottom',
    to: 'bottom-top',
    props: {
        '--opacity': {
            from: 0,
            to: 1,
            direct: true
        }
    }
})

2.x

const instance = basicScroll.create({
    elem: document.querySelector('.element'),
    from: 'top-bottom',
    to: 'bottom-top',
    direct: true,
    props: {
        '--opacity': {
            from: 0,
            to: 1
        }
    }
})

Track window size changes

You no longer need to recalculate and update your instances when the window size changes. basicScroll now takes care of it.

1.x

const instance = basicScroll.create({
    elem: document.querySelector('.element'),
    from: 'top-bottom',
    to: 'bottom-top',
    props: {
        '--opacity': {
            from: 0,
            to: 1
        }
    }
})

// Recalculate and update your instance manually when the tracking is disabled.
// Debounce this function in production to avoid unnecessary calculations.
window.onresize = function() {

    instance.calculate()
    instance.update()

}

2.x

const instance = basicScroll.create({
    elem: document.querySelector('.element'),
    from: 'top-bottom',
    to: 'bottom-top',
    props: {
        '--opacity': {
            from: 0,
            to: 1
        }
    }
})

Props

The props callback parameter is now nicely formatted.

1.x

const instance = basicScroll.create({
    elem: document.querySelector('.element'),
    from: 'middle-bottom',
    to: 'middle-top',
    inside: (instance, percentage, props) => hand.rotate(props[0].value, 10, 14),
    props: {
        'deg': {
            from: 0,
            to: 360
        }
    }
})

2.x

const instance = basicScroll.create({
    elem: document.querySelector('.element'),
    from: 'middle-bottom',
    to: 'middle-top',
    inside: (instance, percentage, props) => hand.rotate(props.deg, 10, 14),
    props: {
        'deg': {
            from: 0,
            to: 360
        }
    }
})