juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.42k stars 3.68k forks source link

Feature: ability to set innerHTML beyond numeric values #870

Open Cerchie opened 1 year ago

Cerchie commented 1 year ago

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.

Screenshot 2023-11-09 at 1 28 49 PM

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)

juliangarnier commented 1 year ago

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.