Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
retropunk

Help with Simple Line animation

Recommended Posts

Hi guys,

I am wondering how to do this.

I want to animate the width of 2 divs.

Here is my start pen

See the Pen uHsGz by SnapToPixels (@SnapToPixels) on CodePen

 

I want the line on the left to be a mirror animation of the line on the right.

So the left line would animate from right to left and vice versa.

At the moment they both animate in the same direction left to right.

 

I can't get away from the Flash mentality with MovieClips and how easy it would be.

I'm sure it's simple I just can't wrap my head around it atm

 

Can I get some help on this?

I appreciate it much in advance!

 

- P

Link to post
Share on other sites

Hi,

 

There's some kind of dirty CSS trick to pull this off. Basically you have to float the element of the right and remove the absolute positioning. Then the element seems to grow from the right.

 

Another option, that could give you less CSS headaches is use a right position in the element to the right and give the parent a relative position:

 

CSS

.demo {
  width:300px;
  height:250px;
  background-color:black;
  position:relative;
}

JS

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

And that should do it.

 

Rodrigo.

  • Like 1
Link to post
Share on other sites

Hi Patrick,

 

Yeah its these seemingly simple things that can be a css nightmare. 

It appears Rodrigos right trick will get you the result of growing from right to left.

 

If tweening width is not an absolute necessity I would offer 2 much easier approaches

 

1: tween scaleX with a transformOrigin of right:

http://codepen.io/GreenSock/pen/yrHDF

 

2: tween the css clip property

I didn't make a demo but this should give you an idea of how it works (think of it like a mask): 

http://codepen.io/GreenSock/pen/xiFyc?editors=011

  • Like 2
Link to post
Share on other sites

Hi,

 

I would do it with one extra element - 

See the Pen ipwEn by bassta (@bassta) on CodePen

 

Also, I've tried one more technique  (

See the Pen cvdjG by bassta (@bassta) on CodePen

 ) - animating width and left positioning to make such an effect, but it doesn't look very smooth :(

Link to post
Share on other sites

I'm happy I posted this. Having a few different solutions is awesome. 

Definitely learned a few things.

 

Thanks to the GSAP family!

 

- Patrick

  • Like 1
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×