ScrollTrigger toggleActions not working

[hkutcher]

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.

See the Pen PoGGKVV by hkutcherb (@hkutcherb) on CodePen

[akapowl]

 

Hey @hkutcher - welcome to the forums.

 

Unfortunaltely that demo you posted, does not work for me.

 

But I think, the issue you have might be related to the fact, that toggleActions simply just does not work together with scrubbing.

 

If you only want your animation to be scrubbing in one direction, but not back, you could take a look at this thread, that discusses, how to get there.

 

 

 

If this is not exactly what you were looking for, please try to update that demo you posted, so it's easier to understand what you're after.

 

Hope this helps, though  

 

Paul

 

 

Also, maybe these threads will come in handy for you:

 

 

 

 

[hkutcher]

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

[hkutcher]

I have it playing only once, but now pinning is broken. 

 

See the Pen bGwwjgR by hkutcherb (@hkutcherb) on CodePen

[ZachSaucier]

Hey hkutcher. Please use the "Fork" button on CodePen when creating new versions of your pens to share here. That way the context is not lost when other people look at these forums.

 

19 minutes ago, hkutcher said:

now pinning is broken

That's because none of your ScrollTriggers have pinning added to them currently  It won't pin if you don't tell it to.

[hkutcher]

@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?

 

See the Pen qBaaMBZ by hkutcherb (@hkutcherb) on CodePen

[ZachSaucier]

A few things:

• It would help if you stripped out all of the irrelevant portions of your code including but not limited to your intro animation. In fact, it's often best to recreate issues that you're having from the ground up using just some colored boxes. This will often help you figure out the solution yourself.
• I am not really understanding what your end goal is, but it might make sense to use two ScrollTriggers: one for pinning and one for the animation.
• There's no point in creating an empty timeline just to put a ScrollTrigger in it. Use the .create() method instead.
• We recommend using the condensed string form for eases. See the most common GSAP mistakes for more info.

If you have a specific question about GSAP please ask and we'll do our best to help.

[hkutcher]

@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.

  See the Pen bGwwjgR by hkutcherb (@hkutcherb) on CodePen

So I can have pin + scrub or scrub + play once, but not pin + scrub + play once, which is what I want.

[ZachSaucier]

14 hours ago, hkutcher said:

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.

To figure out what the issue is you need to focus on the issue. So removing irrelevant complexity is a vital part of what needs to happen. And unfortunately doing so is outside of the scope of what we're able to do for free here in these forums. If you'd like someone else to help remove that complexity for you please look into hiring someone for that job. 

 

At its core, what you're trying to do is trivial with ScrollTrigger:

See the Pen PoGbogK by GreenSock (@GreenSock) on CodePen

[hkutcher]

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.

 

See the Pen KKgWzWj by hkutcherb (@hkutcherb) on CodePen

[ZachSaucier]

Killing it off like I suggested in my last post is a great way to do that.

[hkutcher]

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. 

See the Pen KKgWzWj by hkutcherb (@hkutcherb) on CodePen

[ZachSaucier]

First off, you're making one of the most common ScrollTrigger mistakes: putting ScrollTriggers on tweens inside of timelines. Doing so doesn't make much sense as explained in the linked article.

 

As for your question, if you open up your console you can see that your console.log() for the company animation never fires meaning your ScrollTrigger is also never killed. This is because you attempt to destructure the arguments but progressCompany doesn't exist in the arguments being passed in. It should be progress (like what you have in your partners listener) instead.

 

