text on eventlistener event

[PimDamen]

Hey all, 
I am using Adobe animate and am a beginner in GSap. 
I am trying to do a hover over effect but somehow... cant get it to work. 

Above the script i have placed this. 
 

var textDisplay = root.textDisplay_txt;

in the animate canvas i have a dynamic text object with the corresponding instance name "textDisplay_txt"
so now i need to get some text in there when i hover over a logo. 
In this case an AMD socket logo. (could even be an image map or anything else for that matter i guess)

The eventlisteners work.. i just dont know what to use here as a property, scaling works. 

Note the line text? : <p>blabla</p>... thats where i need to do somehting i think., 
though i am pretty clueless at this point. 

root.logoAmd_mc.addEventListener('mouseover', logoAmd_over);

root.logoAmd_mc.addEventListener('mouseout', logoAmd_out);

 

function logoAmd_over(){

var logoAmd = root.logoAmd_mc;

gsap.to(logoAmd,{

scaleY : 1.1,

scaleX : 1.1,

 

});

gsap.to(textDisplay,{

text? : <p>blablabla</p>

});

}

 

function logoAmd_out(){

var logoAmd = root.logoAmd_mc;

gsap.to(logoAmd, {

scaleY : 1,

scaleX : 1,

});

}

 

[Cassie]

I would probably add the text in the HTML, hide it with CSS and then fade it in with opacity or autoAlpha

// fade text in
gsap.to(yourText, {opacity: 1});

If you want to add text with HTML markup you can do that with JS

element.innerHTML = "<p>Something</p>"

Or if you want to animate some text in you can use text Plugin

//replaces yourElement's text with "This is the new text" over the course of 2 seconds
gsap.to(yourElement, {duration: 2, text: "This is the new text", ease: "none"});

Hope one of these helps!

[PimDamen]

so in my case i could just use the following?

gsap.to(root.textDisplay_txt, {duration: 2, text: "This is the new text", ease: "none"});

in the code in Adobe Animate ( dont have a clear view of how the html or CSs is gonna look since i am using Adobe as my creation tool for this one and publish it when everything is done so the wizard takes care of the css and html. 
after that it's my assignment to clean up. 
 

[Cassie]

Yes, if you include the text plugin

If you're using CDN links you would need...

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>

Edited July 18, 2022 by Cassie

[PimDamen]

1 minute ago, Cassie said:

Yes, if you include the text plugin

not sure how to do that but i'll figure that out asap thanks!

 

[Cassie]

I edited my answer! I hit enter too soon, sorry!