juliangarnier / anime

JavaScript animation engine

Home Page:https://animejs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.
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)

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.