pxel

For anyone deploying to AWS Amplify that is running into the 403 Forbidden issue, we managed to get the package installs working nicely by adding the following to our amplify.yml file. Note that we tried the yarn equivalents initially, however only had luck using npm. version: 1 frontend: phases: preBuild: commands: - npm config set //npm.greensock.com/:_authToken your-secret-token-goes-here - npm config set @gsap:registry https://npm.greensock.com - npm install gsap@npm:@gsap/shockingly - npm config delete //npm.greensock.com/:_authToken - npm config delete @gsap:registry - yarn install build: # the rest of your amplify build stuff under here... Hope this can help someone running into the same issue! Also, we would be keen to hear of any other solutions people have come across.

Awesome! I like the sound of that ? ? Thanks so much, you're a true Superhero!

For anyone interested, I found a solution for this that seems to work quite well. Here is the code from my vue component that acts like a basic event bus, I emit 'animations' that I would like to have be responsive, and then dynamically build out the matchMedia() method / refresh scrollTrigger whenever there are new animations detected. Note that is is code from Nuxt JS / Vue JS: Code for the component that is listening for the emitted animations: // code snippet from '~/components/ScrollTriggerMatchMedia.vue' component export default { data() { return { animations: [] } }, created() { // listen for global $emits for new animations this.$nuxt.$on('push-animations', (animations) => { this.addAnimations(animations) }) }, methods: { // build ScrollTrigger.matchMedia method rebuildAnimations() { let animations = this.animations // get unique key values - e.g: '(max-width: 900px)', 'all', etc let breaks = [...new Set(animations.map(a => a.bp))] let breakpoints = {} // build out the object for matchMedia with each unique breakpoint as a key breaks.forEach(b => { breakpoints[b] = () => { // loop through all animations with the same breakpoint animations.filter(a => a.bp === b).forEach((fa, i) => { fa['animation']() }) } }) // run the ScrollTrigger.matchMedia() method, with our breakpoints object this.$ScrollTrigger.matchMedia(breakpoints) // refresh ScrollTrigger (using safe mode) this.$ScrollTrigger.refresh(true) }, // push animations to component data addAnimations(animations) { this.animations.push(...animations) } }, watch: { // rebuild triggered when there are any changes to the animations array inside the component's data animations() { this.rebuildAnimations() } } } Code for the component that is emitting the animation(s): // code snippet from '~/components/Header.vue' component export default { mounted() { this.$nuxt.$emit('push-animations', [ { // this.gsapAnimation() returns a gsap.timeline animation: () => { this.gsapAnimation() }, // breakpoint to be grouped into inside ScrollTrigger.matchMedia() bp: '(min-width: 900px)' }, { // can also inline gsap timelines here animation: () => { let tl = this.$gsap.timeline({ scrollTrigger: { id: 'scrollTriggerHeader', //trigger: this.$refs['header'], scrub: 0.2, start: 'top top-=30px', end: 'top top-=100px', } }) tl.to(this.$refs['logo'], { y: -90, duration: 0.6, ease: "expo.inOut" }) }, bp: '(min-width: 900px)' }, ]) }, destroyed() { // used to kill the ScrollTrigger instance for this component this.$ScrollTrigger.getById('scrollTriggerHeader').kill() } } Some notes here, my setup has a custom plugin that initialises gsap and ScrollTrigger, and binds them to the global vue instance within nuxt. This is how I did that: // code snippet from '~/plugins/gsap.js' import Vue from 'vue' import gsap from 'gsap' import ScrollToPlugin from 'gsap/ScrollToPlugin' import ScrollTrigger from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollToPlugin) gsap.registerPlugin(ScrollTrigger) const GSAP = { install (Vue, options) { Vue.prototype.$gsap = gsap Vue.prototype.$ScrollTrigger = ScrollTrigger } } Vue.use(GSAP) I hope this can help someone else on their adventures with using ScrollTrigger in a Javascript framework

Hey Jack - Thank you for your reply! Ok, in saying that is there a way you would recommend implementing matchMedia() on a Single Page App (with javascript based routing) like Nuxt.js for example? I can get my head around having one matchMedia() call, what I am trying to get my head around is having the contents within each breakpoint be dynamic or interchangable, or some kind of lifecycle where I can destroy and recreate it between route changes. For example: a )I setup matchMedia() (Global component) b) My header may utilise ScrollTrigger, where matchMedia() is required (Global component) c) My home page may have 3 'sections' utilising ScrollTrigger, where matchMedia() is required (Page component) d) My about page may have 2 different 'sections' utilising ScrollTrigger, where matchMedia() is required (Page component) So that means, on the home page matchMedia() would include animations for my header, and home page x 3 sections. If i navigate to the about page, I would want to (destroy & rebuild / reinitialise) matchMedia() to include animations for my header, and about page x 2 sections. I hope that makes sense! If you think matchMedia() is the wrong tool for the job here, and something custom be required, that's totally understandable Thanks again for the help, I really appreciate it!

https://codepen.io/pxel/pen/BajPRBQ Here's a quick pen I did up to show you what I mean. I feel like this is incorrect usage of the ScrollTrigger.matchMedia() method, but this is essentially the result I am after... Being able to run multiple ScrollTrigger.matchMedia methods on 1 page (based on whichever components are loaded into a page) I noticed on initial load Component 2's animation won't work, but resizing the window down (below 900) and back up again seems to make Component 2's animation work. Thanks again!

Hi, I have a question regarding using ScrollTrigger.matchMedia in multiple places within a web app (which will include using the same breakpoints in multiple places) To paint the scenario for you, so you have some more context. I have a Nuxt.js web app, that is using ScrollTrigger for various animations, which are setup within individual components throughout the app, which allows me to only create / destroy ScrollTrigger and gsap instances where needed to keep things nice and tidy. I noticed in the video tutorial for ScrollTrigger.matchMedia, that declaring this object once seems to be the recommended way, and then using the media queries as keys - e.g '(min-width: 800px)' pointing to a function which would handle ALL the ScrollTrigger instances for each breakpoint. My question is, is there a specific way that I should be using ScrollTrigger.matchMedia() within a component, and setting up the gsap / scrollTrigger animations only related to that component. I have been playing around with this for the last few hours, and I keep running up against issues, as I am presumably using it incorrectly. UPDATE: Small Codepen example in the below reply. Apologies in advance as I haven't included any specific code in this post. I am just seeing if there is a simple way of achieving this with ScrollTrigger.matchMedia, or if I need to setup something a bit more custom to acheive this. If its better for me to setup a small repo / codesandbox with a simple example showing exactly what I mean, let me know and I will reply to this post with it P.S Just wanted to say that ScrollTrigger is the absolute bomb, and I've been using it since the day it launched! Thanks in advance!

Hey @ZachSaucier I noticed this is part of an unreleased version of Gsap (3.3.5). This feature is exactly what I'm chasing at the moment also, just wanted to find out roughly how long you would anticipate before this version is released into the wild? Thanks! Elliott.