Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

Share this post


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.

:)

Share this post


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).

Share this post


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.

:)

Share this post


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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×