[Trouble installing npm install gsap@npm:@gsap/shockingly]

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.

[[solved] ScrollTrigger.matchMedia issues with multiple instances]

 

8 minutes ago, GreenSock said:

Thanks for sharing your solution!

 

I rolled up my sleeves and worked on accommodating a use case like this, so you can add the same breakpoint multiple times and it should work in 3.4.1. Here's a preview: https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Furthermore, you can optionally return a function that'll be called when the breakpoint is no longer active (teardown). I figured you might appreciate that. 

 

Better?

 

Awesome!

I like the sound of that 🙌 😁 

 

Thanks so much, you're a true Superhero!

[[solved] ScrollTrigger.matchMedia issues with multiple instances]

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

[[solved] ScrollTrigger.matchMedia issues with multiple instances]

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!

 

 

[[solved] ScrollTrigger.matchMedia issues with multiple instances]

See the Pen BajPRBQ by pxel (@pxel) on CodePen

 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!

[[solved] ScrollTrigger.matchMedia issues with multiple instances]

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!

[How to properly check for and kill() specific ScrollTrigger instances on resize?]

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.