Jump to content
GreenSock

Vicky27

Div text in HTML File or Dom Element in GSAP

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

  • Solution

This looks like Bannertime :)

 

this.copy1 = this.smartObject({
	id: "COPY1",
	innerHTML: "This is live text and not an image",
	parent: this.banner
});

gsap.from(this.copy1, {duration: 1, autoAlpha: 0})
Link to comment
Share on other sites

Very grateful for your help.That did work.

However, where I would set the style for it? Generally where is better to do that in js or in style.css?

Thank you.

 

 

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

Thank you very much dev-kp!I have achieved what I needed.

  • 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.
×