Scroll animations feel jittery on mobile due to scrubbed ScrollTrigger behavior

[Katotodan]

Current Behavior

On mobile devices, several animations are configured with ScrollTrigger's scrub option.

Because mobile scrolling often involves fast flick gestures, the scroll position changes rapidly and may reverse slightly as momentum settles. When animations are scrubbed, this causes them to jump forward and backward, creating a jittery or distracting user experience.

Observed issues:

• Animations frequently reverse when the user scrolls slightly upward.
• Some animations appear to jump or skip frames when scrolling quickly.
• Complex sequences (such as the floating logo pieces) can feel unstable.

Proposed solution:

Disable scrub behavior on mobile devices and instead use toggleActions: "play none none none" so animations play once when entering the viewport.

Expected result:

• Smoother and more predictable animation behavior on touch devices
• Reduced animation reversal during rapid scrolling
• Improved overall UX on mobile

Note: To view this use a real phone device

Parent: #146

Mockups

---

Contributor Guides and Handbook

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[RudraKumarSharma]

Hey @Katotodan i can see a draft PR are you already working on this issue? if not can you please assign it to me i would like to work on this.

[Katotodan]

@RudraKumarSharma please view the parent issue, if you find an area you can improve, please open an issue related to that area and proceed with an implementation related to that issue.
Parent issue is #146
Thanks !