xoxoxoxo

I'm sorry, what do you mean? Do you mean to append offsetHeight of the div inside the end function? I'm confused.

Your suggestion worked. However, when my scroll reaches to the white div it just scrolls super fast. How can I take the height of the div in consideration? given that it can be more than 100vh, depends on the content. Forked: https://codepen.io/nullhoooook/pen/abZzxqq?editors=1010

@ZachSaucier I've created the issue I was having here: https://codepen.io/nullhoooook/pen/XWKJRbP?editors=1000 Look at the last image panel which has a gif and then look at the div that follows, you can see it's laggy and it takes time to "catch up" with the last panel. If you still can't see it I can attach you a video. It's even worse on Safari.

I can't pin it because I want the div to scroll normally following the last panel. If you look at my initial codepen you can see how this works. Is there no way to achieve this without explicitly positioning the div as per my initial example?

Basically i'm trying to have a div which would follow the last panel (purple) as the normal flow. If I don't add an explicit position then the div sits on top as my container is position absolute. Also this div can be of any height. If I don't explicitly position it then this is how it would look: https://codepen.io/nullhoooook/pen/jOrEbVJ?editors=0010

I have a div that I would like to push below the last panel. I'm getting Scrolltrigger's end value and adding that to margin top value. However, on Safari and Chrome I get a "gap" on scroll between the last panel and the div that's pushed to the bottom. It almost feels like the last div isn't "catching" up to the panel that's being transformed. Not sure how to solve this.

I should've known! Thanks!

I'm animating a div in a timeline, however i'd like to perform some action in the middle of it. I tried `onComplete` but looks like that only works when timeline ends. Ideally, I'd like to add perfromAction on the second timeline when the div's x value reaches to 100% tl .to(div, 1, { x: 0 }) .to(div, 1, { x: '100%' }) .to(title, 1, { height: 0, opacity: 0, y: -50 }, '<=0.5');

Adding a refreshPriority solved the odd behavior! My ScrollTriggers are in order though so wondering why I need this?

Great explanation! I'm having issues on this on my codebase. I've done some debugging myself and happen to found out these: 1. The start of the first ScrollTrigger of logo starts with the end of the window.innerHeight — For ex, If my window height is 947px the start is 940 and end is 940+logoHeight. This seems weird, no? 2. If set pin: true on logo ScrollTrigger the top and end are correct but the animation doesn't work as expected and original pinning of the container is all screwed. Also, the top now starts with 0.001 and not exactly 0 (this is if I set pin: true). What's with the odd .001 value? 3. If I change the first ScrollTrigger's (the container one) end to "+=400%" or any number, the top and end of logo ScrollTrigger also has a side effect on this — For ex, if my window height is 947px the start is 3788.001 4. I tried setting the start string manual like this: start: () => 'top -0' and still my logo's ScrollTrigger start value is 947 and end is 940+logoHeight Edit: Seems like the second ScrollTrigger picks up the start value of the first ScrollTrigger. If my first ScrollTrigger ends at 947px then my second one `top -0` basically is 947px instead of 0. What's going on? Any help on this would be highly appreciated.

This works, yea! A few questions I have: 1. Why do you need invalidateOnRefresh when ScrollTrigger automatically re-computes on resize? 2. I don't quite understand what the start function is doing. The index is useful in what way here? isn't index the position in the array and not visually. 3. Why do we need another timeline and scrolltrigger? Is it not possible to utilize the previous one?

Looks like the above solution is helpful if you're in the normal document flow My divs are out of the normal document flow and are being translated using timeline so it has to be integrated within the timeline somehow.

Loving gsap so far! I have an absolute position div which has nested svg. I'm trying to animate it's height to 0 simultaneously as I move the panel's Y position up. I had to play around with the duration of this because it needed to end earlier than the panel's Y position. It's not super accurate but you can see it jiggle a bit and if I change height or svgs I have to find the duration sweet spot. The duration seems off on diff screen sizes* Is there a way where I can make this accurate?

Ok so that worked. I don't get why #container doesn't need absolute positions but .panel does.

New pen below: Do you notice the `.content` div is rendered top of the `#container` div. My expectation would be it would render below the .container div. https://codepen.io/nullhoooook/pen/poyLKdP

Hi Zach, When I add elements as an ancestor to the pinned element it gets rendered at top and this make sense because the pinned div is basically a fixed div with computed height. However, I'd expect ancestor elements to be rendered in the normal document flow. How can I go back to normal document flow with ScrollTrigger? Do I have to grab the height of the pinned element and push it down manually? There must be a ScrollTrigger way of doing this. Test case: https://codepen.io/nullhoooook/pen/wvGyRqZ

Where do you go about filing a bug report with Chrome?

Thanks, this works!

I ran into similar issues with static generators and server side frameworks. A few tips: 1. If your start position isn't accurate after refreshes there might be a delay in rendering your full height of the div. Try adding a setTimeout and see if start positions are accurate after sometime. 2. Try adding a fixed height to the div where the start position is being calculated and this can ensure accurate calculations. 3. When you say "refresh" do you mean an actual refresh or hot reload? Hot reloading can be tricky. Not saying the above are solid solutions but just an approach to get to the problem. If you can re-create this problem with a codepen or sandbox that'd be super helpful.

Yep, I saw the demo the other day and created a test case below. I think I almost have it. However, if you notice, all image's div move up at the same time. https://codepen.io/nullhoooook/pen/wvGyRqZ EDIT: new pen link

Yep, I see the text flickr as well while scrolling.

I'm going to bump this as I ran into an issue if I'm doing subsequent divs that needs to be revealed along with keeping the original solution. Zach, your setup for pinning the div along with using css pseudo element works for one div only. How would I setup scroll triggers if I want to setup something like above: You can see every other div is already pinned in the back.

I have simplified your example and it works. https://codesandbox.io/s/new-glade-fetuz You need to pin the title div and turn off pinSpacing.

Are you trying to lock the text and image together on scroll?

Ok, so I got this working by adding a `ghost` div and changing the end trigger. https://codepen.io/taher-space/pen/vYGxVXz The markup seems a bit weird though. Doesn't feel linear. Any thoughts on how I can improve it overall? Essentially, `.content-on-bottom` should be able to group my `.layer` and `.cover` together along with the ghost div so it's all part of one div instead of isolating them.