Can anyone help create a text change fade animation?

Design help Custom code
1

Hi, I am trying to create an effect in my website where a piece of text will change to become a different sentence when it is hovered over. I have managed this but I wanted to make the change more interesting by having the original text fade-out before the new text fades-in, and vice-versa when the cursor is no longer hovering.
The website can be previewed at https://archiemoore.webflow.io/

Here is my Footer Code (I added a quote to the script just for here as it wouldn’t display properly otherwise):
<"script>
Webflow.push(function() {

// Hover text change
$(‘[data-hover-text]’).hover(function() {
var el = $(this); el.attr(‘data-hover-original’, el.text()).css({ ‘width’: el.outerWidth()+‘px’, ‘height’: el.outerHeight()+‘px’ }).text(el.attr(‘data-hover-text’));
}, function() {
var el = $(this); el.css({ ‘width’: ‘’, ‘height’: ‘’ }).text(el.attr(‘data-hover-original’));
});
});
<"/script>

Any help would be absolutely incredible!

2

Hi,

You can easily do this with IX2.

1 - Create a div that will wrap both version of the text
2 - Create a text block in absolute full positioning for each text
3 - in IX2 Mouse hover. Create keyframes for controlling hide/show and/or opacity properties for both text block inside the wrapper from step 1

It would be easier to help you if you could publish your read-only link.
https://university.webflow.com/article/sharing-your-sites-read-only-link