Jump to content
Search Community

Help with Simple Line animation

retropunk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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.
×
×
  • Create New...