Apply CSS transform using direct mode (without CSS vars)

[frankharrison-wj]

Is it possible to apply a CSS transform using direct mode? I want to add a CSS translate directly to an element, and could obviously do that with CSS variables, but since I'm adding it directly (not globally) it'd be nice to do it the old-fashioned way (style="transform: translateY(10rem)") to get IE11 support.

I tried:

direct: true,
props: {
    'translateY': {
        from: '0',
        to: '10rem'
    }
}

and

direct: true,
props: {
    'transform': {
        from: 'translateY(0)',
        to: 'translateY(10rem)'
    }
}

... but neither of those seem to work.

[electerious]

You can use the inside callback to apply styles manually:

direct: true,
props: {
    'value': {
        from: '0',
        to: '10rem'
    }
},
inside: (instance, percentage, props) => {
    console.log(props.value) // 0rem - 10rem
}

---

Explanation why the two tests above don't work:

direct: true,
props: {
    'translateY': {
        from: '0',
        to: '10rem'
    }
}

This will generate CSS like: transformY: 2rem

direct: true,
props: {
    'transform': {
        from: 'translateY(0)',
        to: 'translateY(10rem)'
    }
}

This won't work because translateY(0) is not a value basicScroll can interpolate.