ScrollTrigger 3.12.2 throwing error

[josephjcox]

I just bought the Shockingly package and did a simple CDN install. My animations were working fine in the sandbox version, but when I switched over I got the below. I worked out that if I reverted to the 3.5.1 CDN version of ScrollTrigger (instead of 3.12.2) the error went away. Of course, using two different versions of modules can't be a good thing... 

 

 

The actual code I was running was - but every time I called gsap to or fromto it choked.

 

  gsap.fromTo(".flag_paths",

      { drawSVG: "0%" }, {

      scrollTrigger: {

        trigger: "#part1",

        start: "10% 80%",

        end: "40% 90%",

        endTrigger: "#part1",

        containerAnimation: flagfix,

        scrub: 1,

        markers: false,

      },

      drawSVG: "100%"

 

      });

 

[GreenSock]

Sorry to hear about the trouble, @josephjcox. It's super difficult for us to troubleshoot by just looking at screenshots and an excerpt of the code - can you provide a minimal demo that clearly illustrates the issue? Like a CodePen or Stackblitz? 

 

Based on the error message, it kinda seems like whatever you're feeding in as "flagfix" might not be a valid GSAP animation (tween or timeline). Once we see it in context, I'm sure we'll be able to figure out more of what's going on. You might want to console.log(flagfix) and see what it is.

 

Thanks for being a Club GreenSock member! 💚🥳

[josephjcox]

I tried to recreate on CodePen. It seems to run with the new ScrollTrigger library. On my system, everything else is at 3.12.2.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/MotionPathPlugin.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/EasePack.min.js"></script>

 

<!--

DrawSVGPlugin.min.js, ScrollSmoother.min.js, MorphSVGPlugin.min.js, and SplitText.min.js are Club GreenSock perks which are not available on a CDN. Download them from your GreenSock account and include them locally like this:

-->

<script src="/gsap/minified/DrawSVGPlugin.min.js"></script>

<script src="/gsap//minified/ScrollSmoother.min.js"></script>

<script src="/gsap//minified/MorphSVGPlugin.min.js"></script>

<script src="/gsap//minified/SplitText.min.js"></script>

 

But if I change scroll trigger to that version, it just dies on the very first call that involves ScrollTrigger and containerAnimation. The containerAnimation works perfectly, so long as I'm using ScrollTrigger 3.5.1.

 

I ran the console. It 3.5.1 it reports:

 

with 3.12.2 it reports:

 

Happy State:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

    integrity="sha512-wK2NuxEyN/6s53M8G7c6cRUXvkeV8Uh5duYS06pAdLq4ukc72errSIyyGQGYtzWEzvVGzGSWg8l79e0VkTJYPw=="

    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

Crash and Burn State:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

[josephjcox]

Actually just tried again on CodePen. With the 3.12.2 resource loaded it doesn't throw and error, but nothing runs. The below is the codepen with the 3.5.1 resource loaded. I don't know if you can change the resource and see the result.

 

See the Pen qBLmoKq by Joseph-Cox (@Joseph-Cox) on CodePen

[Rodrigo]

Hi,

 

In your script tags you have an extra slash:

<script src="/gsap//minified/ScrollSmoother.min.js"></script>
<script src="/gsap//minified/MorphSVGPlugin.min.js"></script>
<script src="/gsap//minified/SplitText.min.js"></script>

But the main reason is this:

var israelflagfix = ScrollTrigger.create({
  trigger: "#part1",
  start: "top top",
  end: "bottom +=50%",
  endTrigger: "#part1",
  pin: "#israelflag",
  // pinspacing: false,
  markers: false
});
console.log(israelflagfix);
gsap.fromTo(
  ".israelflag_paths",
  { drawSVG: "0%" },
  {
    scrollTrigger: {
      trigger: "#part1",
      start: "10% 80%",
      end: "40% 90%",
      endTrigger: "#part1",
      containerAnimation: israelflagfix, // HERE
      scrub: 1,
      markers: false
    },
    drawSVG: "100%"
  }
);

A Container Animation must be a GSAP Tween or Timeline instance. Right now you're passing a ScrollTrigger instance in almost every other ScrollTrigger you are creating. As soon as you comment that out the error is gone. In order to learn what Container Animation is and how it works please check this Blog Post:
https://greensock.com/3-8#containerAnimation

 

Also from the ScrollTrigger docs:

containerAnimation

Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

 

Is states there that the type has to be a Tween|Timeline, not a ScrollTrigger instance.

 

Finally the reason you weren't seeing the error in the older version is because Container Animation was not introduced yet, so ScrollTrigger was just ignoring that configuration option.

 

Hopefully this clear things up.

Happy Tweening!

[josephjcox]

Okay. I thought it was responsible for my pinning actually being held, but now that I remove it I see that it wasn't.

 

Thanks.

[GreenSock]

3 hours ago, josephjcox said:

Okay. I thought it was responsible for my pinning actually being held, but now that I remove it I see that it wasn't.

Yes, just to reiterate, it had nothing to do with a problem with ScrollTrigger or a bug in 3.12.2. It was simply that you made a mistake in what you were defining as your containerAnimation (you had the wrong type of object). Since version 3.5.1 never even recognized that property at all because it didn't exist back then in that version, it was simply ignored. But in 3.12.2, it was trying to work with that containerAnimation you passed in...but that wasn't a valid container animation, thus it threw that error. 

 

Does that clear things up? 

[josephjcox]

Yes, I get it. I've been kinda hacking away at this and thought the parent - rather than the presence of the parallel scrolltimer, was responsible for the pinning working. Now I see I was just leaning on phantoms. Thank you for your prompt support!