Additionally you should write this code in a more DRY (Don't Repeat Yourself) way. Your code for these two sections is pretty much identical besides the selectors so it'd make sense to use loops instead. More about that in my article about animating efficiently. 

[hkutcher]

@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?

 

See the Pen abmWXLv by hkutcherb (@hkutcherb) on CodePen

[ZachSaucier]

You're still making the most common ScrollTrigger mistake that I mentioned in my last post. You need to fix that. 

[hkutcher]

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 --

See the Pen abmWXLv by hkutcherb (@hkutcherb) on CodePen

v1.1 -- intros do NOT pin, but play only once. I adjusted the timing, so something will animate before you blow past it. --

See the Pen BaLRgXN by hkutcherb (@hkutcherb) on CodePen

v1.2 -- intros pin, but rewind on scroll up -- 

See the Pen PoGmMww by hkutcherb (@hkutcherb) on CodePen

[hkutcher]

@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?

[ZachSaucier]

11 minutes ago, hkutcher said:

I'm using standalone tweens creating via loops, aren't I?

No, you're not:

var tl_intros = gsap.timeline();
tl_intros.to(intro.querySelectorAll("img"), { // Nested tween in timeline
  scrollTrigger: { // ScrollTrigger on tween in timeline - this is the common mistake
    ...
  },
  ...
});

However your st_kill function will still not find the ScrollTrigger with the ID that you're looking for because you set once: true on the ScrollTrigger. If you want more control over killing it, don't set that property.

See the Pen Exgmqdr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In situations like this it would likely help if you created a more minimal demo of the sort of thing you're trying to do. That way you can focus on the issue at hand instead of trying to juggle everything else that's going on in your project. 

[hkutcher]

@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. 

 

See the Pen JjRNgMz by hkutcherb (@hkutcherb) on CodePen

[ZachSaucier]

Yep, that's why you need to kill off the ScrollTrigger inside of your st_kill function like I showed in the demo that I provided.

[hkutcher]

@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?

[akapowl]

 

Hey @hkutcher

 

After all those times, Zach hinted you to making a mistake, when creating scrollTriggers inside of single tween inside of timelines, you are still doing it. Every single tween of your tl_intros has a scrollTrigger applied with a pin, even with different starts.

 

That just won't work.

 

In the following demo I completely got rid off your kill-function.

 

Instead, what is done there, is the following inside the onLeave-Callback of the ScrollTrigger for your tl_intros ( which is now correctly set to the timeline itself - and removed from every single tween):

 

        onLeave: (self) => {
          self.kill()
          gsap.set(intro.querySelectorAll("img"), { scale: 1.3, opacity: 0.25 })
          gsap.set(intro.querySelectorAll("hgroup"), { opacity: 1, y: 0 })
          ScrollTrigger.refresh();
        }

 

I first tried self.kill(false) which would keep the animations at their animated state, but that did not remove the pinSpacer, so instead I just call self.kill() and then manually set the things to be at their animated state again. Also, since the removing of the pinSpacer causes your setup to shift, I call a .refresh(), so ScrollTrigger gets the correct posititons of things again after killing.

 

Seems to work as intended. Does that help? 

 

See the Pen a6ffcb3199e4ca9234d1167db0a8fb5a by akapowl (@akapowl) on CodePen

 

 

Edit on a sidenote: 

I chose the approach with the onLeave-callback, because the scrub: 1 you have applied is sort of a hindering element to what you want to achieve. If you were to kill the ScrollTrigger in the onComplete-callback of that last tween, as you wanted to, I found that it would fire very inconsistently when scrolling very fast (e.g. when grabbing the scrollbar and moving it down quick) and also create weird jumps because of the page-shifting when the pinSpacers get removed. Same goes for an approach with the onScrubComplete-callback where also comes into play that it would fire when e.g. scrolling half into the pinned animation and then back up again, completing the scrub into the other direction. 

 

With the onLeave-approach, you will notice that if you scroll fast, the ScrollTrigger will be killed before the scrub is completed sometimes and thus the .set makes the elements jump into their animated state. 

 

But because of that scrub: 1, all those problems mentioned here are probably to be expected, so that is just a workaround, that I found to be working the best of all those versions. I personally couldn't tell you what to do differently, except maybe just set the scrub to true - then you'd of course also miss out on that nice smooth effect when scrolling.

 

Anyways, hope this helps nonetheless.

 

Cheers

Paul

 

 

[hkutcher]

@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.

[akapowl]

32 minutes ago, hkutcher said:

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

 

Yeah, I missed that point.

 

For that pre-pinning animation you could just take that tween out of the timeline and set up a seperate tween/timeline with a ScrollTrigger and start at 'top bottom' without pinning - that should do the trick.

 

Edit:

 

@hkutcher

 

Since you seemed to have problems with killing-off ScrollTriggers by ID, I updated the codepen posted in my answer above to include that seperation of triggers, and killing-off the image-scaling-scrollTrigger by ID alongside the self.kill of the other ScrollTrigger.

 

I would have made a seperate pen, but I when I realized that I forgot to fork the old one, It was too late to revert it back.

Have a look, if you like.

 

[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. 

See the Pen BaLRgXN by hkutcherb (@hkutcherb) on CodePen

 

 

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. 

See the Pen PoGmMww by hkutcherb (@hkutcherb) on CodePen

 

 

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. 

See the Pen JjRNgMz by hkutcherb (@hkutcherb) on CodePen

 

 

v1.4 "the one"

Jumps on iOS, pins, plays once. 

See the Pen abmwLRv by hkutcherb (@hkutcherb) on CodePen

 

 

Has anyone else experienced pinning issues on iOS?