Help with parent child animation

[curtiswiens]

Not sure what I am doing wrong here except for I took too much time off from using GSAP  I am trying to do something really so simple here. Basically just want the headline and subhead to reveal from the center with the lines. No matter how I set thing up the parent div wants to animate from left to right. Am I just doing this the wrong way, not seeing something obvious or should I be using clip-paths? 

 

Thanks in advance!

See the Pen bGrMPaq by cwiens (@cwiens) on CodePen

[GreenSock]

2 hours ago, curtiswiens said:

except for I took too much time off from using GSAP

How dare you.

 

It's not a really simple thing actually due to the way HTML/CSS works. Here's a CodePen I cooked up with a simple centerOut() helper function that may help - just wrap your content <div> in another <div> that'll serve as a mask and pass that into the centerOut() method: 

See the Pen 45c57cf08b8719823a87475b3548fbba?editors=0010 by GreenSock (@GreenSock) on CodePen

 

They'll need to be position: relative or absolute too of course. 

 

You could use a clip, but it looks like you might want a border-left and border-right and the clip would hide that so my technique just animates the width while counter-moving the inner content.

 

Does that help? Maybe someone else has a different approach that'd work even better - my brain is a bit foggy at 1am.  

[curtiswiens]

Thanks! And thanks for verifying it is not simple.