I’m basically trying to make a proof of concept for something. I’m trying to make “.scroll-section.two.enlarge-box” grow to 50% width when the left edge of .scroll-section.two hits the center of the viewport (scrolling horizontally) and end when .scroll-section.three hits the rightmost edge of the viewport. Or it could be when .scroll-section.two hits the leftmost edge of the viewport (same thing, really). Ultimately, nothing I’m trying out seems to work.
I’m having some trouble getting this to work . Can anybody help me out?
Sorry I don’t know anything about gsap Ryan so can’t help. I couldn’t really work out what was supposed to be happening anyway.
It looks as though you are setting .enlarge-box to 50% immediately before anything happens. However I don 't see how you would know what its width was visually because its hidden outside the viewport so you only see it when it scrolls. Therefore it does seem to grow to 50% as you scroll although thats what it started out at.
I’m sure you know already but you can do the sideways scroll bit for modern browsers with css now and no js.
Thanks Paul, you’ll have to trust me that I’m purposefully using Javascript here because this is part of a much larger endeavor
I want it to be 0% width initially, enlarging up to 50% width, but as you’ve noticed, it’s setting the width to 50% and I’m not sure why. It should be 0% width, and as you scroll through the panel, it enlarges and finishes at 50% width at the end of the animation. Incremental growth.
I just looked again and I can see in devtools that the width of that element is in fact now being dynamically increased from 0% to 50% (and vice versa) in line with what you were looking for. (I assume you have tweaked the demo since I last looked)
The point I was making is that your dynamic width actually makes no difference at all to the layout because the blue box is hidden off to the side to start with. It could be 10,000px or 0px an would make no difference to what you see. As you scroll the width of the blue box just matches the visible area which means it could have been 50% to start with as far as the viewer is concerned. Unless you had actual content inside of the blue box and then in your 0% version you would see all the content spill out until the box reached its 50% width.
Yes Paul, I’m actively working on the demo. If you look now, it’s very close to being exactly what I want, except the start point of the animation seems to be incorrect. It’s supposed to start when the left edge of the .scroll-section.two hits the left browser edge, but it starts before that. The end point seems to be perfect. I’m trying to fix that, but am struggling. Hopefully I’ll get it soon.
In my real example, if I can get this working, it will be a video that enlarges. This is a very rough proof of concept to prove that I can do this incremental growth inside of a horizontal scroll. There won’t be actual content - just a video that’s cropped to fit the available space.
I don’t really care about where the blue box is, nor the final width of the blue box. I could have the blue box on the right edge of the parent div or on the leftside of the parent div. I could have the blue box only animate from 100px width and end at 50% width - it doesn’t matter.
I am merely trying to see if I can properly dictate when an animation can run on the blue box, and if I can properly dictate when the animation finishes on the blue box. I don’t really care about it being centered or whatnot, just that I can accurately dicatate when a specific animation starts/end.
I asked over in the gsap forum and they let me know about the containerAnimation feature in scrolltrigger which was made for this very purpose. With that, I was able to rework my proof of concept. This is enough to show that it’s possible & I can create what I need with it.
. Can anybody help me out?