Jump to content
Search Community

Div text in HTML File or Dom Element in GSAP

Vicky27 test
Moderator Tag

Go to solution Solved by dev-kp,

Recommended Posts

Thank you in advance!

In my banner in one of the frame I am trying to target a headline text (curently a imagine but needs to be a text)wich is in a div in the html file. So the copy1 from the bellow code needs to be a editable text which I have inserted now under a div in html file.How can i create the dom element for that div or how can I change it differently to have the copy as a text not image?

How proffesional is to create the elements for the banner in the html file at all?

 

Thank you!

 

  this.copy1 = this.smartObject({
        id: "COPY1",
        backgroundImage: "copy1.png",
        parent: this.banner,
        alpha:0,
        retina: true
    });

 

 

Creative.prototype.createElements = function () {
 
    this.bgMain = this.smartObject({
        id: "BG-MAIN",
        backgroundImage: "bg_main.jpg",
        //clip: "rect(97px, 163px, 118px, 140px)",
        overflow: "hidden",
        //width: this.bannerWidth,
        width:1795,
        //height: this.bannerHeight,
        height:410,
        parent: this.banner,
        x:-830,
        y:-100,
        retina: true
    });
 
    this.blueMask = this.smartObject({
        id: "blueMask",
        width: this.bannerWidth,
        //width:600,
        height: this.bannerHeight,
        backgroundColor: '#123f64',
        clipPath: "polygon(0% 0%, 0% 100%, 44.3% 100%, 44.3% 38%, 46.25% 38%, 46.25% 64%, 44.3% 64%, 44.25% 100.00%, 100% 100%, 100% 0%)",
        opacity: 0.7,
        parent: this.banner
    });
 
    this.copy1 = this.smartObject({
        id: "COPY1",
        backgroundImage: "copy1.png",
        parent: this.banner,
        alpha:0,
        retina: true
    });
 
    this.copy2 = this.smartObject({
        id: "COPY2",
        backgroundImage: "copy2.png",
        parent: this.banner,
        alpha:0,
        retina: true
    });
Link to comment
Share on other sites

You can do either, you can use the #COPY in css to add styles or you can add them directly in the the smartObject

 

this.copy1 = this.smartObject({
	id: "COPY1",
	innerHTML: "This is live text and not an image",
  	fontSize: 15,
  	color: '#ff0000',
  	'font-weight': 700,
	parent: this.banner
});

Either add it as camelCase eg fontSize or fontWeight
Or put the css property in quotes if using a -

 

hope this helps!

  • Like 1
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.
×
×
  • Create New...