travisf

Sorry, I wanted to add a gif for future reference since it's likely that Stripe.com will change before this question becomes irrelevant but my account dosen't have space to do so.

Stripe tends to change their website constantly, I'm just attaching this for reference. - Ah sorry I'm out of space!

Awesome, thank you this is much simpler.

I have a page with several sections of varying lengths. As the user scrolls from one section to the next the background should change between an alternating colour scheme of linear-gradients and solid colours. I'm not sure of the best way to approach this, in my attached pen I am looping through each section and using a switch statement to define specific background colours for each section. I think there are two specific problems, the first has to deal with the trigger start, it's currently start: top '-=' + (singleDuration * i) where singleDuration = totalDuration / sections.lengthI can't think of a good way to trigger the animation when the top of the section is at the top of the window because the sections are of variable heights. The other issue is the actual animation/background color change. Right now it's working sporadically, this may be fixed once I get the above issue resolved.

I would suspect it could be something in the Svelte/Vite config, I'm rubbish at setting up JS configs. Thank you for your help! This is awesome, I've added the script to set up GSAP and register plugins. It's working in my project now! Thank you so much!

@OSUblake I've attached a stripped down version of the project and in the process I think I was able to identify the issue although I do not know why it is occurring. Sveltekit is very similar to NextJS if you are familiar with that framework, inside src there is a routes folder which contains the standard / index page, and an /about page. If you navigate to the /about page (localhost:3000/about) in a production preview you will see the error message and ScrollTrigger won't work. It works in development. From my testing I believe the issue is happening when I register the ScrollTrigger plugin on the index page. If you go to the /index page and comment out line 9: gsap.registerPlugin(ScrollTrigger) ScrollTrigger will work on the /about page in production. I don't know why this is I would think that the two pages are independent. To recreate this issue: Runyarn install yarn build production && yarn run preview navigate to localhost:3000/about If you run yarn dev this isn't a problem. issue.zip

@OSUblake thanks I am working on recreating the issue now in a smaller environment. I will let you know if I either solve it or come up with something simple you can take a peek at.

Hey @OSUblake thanks for the response... I should have clarified when I say the target SVG does not show up, it's there but it's not on the path and it does not move along the path. I have it styled, initially, to hidden so that it isn't showing before the user scrolls. I have tried replacing all the selectors with references, bind:this in Svelte, which I will be sure to do in the future as a best practice. No difference in the issue though.

I know examples are preferred but I am suspicious I wouldn't be able to reproduce this in a pen or repl. I am using ScrollTrigger and MotionPathPlugin to move an SVG along another SVG path. Everything works fine locally but on production or in a production preview (yarn run build && yarn run preview) the animation does not work (target SVG does not show up) and there is a console error: ScrollTrigger-4a410f45.js:formatted:524 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name') Further details: I'm using Svelte, which has an onMount function which fires after a component mounts. It occurred to me that perhaps the element was not rendered before Green Sock was trying to locate it. WithonMountthis shouldn't but as a sanity check I tried adding a 5 second delay. I'm using Green Sock 3.10.4 but I've also tried 3.10.0 and 3.8.0. This is my code: //Svelte on mount function wraps this onMount(async () => { gsap.registerPlugin(ScrollTrigger, MotionPathPlugin); gsap.timeline({ defaults: { duration: 1 }, scrollTrigger: { trigger: '.path', scrub: true, start: 'top top', end: 'bottom -10%' } }) .to('.icon', { duration: 0.01, autoAlpha: 1 }) .to( '.icon', { motionPath: { path: '.ride-path', align: '.ride-path', alignOrigin: [0.5, 0.5] } }, 0 ); });