Recalculate dynamic prop?

[KeironLowe]

Is it possible to recalculate on resize props which are dynamically calculated? For example, my prop is the radius of a circle for clip-path and its value is calculated from the width and height of it's container. It seems the calculation is only done once on load, and not evaluated on resize.

basicScroll.create({
    elem: item,
    direct: image,
    from: 'top-bottom',
    to: 'middle-middle',
    props: {
        '--maskRadius': {
            from: '1000px',
            to: this.getTargetMaskSize(image, 2),
            ease: 'circOut'
        }
    }
});

[electerious]

basicScroll won't recalculate the data passed to props. Only from and to are updated on resize. You could try to animate from 1 to 0 or 0 to 1 and combine the value with the width and height in CSS. Not sure if this would work in your case. The idea is that CSS probably knows the width and height of the container and basicScroll only passes a position indicator to it.

Something similar to this:

border-radius: calc(var(--maskRadius, 0) * 100%);

Another way would be to destroy and create a new the instance one on resize.

[KeironLowe]

I thought so I just wanted to double check. In my scenario, I had to destroy and recreate the instances as you mentioned. Thanks!