[Split text line widths]

Amazing that is perfect.

 

Thank you both!

[Split text line widths]

Hi,

 

Thanks Cassie,

 

inline-block doesn't do it unfortunately.

 

I would like the blue to end on the actual line lengths.

 

 

[Split text line widths]

Hi,

 

Hoping somebody can help me with this please.

 

Codepen is here.

 

I would like the blue background colors to end at the end of each line width instead of stretching to the end of the container.

 

Using max-width: max-content;  works but not in i.e.

 

I don't really need the words split but I am wondering if i need to loop through each line and find each end words position to set the width of the line.

Surely there is a simple split text parameter to fix this?

 

Many thanks!

 

Nick

See the Pen MWOWMBE by niiku23 (@niiku23) on CodePen

[GSAP splittext div's auto width]

Hi,

 

I am using GSAP Splittext to split a DIV (with auto width set in css) full of copy onto lines. I would like the subsequent DIVs that Splittext creates to auto size to the widths of the copy lines contained within them. I thought split text does this automatically but all of the divs that are made appear to be the same width as the widest piece of copy. Grateful for any help?

 

Thanks,

 

Nick

 

JS:

var cta_text_1 = document.getElementById("cta");
var split_cta_text_1 = new SplitText(cta_text_1, {type:"lines", linesClass:"textLine++"});

 

CSS:

.cta{
  position:absolute;
  font-size: 18px;
  text-align: center;
  height:auto;
  width:auto;
  left:0px;
  top:0px;
  color: #fff;
 border: 1px solid #999;
}

.textLine1 { 
  width:auto;
  border: 1px solid #7f7f7f;
}

.textLine2 { 
  width:auto;
  border: 1px solid #7f7f7f;
}

 

[Gsap timeline control between two JS files]

Thanks for the answer Sahil.

[Gsap timeline control between two JS files]

Hi,

 

It's my first question here. I've searched for an answer and not found one. I do not have experience of linking code between multiple javascript files which i guess is fundamental here. Thanks for any replies! 

 

I have projects with GSAP timelines in. I would like to create a separate javascript file that can control those timelines that can be added or removed without adjusting the individual project's code. My simple test of referencing the name of the timeline (and trying to control it) from one javascript file to another is not working. I need a very simple solution with no additional code libraries if possible? I am able to simply adjust and read variables between the two .js files.

 

HTML:

<script type="text/javascript" src="main.js"></script>

<script type="text/javascript" src="navigator.js"></script>

 

main.js:

var tl = new TimelineMax({});

tl.set(["#main_content"], {autoAlpha: 1});

 

navigator.js

tl.to(["#headline3"], 0.2 , {autoAlpha:.5}) ;

 

error: navigator.js:6 Uncaught TypeError: Cannot read property 'to' of undefined

 

Thanks for any help!

 

Nick