niiku23

Amazing that is perfect. Thank you both!

Hi, Thanks Cassie, inline-block doesn't do it unfortunately. I would like the blue to end on the actual line lengths.

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

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

Thanks for the answer Sahil.

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