Jump to content
Search Community

ScrollTrigger error only in production

travisf test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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
			);
	});

 

Link to comment
Share on other sites

Welcome to the forums @travisf

 

3 minutes ago, travisf said:

target SVG does not show up

 

That might be a good place to start. Remove GSAP from the equation, and get the SVG to display first. I'm also not familiar with svelta, but I'd imagine that it probably have some type of "ref" like other libraries like React and Vue. It's usually best to use a ref the library provides instead of a string selector like '.path'.

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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:

  1. Runyarn install
  2. yarn build production && yarn run preview
  3. navigate to localhost:3000/about 

If you run yarn dev this isn't a problem.

issue.zip

Link to comment
Share on other sites

  • Solution

There is definitely something horribly wrong with how SvelteKit and or Vite handles imports. In production is not even importing ScrollTrigger. What's strange is that it works when importing the minified version. 🤷‍♂️

 

// works
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.min.js';

 

What's even stranger is that it's mixing imports. It's definitely importing the ES Module version of gsap, but importing the ES Module versions of the plugins doesn't work, which is why you have to import the UMD files from the dist folder, but it should not be like that.

 

I'm still investigating how to fix this. Not sure if it's something we need to add to our package.json, or it's something that can be resolved with Svelte or Vite configuration.

 

In the meantime, here's a workaround that seems to work, and is actually what I recommend for any project that uses modules. Create a file to import gsap and all the plugins you are going to use and register the plugins in that file. That will save you from having to write multiple imports in your files and registering the plugins over and over again.

 

 

issue.zip

  • Like 1
  • Thanks 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...