Animate grid template columns

[ap-prog]

If I have a css grid with this grid-template-columns: 40px 1fr 2fr; and I want it to animate to this grid-template-columns: 80px 1fr 2fr; but with anime.js nothing changes.

Are columns animate-able and, if they are, is there example syntax available?

[ghost]

Animating grid-template-columns currently supported only in Firefox https://blog.logrocket.com/new-in-firefox-66-animating-css-grid-b4ed90ac32f5/

[ap-prog]

Thanks for that.

Ok, I can animate grid-template-columns using window.setInterval, so is there's some way I can do the equivalent of setIntrval using animejs?

[ap-prog]

I RTFM and did it like this (it's not perfect)

let size = { w: 0 }, maxW = '365px', elem = document.getElementById('stage'), closing = (elem.dataset.closed == '0'); // data.closed was added to elem

elem.dataset.closed = (closing ? '1' : '0');

anime({ targets: size, w: [closing ? maxW : '0px', closing ? '0px' : maxW], cycles: 130, round: 1, easing: 'linear', update: function() { elem.style.gridTemplateColumns = '1fr ' + size.w + ' 15px'; } });

[ap-prog]

I improved it a little by (still not perfect but working ok in Windows 10 on Chrome, Firefox and Edge)

let size = { w: 0 }, maxW = 365, elem = document.getElementById('stage'), curW = parseInt(elem.style.gridTemplateColumns.split(' ')[1], 10) || 0; closing = (elem.dataset.closed == '0');// data.closed="0" was added to elem

elem.dataset.closed = (closing ? '1' : '0');

anime({ targets: size, w: [closing ? curW || maxW : 0, closing ? 0 : maxW], cycles: 100, round: 1, easing: 'easeInOutSine', update: function() { elem.style.gridTemplateColumns = '1fr ' + size.w + 'px 15px'; } });

[addlistener]

So there's no way to directly use 'grid-template-rows/columns'?