acg

Helpful, but I don't think the main focus of my question has question has been addressed: Do the start/end functions include any parameters? For example, suppose I want to do something different based on the id of element involved. Ideally, something like: start: (st) => "top " + $("#"+st.vars.id).height() + "px" Thanks again. I really appreciate your help.

Jack, thanks for the detailed background. But do you have any additional info on the parameters if "start" is used as a callback? The issue I'm trying to solve is something like a "sticky header bar" whose size dynamically changes based on the width of the browser because of "word wrap". At larger widths, the header height is small. At narrower widths, text wraps, and the header is larger. So, if we want to trigger when an element goes under the sticky header (which *visually* appears like a "leave" even though it obviously doesn't leave the viewport), we need to dynamically adjust the "end".

I'm trying to find a way to trigger something based on an element which is "dynamically" located/sized. So, I can't simply set the "start" parameter to a more traditional "top top" or even "top top+=100" because the "100" value may change. So, I believe the best option would be to set the "start" property to a function where I could dynamically calculate that number. However, the GSAP docs are a bit unclear with this feature (or perhaps I'm just missing it). If I set "start" to a function, are there any parameters? Ideally it would be the ScrollTrigger object (or a way of determining it) so the function could return values based on other options configured in the ScrollTrigger (like the "id"). Or am I missing some other strategy that would better? Any help would be appreciated!

When the onStart callback is called I understand the onStartParams array is passed as the params. I have some old code that uses "{self}", but nowadays, I'm not sure that works the same. Can anyone confirm that "{self}" is still a thing? I couldn't find references to it in the docs. What I am mainly trying to understand is what is the best known method to get a reference to the Tween itself from the onStart callback? Thanks!

My goal is to have a web page that contains a pinned lottie animation driven by ScrollTrigger. Using some of the Greensock docs I have the lottie animation working as expected. But unlike other samples that I have seen, I would like the animation to have DIVs with traditional HTML content above and below this "lottie DIV". However, after initializing ScrollTrigger, the lottie DIV is wrapped by a ".pin-spacer" DIV that is sized according to the "end" property of the ScrollTrigger options. And that pushes the traditional content DIV below the animation much further down the page, creating "white space" between the lottie DIV and the content DIV below. What I am hoping for is something where there is no space between the DIVs. Rather, the scrollbar just animates the lottie from beginning to end and then the rest of the page continues to scroll content as normal after the animation completes. Many of the ScrollTrigger/animation samples seem to use a DIV which is 100vh so you never see what is "below the animation" (because it is "off screen"). So, it doesn't matter if there is "white space" below the animation leading up until the next content DIV. In my case, the animation is not going to be the full height of the viewport. So, the space created by ".pin-spacer" is not the look I'm going for. Hopefully I have made clear what I'm trying to achieve. Is there a well known strategy or good sample to do this? Thanks!

Can you actually confirm that this has been addressed in some way by the beta? As you noted, you changed the code slightly. In your CodePen, the second call to "gsap.fromTo()" is using "#panel2" as the trigger instead of "#box2". When I change it back to "#box2", I believe it is behaving the same. FWIW, I'm not convinced that "onEnter" is appropriate to be fired when the animation doesn't trigger. Another way to think of it. When the DIV is hidden, why should the "start" trigger be "at the top". Why not the bottom?

I'm working on something that is trying to use ScrollTrigger on what is effectively a "tabbed" interface. Each "tab" is a DIV that is shown/hidden according to some tab "buttons". However, I'm finding some challenges with the way ScrollTrigger triggers items within hidden DIVs. It seems as though ScrollTrigger fires the "onEnter" event (which I doesn't seem right) but then also doesn't trigger the actual GSAP animation (which seems weirdly inconsistent). Notice in the included Pen that on startup, the DIV containing the second animation is "hidden". You can see that the start marker is up at the top of the screen. I don't know why it should necessarily be considered "started" since it isn't visible and therefore isn't really "above" or "below" the "start" point. If it is considered "above" the start point, it might make sense to trigger "onEnter", but then it doesn't actually run the animation (which seems weird). Notice that the console logs the "onEnter" event right at the start. Also notice that the timer which shows the hidden DIV after 3 seconds reveals that the blue block hasn't actually animated (note this example may only show the behavior if your browser leaves about 1/4 vertical screen space for the CodePen content area). So, my questions are: What strategy is best to make ScrollTrigger ignore the hidden elements? And does it make sense to trigger "onEnter" but then not execute the GSAP animation itself?

Hey @mikel, Thanks for your post. Yes, I recognize that ".mybox" was above the start trigger and would execute immediately. That was actually kind of the point and helped show off the problem. If you do something like I had done, the animate *should* happen immediately, but what you see on screen isn't "perfect". In a perfect world, you would see the blue box appear at x=0 and then animate to x=1600 over 0.4 seconds. But instead, the first appearance of the blue box is not at x=0 but rather at some larger "x" value that varies (generally it looks to be between roughly x=100 and x=400 or so). In other words the very first time you actually *see* the blue box, it is already part way through the animation. And what I want is to make sure a user sees *ALL* of the animation from the very first frame to the last. The problem seems to get worse the more gsap animation you include. I've got a page that has 20+ animations and when they all try to start simultaneously, I generally don't see the very beginning of the animations. Rather, the animations shows the final, maybe, 50% of the animation. If I change the 20 animations by inserting say a half second of "pause", then the user DOES see the complete animation. Presumably this is because the gsap engine is "jumping past the first half second pause" and then showing the animation. This isn't a great solution because I have no idea if a half second would work across all browsers/devices. A delay value of a half second worked for me on my system to allow the entire animation be consistently shown from x=0 to x=1600. And since I'm re-using the animation, this creates a bit of a problem because I don't want that pause there on future invocations of the animation. So, I would have to resort to something where I use a "startup phase" animation that includes an extra half second pause, and then replace that animation with one with no pause whenever the animation gets triggered in the future. That is just kind of messy and I was hoping there was some other universal "wait until everything is settled down" kind of event to know when I could tell all the animations to "go" and they would show their entire animation. Does that make sense? I'm concerned I haven't clearly communicated the problem.

Hey Zach. Thanks for the response. I actually tried waiting. And by waiting I mean that in the document "onready", I waited for 3 seconds (using "setTimeout") which then does all the animation setup. It doesn't seem to have made much difference in my real world code. I updated the CodePen to include a delay and also some additional tweaks that make it a little closer to my real world code. Elements start as "hidden" and then I use the "onStart" callback to make the element visible when the animation starts. If you look carefully at the CodePen, you just never see the rectangle at the "0" position. In my real world example, I'm actually doing lots of other effects like "growing, shrinking, fading, etc." I also may have 20 animations on the page at the start. I'm just finding that any animation that is there at the start simply doesn't look as smooth because those initial frames appear to be skipped. Maybe this has more to do with the GSAP animation itself rather than ScrollTigger. The real world app has way too much code to share here. I was hoping that the CodePen adequately shows off a problem that you and others would recognize and have a best known solution.

I'm hoping someone has some experience related to making animations play smoothly on "startup". I have a web app using ScrollTrigger and the animations that are triggered when I scroll the page work perfectly. However, the animations that exist on the page initially often appear "completed" or I only see the final few frames of the animation. I tried to show this behavior with the associated CodePen. Run the CodePen several times and pay attention to the moment you first see the blue rectangle. It is supposed to animate from the left side of the browser to the right. But generally, I only see "half the animation". The first instant that I visually see the blue rectangle it is already halfway through the animation. Now, I have occasionally seen it behave where the blue rectangle first appears on the very left side of the browser and then animates to the right as expected. But, it doesn't happen very often. I know there is a lot of stuff going on underneath the hood (requestAnimationFrame, etc.). But I am hoping there is some technique or strategy that will allow the GSAP animations to play as smoothly on startup as they play elsewhere.

Thank you for the tip on avoiding CSS transforms. I was not aware of the big difference and have converted my code over to the preferred way. Yesterday I had also thought of the "container" concept as well, so I added that concept to my code. It is a bit more complicated than it first appears. Since I'm creating a general library, you have to check whether you've already created the container (in case content is changed or added dynamically and you need to "refresh"). And you also probably have to use "inline-block" since the content may not be a block level element that is being animated (but inline-blocks have their own weird padding side-effects). And you have to pay attention to the "position" of the element since you probably don't want to add a container to "absolute" positioned elements. Thanks for confirming that adding a container element is likely the best strategy.

Here is a simple pen which generally shows the issue. On startup/refresh, notice the "start marker" is at the Y location of the translated box. When you scroll, the box will animate to the desired final position. After the box animates, if you adjust the browser size (to force ScrollTrigger to update), the "start marker" will actually change to the final position. So, it is clear that the "start" marker is set to the transformed position of the target. https://codepen.io/acgresearch/pen/MWewaPg So, what would be a good strategy to accomplish my goal of creating this "slide" effect where the item moves vertically, yet is triggered by the *final* position of the element? Thanks again for any advice.

I'm confused about how the "start" (or "end")) property defines the exact position when CSS "transforms" are applied to the target. Specifically, I have an element that has a transformY applied and I'm using " start:'top 75%' " in my ScrollTrigger options. But when I show the debug markers, the "start" marker shows up somewhere in between the "transformed" Y position and the "untransformed" Y position. What I'm specifically trying to do is create a "slide on from above" effect for an element similar to what you would get using the WOW or AOS JS libraries. The element is initially positioned "above" the final position by way of CSS translateY and I use GSAP to animate translateY from some offset value to 0. I want to trigger this slide animation when the untransformed position comes into view. But, for some reason ScrollTrigger shows the "start" marker at some position between the transformed (start) position and the untransformed (final) position. So, what strategy can I use to set the "start" marker to be relative to the final, untransformed position? FWIW, if my effect is a "horizontal" slide (where I'm animating translateX instead), things work perfectly. The "start" marker is shown at the top of the element. So, this issue has something to do with ScrollTrigger and elements transformed with translateY. Thanks for any help or advice!

Solved! In my code I was actually "adding a Tween to a Timeline" and the ScrollTrigger was actually configured for the Timeline. So, naturally the Tween object wouldn't have a ".scrollTrigger" property. The Timeline object does have the ".scrollTrigger" property exactly as you documented in your reply. Thank you so much helping me understand!

Hmm. After I create the Tween (which happens to be using .fromTo() ), the resulting Tween doesn't seem to have any ".scrollTrigger" property. I confirmed your example and I see what you are talking about. But I can't yet explain why I'm not seeing the same behavior. My specific example is pretty complicated so I'm going to have to try to strip it down to see if I can simplify it and/or note any differences.