translateY and offsets

[merijnponzo]

Hi based on your theme.js within the src directory i think for example:

'fade-down': {
            '0%': {
                opacity: '0',
                transform: 'translateY(-2rem)',
            },
            '100%': {
                opacity: '1',
                transform: 'translateY(0)',
            },
        },

would not respect the original translateY value i guess like:

<div class="animate-fade-up w-20 h-20 translate-y-20 bg-slate-200 ">

you could add a utility class (offset.js)

module.exports = function ({ addUtilities, matchUtilities, theme }) {
const animateUtilities = matchUtilities(
    {
        'animate-y': (value) => {
            const spacingValue = theme('spacing')[value];
            const className = `animate-y-${value}`;

            return {
                [`--an-translate-y-${value}`]: spacingValue,
            };
        },
    },
    {
        values: Object.keys(theme('spacing')),
    }
)
}

then change theme.js to :

'fade-up': {
            '0%': {
                opacity: '0',
                transform: 'translateY(var(--an-translate-y))',
            },
            '100%': {
                opacity: '1',
                transform: 'translateY(var(--tw-translate-y))',
            },
        },

now the div slides from your new offset position class like (animate-y-40) to the orinal y value:

<div class="animate-fade-up w-20 h-20 translate-y-20 bg-slate-200 animate-y-40">

[e10a]

Great work! I just wish there was a built-in way to use arbitrary values for more properties including offset positions.

[heidkaemper]

@merijnponzo Sorry for the late reply. But indeed a good suggestion! We'll have a look what's possible.

[heidkaemper]

With v1.1.0 this plugin now supports animation-composition utilities. With these we have a bit more control over intial values and offsets.