Leaderboard

Hi, the animation is running a little sluggish on some devices, probably due to a large number of paths. Any ideas on how to optimize the SVG or the animation for better performance without compromising much on the design? Thank you.

@ELG0BLIN0 I really can't help you unless you can provide your code in a CSB / CodePen (CSB is usually better for react). It's almost definitely an environment/ config issue and likely doesn't have anything to do with GSAP specifically. I do as much of my development in React as I can and this is not something I regularly experience. It might be worth noting that if you enable StrictMode on the CodePen, it DOES break the example: https://codepen.io/StevenStavrakis/pen/zYWzymy So CodePen certainly doesn't enable strict mode by default.

I found the solution. I have no idea if it is supposed to work like this but somehow it works. I leave a comment here for people who has the same issue. There are 3 tips here to solve the problem: 1. gsap.registerPlugin can be called outside onMount() 2. Custom scroller and scrollProxy have to be setup inside onMount() since they need a target element 3. Mounting order is a bit different. Children mounts first then parents. It is intuitive that scroller and scrollProxy should be configured in the onMount() function on the top level which is something like App.svelte. Therefore, initiating animation or scrollTrigger events inside onMount under child does nothing since the scrollProxy is not yet setup. Children are mounted before parents. The workaround is to wrap the animation in the reactive block $: {...} and make sure that your block will not be triggered again by any state changes.

Thanks Man, It worked like a char! Really great platform to learn new things.