A step-by-step tutorial building a gravity-based mouse trail effect using GSAP. Images spawn at the cursor position, fall to the bottom of the viewport with realistic physics, bounce, and disappear. The guide covers HTML structure, CSS preloading tricks, mousemove distance tracking, dynamic GSAP timelines with elastic and back easing, and delta-based horizontal drift. Published in partnership with Made With Gsap to celebrate their new effects collection launch.
Table of contents
HTML StructureSome CSSStarting the animationTriggering the Image Creation FunctionInside the createMedia() FunctionGoing furtherAbout Made With GsapSort: