hkutcher

Well, I thought we finally had "the one", but that golden version that pinned and played only once jumps in Safari on iOS (I tested in iPad). I think it's an unfixable browser bug, but will post one final Hail Mary attempt to see if it's fixable. Pinning on iOS seems to have issues. In summary: v1.1 Works on iOS, no pinning, but everything plays only once. v1.1 v1.2 Works on iOS, pins in both directions (scroll down and scroll up), everything (bg image scaling, fading, white text appearing) reverses on scroll up. v1.2 v1.3 Works on iOS, pins in both directions (scroll down and scroll up), bg image scales and fades to black on scroll down play only once, but white text appears/disappears on scroll up/down. v1.3 v1.4 "the one" Jumps on iOS, pins, plays once. v1.4 Has anyone else experienced pinning issues on iOS?

@akapowl THANK YOU. Does it help? YES, although your example isn't exactly what I was going for. Specifically, what I wanted to achieve was the background image scales as soon as the top of .section-intro is at the bottom of the screen, whereas, the image fades to black and the white words fade in and slide up when the top of the .section-intro is at the top of the screen. So TWO timelines: start: top bottom, end: bottom top -- bg image scales, does NOT pin start: top top, end: bottom top -- bg image fades to black, white text appears, pins These have different timings and were separate. In your example, the background image scaling doesn't happen until after the .section-intro is pinned. That said, I genuinely appreciate your detailed and explicit response. I think I can get it the last 10 feet now.

@ZachSaucier I can't kill it off that way, because it's not tied to a timeline. When I create multiple triggers, each with it's own timeline, that's hardly DRY as you recommend, plus I can't make multiple progress variables. Why isn't ScrollTrigger able to kill the trigger by id?

@ZachSaucier Commenting out once still does not kill the scroll trigger. I get no errors, but instead of that scroll trigger getting killed, it just runs backwards/reverses on scroll up. https://codepen.io/hkutcherb/pen/JjRNgMz

@ZachSaucier I'm using standalone tweens creating via loops, aren't I? Doesn't the article say, "It's best to apply a ScrollTrigger to either a standalone tween..." How is what I'm doing any different from what's shown in the 'Using one ScrollTrigger or animation for multiple "sections"' section? Being told, simply, "you're still making mistakes" is NOT helpful. Could you please comment about killing off a specific scroll trigger?

The ideal situation: you scroll down, the intros pin in place until the animation is done, then unpin (and become like static content). I can't make that happen. The 3 options I can achive: v1.0 -- they pin in place and play once, but you have ugly whitespace above (unacceptable), because I cannot kill off the scroll triggers -- https://codepen.io/hkutcherb/pen/abmWXLv v1.1 -- intros do NOT pin, but play only once. I adjusted the timing, so something will animate before you blow past it. -- https://codepen.io/hkutcherb/pen/BaLRgXN v1.2 -- intros pin, but rewind on scroll up -- https://codepen.io/hkutcherb/pen/PoGmMww

@ZachSaucier Thank you for your continued assistance. I have tried many different things over the past 3 days (.batch, progress from a trigger feeding a timeline, multiple timelines), but things either don't work (no animation) or break (throws errors). What I currently have is not ideal, but works with one exception: I cannot kill a specific scroll trigger. Here's what's happening: - All scroll triggers are created. - The scroll trigger that does the pinning (and should later be "un-pinned") is given an id, to reference it later. - onComplete fires when appropriate (after a `.section-intro` is done animating and offscreen) and will pass the correct param/id (which I can read in `console.log`) - but when I try to run `ScrollTrigger.getById(item).kill;`, it tells me "TypeError: ScrollTrigger.getById(...) is undefined" How can I kill off the correct scroll trigger after it completes on a page with multiple instances? https://codepen.io/hkutcherb/pen/abmWXLv

I killed the scroll triggers (all of them) upon completion of animation, yet there still seems to be a lag/stickiness when scrolling up. The pin-spacer containers are still there. https://codepen.io/hkutcherb/pen/KKgWzWj

Is there a way to set pin to false onComplete or onScrubComplete? I think I would have this complete if I could set st_company to pin: false after the animation completes. Until I'm able to do that, there's an undesirable "scrub pause" when scrolling back up on the animated div ("Every Home Has A Story"). I'd like to get rid of this lag. https://codepen.io/hkutcherb/pen/KKgWzWj

@ZachSaucier While I understand your suggestion for providing a simple example, what I'm trying to code is complex. Things are breaking BECAUSE of the complexity, so simplifying is going in the opposite direction. Here's the desired animation for this pen: Top of page animation plays once. Scrolling is disabled until it finishes. Once it ends, the user scrolls the page to... Section intro "Every Home Has A Story" animation plays as the user scrolls. It's pinned in place until the animation finishes. It should (but does not) play only once. Instead, it reverses on scroll up. The empty timeline was suggested by @akapowl above to get the animation to play only once. It appears I have two options: The animation is pinned in place and progresses as fast as you scroll (scrub), BUT rewinds when you scroll up. Option 1 The animation is NOT pinned in place and progresses as fast as you scroll (scrub), BUT plays only once. Option 2 So I can have pin + scrub or scrub + play once, but not pin + scrub + play once, which is what I want.

@ZachSaucier When I add pin: true, it places the div at the bottom of the page. Comment and uncomment lines 128, 129. See what happens? https://codepen.io/hkutcherb/pen/qBaaMBZ

I have it playing only once, but now pinning is broken. https://codepen.io/hkutcherb/pen/bGwwjgR

I'm not sure that will work since this timeline is triggered for every item in an array. But I will try it.

I have toggleActions set to "play none none none". That should make the animation play only once. What could be interfering with toggleActions? Here's the desired animation for this pen: Top of page animation plays once. Scrolling is disabled until it loads. Once it loads, the user scrolls the page to... Section intro "Every Home Has A Story" animation plays as the user scrolls. It's pinned in place until the animation finishes. It should (but does not) play only once.