Feature: ability to set innerHTML beyond numeric values
Cerchie opened this issue · comments
Note: Previously reported in issue #710
I don't think this is a bug since innerHTML
was not designed with non-numeric values in mind, but it's a feature that would be helpful: the ability to set an element's inner HTML with non-numeric values from a keyframe, like so:
var animationGoToDefReq = anime({
targets: '.els',
keyframes: [
{translateY: 150},
{innerHTML: 'some words here'},
{translateY: -2},
],
delay: function(el, i) { return i * 400; },
direction: 'normal',
loop: true,
autoplay: true,
easing: 'easeInSine',
duration: 4000
});
Currently, anime.js
adds a zero to whatever content I attempt to add to innerHTML.
Example: If I try to set an innerHTML
of 'Location' I see a zero tacked to the end.
To reproduce:
git clone https://github.com/Cerchie/svelte-scrollytale.git && checkout innerHTML-issue && npm install && npm run dev
(scroll down to where you can see the animation with the zero)
Yeah the added 0
to a string value is a odd behaviour, but V3 does't expect non numerical value within an animation.
I might change that in V4, and also allow to "animate" values like 'display'
or 'visibility'
.
Currently in V4 you can use a timeline for that, since timeline.set(target, { innerHTML: 'som text' })
works.