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