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!

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?

It sure seems to, thanks! In fact, you appear to have solved for both of these issues — now the second copy of the circle/square elements in my test area is properly animating when it appears in the viewport, eliminating the problem that I raised in my last post. Thanks a bundle, Jack!

One thing I'll add here is that my structure is already DOA due to one of the concepts outlined in the 'mistakes' page that you linked to: "Using one ScrollTrigger or animation for multiple sections." That's exactly what I was setting myself up to do, but I understand why it won't work. I'm not yet sure how to set this page up the way I want (with the ability to apply classes that define animation "presets" and are initialized by ScrollTrigger), but that may obviate the above structure even if we're able to get ST to work there. ?

Hmm... the gsap.from() comment here surprises me — the initial one (with all of the 'anim-opac-on-' classes) is there to initially set those classes to opacity: 0, I assumed I would need to do that in order to fade them up to opacity: 1 (ScrollTrigger doesn't have anything to do with that, but it does apply to gsap.to() actions for those classes below). But yeah, the "loose tweens that run immediately" is what I'm trying to rope in with the top-most ScrollTrigger argument (based on your code snippet). Applying ST to a bunch of classes at once is the overall goal here.

Awesome, thanks! Yes, that does make sense, though it isn't actually working in my setup (finally got this CodePen to work): https://codepen.io/whitfield_g/pen/NWdYZzW

Hey Jack, thanks for the response! And thanks for that link, I already caught one mistake that I was about to make in my plan. Your code above is beyond my current understanding, but your description sounds possibly backwards from what I'm trying to do. I'm not trying to add multiple ST's to a single class, I'm trying to add ScrollTrigger: self to multiple classes en masse, instead of adding that to each class individually. It's not that the latter is any big deal, it just seems inelegant — as with CSS, it doesn't make sense to duplicate the same instruction between multiple classes, it's better to say that "all of these classes have X, Y and Z attributes, but only this class has A and this other class has B." Does that make more sense? Edit: The more I look at your code snippet, the more it does actually look like what I'm trying to do — it's applying ST to all of the classes listed in the top line, right? If so, what is 'el' in this context?

Hey folks, Brand-new GSAP user here, my creative studio decided last week to switch to it over CSS animation. The animation needs for our first client project are pretty simple, and we're using a single long-form page as our guinea pig. As such, we're using ScrollTrigger to activate almost all animations (i.e., stuff happens when elements appear in viewport). One thing that I'd like to do but have so far been unsuccessful at is assigning ScrollTrigger: self to multiple animation classes, instead of adding it to each individual class. So for example, I would like to be able to do something like this... gsap.from( ".anim-A, .anim-B", {scrollTrigger: self,}); gsap.to( ".anim-A", {duration: 2, opacity: 1}); gsap.to( ".anim-B", {duration: 1, opacity: 1}); ...but that just doesn't work — the ScrollTrigger behavior isn't applied to .anim-A or .anim-B. I've also tried creating a class called '.onscroll' that has ScrollTrigger: self applied and adding that to the HTML elements, but no dice. I feel like either A) the answer to this is simple and I just haven't found it, or B) that what I'm trying to do has to be executed with a more complex GSAP/ScrollTrigger setup?