Christopher DuCharme

Thanks for the heads up on the old syntax. Just fixed. I think I'm mostly there now. I have the banner fully running in the browser using imported modules. However I'm still getting an error with the test. I'm assuming error is related to the dom elements not being defined. To resolve this, would you make mock elements in the test or import the dom somehow? TypeError: Cannot read properties of undefined (reading 'querySelectorAll') at toArray (/Users/christopherducharme/Documents/project/node_modules/gsap/dist/gsap.js:640:175) at new Tween (/Users/christopherducharme/Documents/project/node_modules/gsap/dist/gsap.js:2962:130) at _createTweenType (/Users/christopherducharme/Documents/project/node_modules/gsap/dist/gsap.js:608:12) at Timeline.to (/Users/christopherducharme/Documents/project/node_modules/gsap/dist/gsap.js:1898:7)

Thanks for the reply @GreenSock The NDA we have with our clients prevents us from posting any actual code examples, but I just took the type to make a generic reproduction of the timeline and test. This is the timeline.js file: import ScrollToPlugin from "./greensock/ScrollToPlugin.js" gsap.registerPlugin(ScrollToPlugin) gsap.config({ autoKillThreshold: 2 }) const tl = new gsap.timeline({ repeat: 0, repeatDelay: 2.5 }) const easeOut = Power2.easeOut const isi = new gsap.timeline({ repeat: 0, delay: 15 }) const max = ScrollToPlugin.max(document.querySelector('#isi'), 'y') tl.to('.frame1', {alpha: 1, duration: 0.5, delay:0.25}) tl.to('.gradient, .frame1', {alpha:0, duration: 0.5, delay:2.5}, ">") tl.to('.gradient-2', {alpha:1, scale: 1, duration: 0.5, ease:easeOut}, "<") tl.to('.person1, .bg1', {alpha:1, duration: 0.5}, "<") tl.to('.person2', {alpha:1, duration: 0.5}, ">") tl.to('.person1, .bg2, .frame2', {alpha:0, duration: 0.5, delay:2.75}, ">") tl.to('.person2, .bg2', {alpha:1, duration: 0.5}, "<") tl.to('.person3', {alpha:1, duration: 0.5}, ">") tl.to('.person2, .bg3, .frame3', {alpha:0, duration: 0.5, delay:2.75}, ">") tl.to('.person3, .bg3', {alpha:1, duration: 0.5}, "<") tl.to('.frame4', {alpha:1, duration: 0.5}, ">") tl.to('.cta', {alpha:1, duration: 0.5}, ">") console.log('Timeline duration: ' + tl.duration()) const duration = tl.duration() export { duration as duration } document.addEventListener("DOMContentLoaded", () => { const isi = new gsap.timeline({ repeat: 0, delay: 15 }) let max = 0 function loadTimer() { max = ScrollToPlugin.max(document.querySelector('#isi'), 'y') console.log('ISI Height: ' + max + 'px') isi.to( '#isi', { duration: 90, scrollTo: { y: max, autoKill: true }, ease: 'none', }, ) } setTimeout(loadTimer, 2000) }); This is my vitest.config.ts file: import { defineConfig } from 'vitest/config' export default defineConfig({ test: { reporters: ['html'], include: ['concept-1/**/test/*.{js,ts}'], }, }) And this the test file. import { assert, expect, test } from 'vitest' import { duration } from '../javascript/timeline.js' // Edit an assertion and save to see HMR in action test('Timeline should not exceed 15 seconds', () => { expect(duration).toBeLessThanOrEqual(15); }) GSAP is defined / loaded in the index.html loading from the DoubleClick CDN, and not my javascript / modules. So I have a feeling that is the issue. GSAP is defined for the banners themselves but not the test itself. Importing gsap to the timeline.js file resolves gsap not being defines and next moves on to the easing not being defined. I was using the DoubleClick CDN because the file weight of gsap is exempt. Key when you have 200k max. But I'm wondering using the modular approach importing only what I need from GreenSock is what I need to be doing to get this to work.

I have recently switched over from Gulp to Vite for building banners and now exploring Unit Tests for the first time. For example, I would like to create a unit test that checks the duration of the timeline to make sure it does not exceed 15 seconds max animation per banner specs. I was hoping it would be as simple as adding the following code in my timeline file to export the timeline length: const duration = tl.endTime() export { duration as duration } Then import duration into my test file and run the following test. test('Timeline should not exceed 15 seconds', () => { expect(duration).toBeLessThanOrEqual(15); }) However, the test then fails with ReferenceError: gsap is not defined What is the proper way to configure a export and import to test a gsap timeline? I'm new to unit testing so any help with how to set up a proper working test to get me started would be greatly appreciated.

I haven't solved the root issue preventing the plugin from working yet. I'm loading GSAP from the DCM CDN in my banners. Then I have gulp running a built process from an src folder to build folder that compiles my scss and minifies all my javascript using babel. Manually removing the 'use strict'; from SplitText.min.js in the build directory solves all my issues. But everytime gulp runs / detects a change to files again it adds it back. So, I need to figure out away to prevent gulp from doing this globally or just for this file.

