Integrating custom animated cursors is very simple. 1. Create a DIV with 100% WIDTH and 100 VH. Set its class name CURSOR and set its position absolute. 2. Upload a PNG or GIF cursor, place it in the DIV, and give it left and top margin to align it with the mouse. Finally, set its position ABSOLUTE with the highest Z-INDEX so it never falls behind other elements. 2. Add a PAGE TRIGGER interaction, select MOUSE MOVE IN VIEWPORT, and create a new animation. Select the cursor and add MOVE interactions in the MOUSE X and MOUSE Y panels. Set X’s position to -50VW at 0% and 50VW at 100%. Set Y’s position to -50 VH at 0% and 50 VH at 100%. 3. Scroll to the bottom of the Style panel of each element and select CURSOR: NONE to prevent the default cursor from appearing. 4. Prevent your new cursor element from blocking your click interactions with other elements by adding one line of CSS in the HEAD of each page's settings. <style>.cursor {pointer-events: none;}</style> That's it. Cheers! :)

animated, customcursor, css, interaction, mouseover