Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
dragon_89

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

Recommended Posts

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

Link to post
Share on other sites

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.

:)

Link to post
Share on other sites

Hi,

 

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

Link to post
Share on other sites

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.

:)

Link to post
Share on other sites

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>

 

Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×