How to animate a line from the centre towards left-right using TimeLineMax

[dragon_89]

Hi,

 

I want to create a line on top of the frame i.e. the line should start from the center and grow simultaneously towards the side. Have given the sample link (this is in TimeLineLite):

 

See the Pen XRzEbb by dragon_89 (@dragon_89) on CodePen

 

 

I want to add the above code to the following banner (have attached the files as well):

 

See the Pen RVjMPj by dragon_89 (@dragon_89) on CodePen

 

The problem that I am facing is how to add this to "TimeLineMax" and the line should start/grow along with the word that eases in the screen.

 

Thanks

 

sample.zip

[PointC]

Hi @dragon_89

 

I do see lines animating in your first demo, but I'm not seeing anything happening in your 2nd pen. Looks like the scripts are missing and you're trying to link to a local CSS file. Without that I'm not quite understanding your question. Scaling a word with the lines should not be a problem. You may be asking how to start them at the same time? If that's the question, you need to take a look at the position parameter. Here's some great reading about that:

 

https://greensock.com/position-parameter

 

Happy tweening.

[dragon_89]

Hi,

 

I don't know why it is not visible but I have added the files (zip files).

[PointC]

I meant the second demo in your post. It's much easier to troubleshoot by looking at your CodePens rather than downloading your zip files. If you could fix that second pen, we could better see what's happening. 

 

If your question is about starting at the same time, please see the link I posted about the position parameter. If that's not your question, could you please fix that pen and provide some more specifics about your problem?

 

Thanks.

[dragon_89]

Hi,

 

I solved the issue. I just had to update the Javascritp. Code

 

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
		 <script type="text/javascript" src="js/TweenMax.js"></script>
		<script type="text/javascript">


			(

				function(){

					function triggerLines(){
						var tl = new TimelineLite()

		TweenMax.set('#lineLeft', {marginTop:50, marginLeft:20});
		TweenMax.set('#lineRight', {marginTop:50, marginLeft:180});

		// tl.addLabel("start");
		tl.from("#lineLeft", 1, {scaleX:0, transformOrigin:"right"},0)
		tl.from("#lineRight", 1, {width:0, scaleX:0, transformOrigin:"left"},0)
					}
				var tl1 = new TimelineMax();
				//var tl = new TimelineLite()

			//	TweenMax.set('#lineLeft', {marginTop:50, marginLeft:20});
			//	TweenMax.set('#lineRight', {marginTop:50, marginLeft:180});
				// tl.addLabel("start");

				tl1.to("#one",.5,{opacity:1})
		  		.from("#one .text1", 1, { left:'-100%', opacity:0,ease: Power1.easeIn })
		  		.to("#one .text1", 1, { left:'100%', opacity:0,ease: Power1.easeOut }, '+=1')
				.to('#one',0.25, {opacity:0,onComplete:triggerLines},'+=0.25')

				// starts banner second frame
				.to('#two',.5,{opacity:1})
				.to('#two .text2',1,{ ease: Power1.easeIn})
			}());
		</script>