Thanks @ZachSaucier, The solved that error message. I was using the unminified version because it solved another error I was having. The minified version was giving me: Uncaught TypeError: Cannot assign to read only property 'window' of object '#<Window>' I think the issue I'm having has to due with: 'use strict'; The gulp build process / bebel is forcing it on any local js files and why it works when hosted by a third party. So now I need to figure out away around that.

I'm working on some banners and am having an issue where I can't get Greensock plugins to work when the js file is stored in my local environment. I get the following error when trying to load SplitText VM2336 SplitText.js:3 Uncaught ReferenceError: exports is not defined at VM2336 SplitText.js:3 The same JavaScript file for SplitText works fine if I host it on a server rather than load the file from a local folder with: <script src="js/SplitText.js" type="text/javascript"></script> I'm looking to have the js file included with the banner deliverables and not hosted on a third party location. Any thoughts as to what the difference might be that that is causing the error when loading from my js folder and how I might be able to address that. We do have the Club Greensock Membership for 5 developers, and I just downloaded the latest files this morning to see if this would resolve the issue without luck.

Thanks, Got it working now. I appreciate the help.

Thanks for the tip. I'm registering this it like this: gsap.registerPlugin(ScrollToPlugin); gsap.defaults({ autoKillThreshold: 1 }); tl = gsap.timeline(); const max = ScrollToPlugin.max(document.querySelector('#isiCopy'), 'y'); However, this does did not resolve the issue. When inspecting in Chrome I see the following warning in console: Invalid property autoKillThreshold set to 1 Missing plugin? gsap.registerPlugin() Am I missing something still? Thanks, Chris

I'm using GSAP 3.2.4 and scrolltoplugin 3.2.4. I'm having an issue where on windows the auto scroll can not be interrupted by clicking on or tapping on the up and down arrow buttons on the scrollbar. When trying to scroll with the mouse wheel just a quick scroll of the mouse wheel does not stop the auto scroll. You really have to spin that wheel to kill the autoscroll. Back in the GSAP 2.x.x days I set the following to adjust the sensitivity of autoKill ScrollToPlugin.autoKillThreshold = 1; This does not appear to be working any longer. I'm seeing the same issue on Windows. MacOS is fine, the slightest attempt to scroll stops the auto scroll. Searching the documentation, I can't find autoKillThreshold anywhere. Is this still valid in GSAP 3? And if not is there anyway to adjust this so that clicking on the up and down arrow buttons will trigger autoKill on Windows?

Oh, thanks for the release notes link. I was still referencing https://greensock.com/docs/v3/Plugins/ScrollToPlugin when troubleshooting. Which doesn't appear to have been updated yet to reflect this.

It looks like not defining autoKill as true though triggers the same bug. Previous behavior defaulted to autoKill being true.

Thanks for the reply Zach, Using your example I was able to reproduce the issue: https://codepen.io/hhcc/pen/rNNPGrb I sped it up to 40 seconds as 400 seconds is a long time to wait to be able to see that you can scroll once the animation is over. The autoKill was something I added after the bug was happening. I think you might be on to something with it being outside the object though. I was also able to resolve the issue using your example by reformatting my code to look like this: ScrollToPlugin.autoKillThreshold = 1; tl.to("#isiCopy", { duration: 400, scrollTo: {y:"max", autoKill: true}, ease: "none" }, 15); Thanks, Chris

I'm building a pharmaceutical banner and trying out GSAP 3 for the first time. Most pharmaceutical banners have an Important Safety Information and I have been using the scrollTo plugin to auto scroll the legal copy. With v2 the behavior has been that the auto scroll gets killed when the user attempts to interact with the scrolling copy. With v3 I'm finding I can not manual scroll the legal copy until the scrollTo animation has completed. It just keeps jumping back to where it was and continuing the scroll. To troubleshoot I have attempted to set the autoKillThreshold to 1 ScrollToPlugin.autoKillThreshold = 1; I have also attempted to add autoKill:ture to my animation code. This is the code I'm using to trigger the scroll of the Important Safety Information copy. tl.to(isiCopy, 400, {scrollTo:"#scrollEnd", autoKill:true, ease: Power0.easeNone}, 15); As you can see the animation is rather long, 400 seconds. Legal requires it to scroll slow enough where as the user can keep up with the scroll while reading the copy. During these 400 seconds the user is unable to manual scroll. I'm seeing this issue globally across all browsers. I'm unable to post a full code sample as the banner it self is covered under a NDA. Reverting back to GSAP v2 resolves this issue and I get the desired effect with the scrollTo Plugin. But I would like to figure out how to get this to work with v3.

I'm noticing in Chrome there is a hard line / sharp cut off of the blur. Especially to the left and top. Is there anyway to smooth this out in Chrome so there are no hard edges on the blur?