Simple, "plug-in" reveal tween setup — best method?

[Whitfield]

Hi folks. I'm a CSS-but-not-scripting-savvy front end dev/designer trying to establish GSAP as the animation engine for a major client site where we need to drop basic animation tasks into page elements using simple class names. I've been able (with GSAP staff support) to get a good foundation going for this and am working on the biggest hurdle: creating an  animation wherein a container "reveals" its contents as it goes from 0% width (or height) to 100%.

 

I have a working version of this at the codepen above (which is based on the below conversation). Essentially, there are two concentric containers, both of them set to overflow: hidden, and they animate in opposite directions. It works well, but I'm wondering if there might be an even better/simpler method. What I'm not liking about this setup is that it requires two containers — the "subject" element (that has the real content) as well as the "shell" element that slides in the opposite direction.

 

Is there any way I could do this with a single class added to the "subject" container? Remember that the contents of that element could be anything, the point is that the container doesn't care what it contains, it's just revealing its contents. As I type this, I'm realizing that the container itself can't do the animating, since it necessarily affects the layout/placement of its contents, but maybe it's possible with a masking method, maybe with clip: rect? 

 

 

 

See the Pen VwPGOoZ by whitfield_g (@whitfield_g) on CodePen

[Shaun Gorneau]

Hi @Whitfield,

 

You certainly can do it with a clip-mask ...

 

See the Pen GRrXVZx?editors=0110 by sgorneau (@sgorneau) on CodePen

 

But, I like the control that is afforded by animating a parent container within a wrapper, especially when it comes to tweening other properties at the same time. What's the reason you are hoping to move away from a wrapper? Is it the extra markup? If that's the case, you can have Javascript create the wrapper, that way your markup stays lean/focused.

[Whitfield]

This response is awesome.  In a simple manner, you seem to have laid out the best options available to my situation:

• Stick with what I have (and yes, the extra markup is what I'm trying to avoid)
• Modify what I have with an automatic JS-generated outer shell
• Use clip-path for the mask, which is really elegant but of slightly sketchy adoption

There are pros & cons to all three, but they're all reasonable possibilities. I feel confident that one of these will be the option that we run with, I'll confer with my team to decide the best pathway. Thanks a lot, Shaun!

[Shaun Gorneau]

Happy to help, @Whitfield!