carljohnston.uk

After reading your comment I tried to recreate the issue in a codesandbox, which got the components working perfectly and I couldn't recreate the issue that was occurring on my local environment. I did a little research on the forums here and it seems I was importing from the location. I was using: import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; Once I changed it to: import ScrollTrigger from "gsap/ScrollTrigger"; It all seemed to work perfectly. Thank you for being a sounding board to find the answer!

Thanks Jack! That definitely seems to work in the codepen, however when importing them as separate components with Webpack, I'm not having much luck. Any ideas why that might be?

Hello all! It's been a while! I'm absolutely loving how easy and quick ScrollTrigger is to get the basics of 😀 I'm currently building a ScrollTrigger based carousel for a client, which is working as intended (for the most part). The difficulty comes when I have an interactive component above the carousel, like an accordion. When the accordion is open, the start and end points of the tween are not updated, which is causing the components to overlap. I've tried playing with `update();` and `refresh()` whenever the body height changes, but with no luck. Either I'm not understanding how to implement it, or perhaps there is a feature I haven't found yet? Steps to replicate in codepen: 1. Click on any item in the carousel 2. Scroll to bottom of page. The carousel works fine, providing no accordion items are open. Any help is appreciated, thanks!

@GreenSock, thanks for the pointers. The commas are a little needless, but it keeps my commits tidy, should I need to add any further lines of code in the array. Regarding index.js, yes I did try that without much luck. It seems the safest way is to reference it as a separate file from the HTML head. Thanks anyway!

Unfortunately not. Not to worry. I'll find a work around. Thanks for your help!

Update: It seems that the error is occurring at the point where Babel is compiling the code.

It compiles without problem, however the error occurs when looking at the console in the inspector. Here's how I have my environment set up Folder structure: |- node_modules/ |- gulpfile.js gulpfile.js: const {src, dest} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'), concat = require('gulp-concat'), babel = require('gulp-babel'), uglify = require('gulp-uglify'); const fe_js = () => { return src(`./node_modules/gsap/dist/gsap.min.js`,) .pipe(sourcemaps.init()) .pipe(concat(`scripts.js`)) .pipe(babel({ presets: ['@babel/env'] })) .pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(sourcemaps.write('./')) .pipe(dest(`./assets/js`)) }; exports.default = series(fe_js); Thanks in advance.

Hi all, This is my first time adding GSAP 3 into a project, and it seems to be causing some grief. I'm using Gulp to compile a bunch of scripts, some of which are being referenced directly from the "node_modules" directory. The compilation is fine, but even before I reference GSAP anywhere in my scripts, I'm getting the following error in my inspector: Cannot assign to read only property 'window' of object '#<Window>' Any ideas what I'm doing wrong?

@Sahil, Thank you for the help. Certainly @Dipscom's answer has opened up plenty of possibilities, including the solution you've provided. Thank you both for the help!

Hey @Dipscom! Good to see you on here haha. Brilliant, that's a great resource. I appreciate that. Thanks for your help!

Thanks @sahil, That's great for this case, thank you. Looking at it from a wider perspective, can the "this" property be used for more advanced calculations, based on the properties of each element in the target array?

Hi all, This is something that I've been wondering about, but haven't worked out the best solution for. What I'm trying to do is animate an array of elements on the x axis by the width of each element. For example: element1 = 20px element2 = 40px Using staggerTo / staggerFrom, I'm looking to animate element1 by 20px and element 2 by 40px. I've attached a codepen to what I was hoping would work. Is it possible to do these kinds of animations using the "this" keyword?

Hi @mikel and @greenanimation, Thank you both for the recommendations. I'll be looking further in to the solutions this weekend, and let you know how I get on. Thanks again!

Hi all, I've made a very rudimentary slider to scroll through images. It all works as expected, apart from one slight bug: If the user clicks through the images too quickly, the animation stops and immediately runs the function again. From what I can tell, the solution to this is to either remove the click event while the timeline is running (is this possible?), or to wait until the timeline has finished before running the next animation. If I were to wait for the timeline to finish before running the next clicked animation, would I run in to timeline stacking problems? I've attached the codepen below for reference.

Hi @mikel, Thanks for the response. There is certainly some information there to make life a little easier. Thank you for the resources. Carl