Struggling to get ScrollTrigger to work in my build

[NickWoodward]

Hello again!

Having gone back and learnt css animations more thoroughly I decided to use GSAP anyway 😄

I'm just having a problem getting ScrollTrigger to work in my build - it works fine in the codepen above and in a simple html/css/js file using the recommended CDN, but not in my current project using imports

Here's the code:
 

import { elements } from './base';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export const animateHeader = () => {
    gsap.to(elements.header, { 
        duration: 1, 
        backgroundColor: "red",
        scrollTrigger: {
          trigger: elements.header,
          start: 1,
          end: 9999,
          toggleActions: "play none none reverse"
        },
        onUpdate: function() {
            console.log('hello');
        }
    });
}

If I remove the `scrollTrigger` block the animation works and the callback fires. With the scrollTrigger block present it alters the header element, but only by adding the current color as an inline style, and the callback isn't fired.

Have I missed something obvious? I'm using webpack, and have tried with and without web-dev-server and it doesn't seem to make any difference. I'm increasingly thinking that it isn't the problem. ScrollTrigger  is appearing in the final bundle, so I assume that means there's no tree-shaking taking place.

I'm just a bit stumped! 😕

Nick

See the Pen dyGwWpK?editors=0101 by nwoodward (@nwoodward) on CodePen

[ZachSaucier]

16 minutes ago, NickWoodward said:

Having gone back and learnt css animations more thoroughly I decided to use GSAP anyway 😄

A very reasonable decision  

 

17 minutes ago, NickWoodward said:

If I remove the `scrollTrigger` block the animation works and the callback fires. With the scrollTrigger block present it alters the header element, but only by adding the current color as an inline style, and the callback isn't fired.

ScrollTrigger has its own onUpdate callback that you should use  

gsap.to('.header', { 
  duration: 1, 
  backgroundColor: "red",
  scrollTrigger: {
    trigger: '.header',
    start: 1,
    end: 9999,
    toggleActions: "play none none reverse",
    onUpdate: function() {
      console.log('hello');
    }
  }
});

 

[NickWoodward]

13 minutes ago, ZachSaucier said:

ScrollTrigger has its own onUpdate callback that you should use

Noted! 😊

Moving onUpdate still isn't calling the function or changing the element properties unfortunately 🤷‍♂️

If I comment out the whole scrollTrigger block it inserts `background-color: red` inline (ie the animation works).
If I uncomment it and the element has no background-color defined in the css, it adds `background-color: rgba(0,0,0,0)` inline and onUpdate doesn't fire

If the element previously has a background-color in the css it adds that color inline, and again onUpdate doesn't fire
 

[ZachSaucier]

Please recreate the demo using CodePen, CodeSandbox, or StackBlitz.

[NickWoodward]

I've so far not been able to, other than webpack and the use of imports the code is identical to the OP codepen. Wasn't entirely sure how to emulate that in an online code sandbox, but I'll look into it. 

I'm also trying to make a cut down example on my local machine, hopefully that will help me narrow the problem down.

[NickWoodward]

Well that took a while 😄

I pretty much re-learnt webpack & webpack-dev-server, convinced they were the problem. Then ripped down my project bit by bit and rebuilt it. 

It was only when I omitted the styling that I realised... I scroll a custom parallax div, not the window. I'm an idiot.

 

gsap.to('.header', { 
  duration: 1, 
  backgroundColor: "red",
  scrollTrigger: {
    scroller: '.scrollWrapper',
    trigger: '.header',
    start: 1,
    end: 9999,
    toggleActions: "play none none reverse",
    onUpdate: function() {
      console.log('hello');
    }
  }
});

... sometimes I hate coding 😄


**edit - still getting odd behaviour, but I'm really not digging into it given my parallax solution. Took me long enough to get it working reliably across chrome and FF. Another use for scrollTrigger!