Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: ability to set innerHTML beyond numeric values #870

Open
Cerchie opened this issue Nov 9, 2023 · 1 comment
Open

Feature: ability to set innerHTML beyond numeric values #870

Cerchie opened this issue Nov 9, 2023 · 1 comment
Assignees

Comments

@Cerchie
Copy link

Cerchie commented Nov 9, 2023

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants