Not working when is in heading

Hello,

Can you please share a bit more details about your case so we can try to address this issue and push a fix soon?
Thank you!

Sure, just add Heading widget on elementor and in widget put:

Some Headline <span class="differencolor">some text</span>

And then try to animate that text. You’ll see that it’s not working.

I’ve tried and bot normal animation and split text animation worked for me https://uicore.d.pr/v/TXGD4f
would you mind sharing more details about your actual website, maybe there is something else that is causing this.

Thanks!

Thanks for the details.
The isue here is because of the gradient. The css technique used does not work on split text because in order to animate each letter it needs to wrap them in a spam element also. This is disrupting the css code for gardient since the background clip you;ve used in you custom code only works if text is directly inide of it, eg:My <spanclass='gradient'>text</span

With split text is transformed to this: <span>M</span><span>y</span> <span class='gradient'><span>t</span><span>e</span><span>x</span><span>t</span>
There isn’t something we can do about it to help you achieve your desired result since this a CSS limitation.
The maximum you can do here is to change your CSS code to .gardient * {....}
but this will not be the exact same thing.

Anyway, I’ve took the challenge and tried to do a custom js to do some workaround for your custom code. The code calculate the actual gardient word size and it tries to figure out what art of the gardient shud be added on each letter and apply some extra CSS to adjust it.

document.addEventListener('DOMContentLoaded', function() {
    let offset = 0;

    document.querySelectorAll('.ui-split-animate .gradient-text .char ').forEach(function(char, i) {
        const gradientEl = char.closest('.gradient-text');

        char.style.backgroundSize = gradientEl.offsetWidth + 'px 100%';

        offset += char.previousElementSibling?.offsetWidth || 0;

        char.style.backgroundPosition = (gradientEl.offsetWidth - offset) + 'px 0%';
    });
});

as an extra you will ned to change your CSS selector for you custom code to this .gradient-text, .gradient-text .char

PS: the fix works only in frontend or on the first load of editor.

Hope this help!
Have a great day!