Jump to content
GreenSock

PimDamen

text on eventlistener event

Recommended Posts

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,
});
}
 

Schermafbeelding 2022-07-18 om 13.53.07.png

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. 
 

 
Link to comment
Share on other sites

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 by Cassie
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×