carljohnston.uk

@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

Hi all, I'm new to GSAP forums, so I hope somebody can help. I've created something that mimics the functionality of CSS media queries within javascript, however, as Greensock uses inline styles, you'd need to remove the style attribute once the animation has completed. My question - Is there any built-in functionality within GSAP where you can define breakpoints without using a multiple if/else conditionals? I've attached a codepen of my current solution which you will see on the lines, either side of the tagline.