You can add a custom cursor for the whole site or specific sections. This is example for section
There are two ways to add custom cursors.
Animation Container
This way will require Animation Container and will load GSAP library.
To use it, add an animation container, drop any element inside, then enable the Mouse Follow option in the trigger type
Screenshot
By default, this will replace your cursor with a block that you put inside the Animation Container. You can also add a custom trigger class. This will make the cursor appear only when you hover over an element with this class.
Additionally, everything you put inside the transform values of the Animation container will be used when you click on an element. So, if you set Scale to 0.3, then each click will scale down the cursor block.
Custom cursor in Element block
To use this function, use the Div Element block. Then, find the special Custom cursor panel. You must also provide a selector for the object used as the custom cursor. So, if you added an element with the class “customcursor”, put there “.customcursor”.
Here is a simple example
The custom cursor option in the Element block also has a smooth appearance (will add smooth opacity when the cursor is active) and scale on click. It will also add .mouseclick-obj and .mouseclick-wrapper on the cursor object and container when you do click, so you can add more custom animations.
When should you use Animation Container and when should you use Element block?
Both ways have similar effects, but they use different technologies. Animation container provides a smoother transition, and you can configure smooth speed. But price for this is the bigger size of the library. Element block uses a lightweight custom script. So, if you need a custom cursor on the page – use the Element block. If you already have other animations with GSAP and Advanced animations of Greenshift – use Animation Container
Custom global cursor element
If you click on G icon in top right corner, you will get to global settings for Greenshift. You can enable a custom mouse effect there. This is how it will look on-site
<!-- wp:paragraph -->
<p>You can add a custom cursor for the whole site or specific sections. This is example for section</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-60a0240","s":0.5,"duration":0.3,"durationfollow":0.3,"triggertype":"mousefollow","customtrigger":".mousefollow","set_from":false} -->
<div id="gspb_gsap-gsbp-60a0240"><div id="gsbp-60a0240" class="gs-gsap-wrap" data-s="0.5" data-duration="0.3" data-triggertype="mousefollow" data-customtrigger=".mousefollow" data-durationfollow="0.3"><!-- wp:greenshift-blocks/image {"id":"gsbp-b6e1e691-50dc","width":["custom",null,null,null],"customWidth":[150,null,null,null],"originalWidth":1776,"originalHeight":1972,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/air1.webp","mediaid":2055,"alt":""} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-b6e1e691-50dc" id="gspb_image-id-gsbp-b6e1e691-50dc"><img src="https://greenshiftwp.com/wp-content/uploads/2022/09/air1.webp" data-src="" alt="" loading="lazy" width="150" height="1972"/></div>
<!-- /wp:greenshift-blocks/image --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-2ec4f49","type":"inner","localId":"gsbp-2ec4f49","styleAttributes":{"display":["flex"],"flexDirection":["column"],"alignItems":["flex-start"],"position":["relative"]},"customCursor":false} -->
<div class="gsbp-2ec4f49"><!-- wp:greenshift-blocks/element {"id":"gsbp-3045376","type":"inner","animation":{"duration":800,"easing":"ease","type":"mouse","usegsap":true,"mouse_rx":"35","mouse_ry":"35"},"className":"gs-videoplayer","localId":"gsbp-3045376"} -->
<div data-gsapinit="1" data-duration="0.8" data-from="yes" data-mouse-move="yes" data-mouse-rx="35" data-mouse-ry="35" class="gs-videoplayer gsbp-3045376"><!-- wp:greenshift-blocks/element {"id":"gsbp-1ef0736","interactionLayers":[{"actions":[{"actionname":"toggle-class","classname":"hide_onfront","selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}","cssSelectorBuilder":[{"combinator":"","selector":".gs-videoblock","complexselector":"","pseudoclass":""}],"jsSelectorBuilder":{"closest":true,"closestSelector":"gs-videoplayer"}},{"actionname":"toggle-class","classname":"playactive","selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}","cssSelectorBuilder":[{"combinator":"","selector":".gs-videoblock","complexselector":"","pseudoclass":""}],"jsSelectorBuilder":{"closest":true,"closestSelector":"gs-videoplayer"}},{"actionname":"video","env":"no-action","videotype":"play","conditions":[{"includeornot":"includes","classorid":"class","additionalclass":"playactive"}],"selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}"},{"actionname":"video","env":"no-action","videotype":"pause","conditions":[{"includeornot":"not-includes","classorid":"class","additionalclass":"playactive"}],"selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}"}],"env":"no-action","triggerData":{"trigger":"click"}}],"tag":"img","className":"mousefollow","localId":"gsbp-1ef0736","src":"https://greenshiftwp.com/wp-content/uploads/2022/05/IMG_2439.jpg","alt":"","mediaid":2106,"originalWidth":1280,"originalHeight":1792,"styleAttributes":{"width":["300px"]}} -->
<img data-gspbactions="[{"actions":[{"actionname":"toggle-class","classname":"hide_onfront","selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}","cssSelectorBuilder":[{"combinator":"","selector":".gs-videoblock","complexselector":"","pseudoclass":""}],"jsSelectorBuilder":{"closest":true,"closestSelector":"gs-videoplayer"}},{"actionname":"toggle-class","classname":"playactive","selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}","cssSelectorBuilder":[{"combinator":"","selector":".gs-videoblock","complexselector":"","pseudoclass":""}],"jsSelectorBuilder":{"closest":true,"closestSelector":"gs-videoplayer"}},{"actionname":"video","env":"no-action","videotype":"play","conditions":[{"includeornot":"includes","classorid":"class","additionalclass":"playactive"}],"selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}"},{"actionname":"video","env":"no-action","videotype":"pause","conditions":[{"includeornot":"not-includes","classorid":"class","additionalclass":"playactive"}],"selector":"{CLOSEST:.gs-videoplayer}{SELECTOR_ALL:.gs-videoblock}"}],"env":"no-action","triggerData":{"trigger":"click"}}]" class="mousefollow gsbp-1ef0736" src="https://greenshiftwp.com/wp-content/uploads/2022/05/IMG_2439.jpg" alt="" width="1280" height="1792" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-a4d9e46","dynamicGClasses":[{"value":"hide_onfront","type":"preset","label":"hide_onfront"}],"tag":"video","className":"hide_onfront gs-videoblock","localId":"gsbp-a4d9e46","src":"https://greenshiftwp.com/wp-content/uploads/2022/09/y2mate.com-10-second-chill-music-17-Best-One-Yet_360p.mp4","loop":true,"controls":true,"styleAttributes":{"width":["200px"],"top":["17px"],"position":["absolute"],"left":["200px"],"transition":["all 0.5s cubic-bezier(0.47, 0, 0.07, 1)"]}} -->
<video class="hide_onfront gs-videoblock gsbp-a4d9e46" loop controls><source src="https://greenshiftwp.com/wp-content/uploads/2022/09/y2mate.com-10-second-chill-music-17-Best-One-Yet_360p.mp4" type="video/mp4"/></video>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:paragraph -->
<p>There are two ways to add custom cursors.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="animation-container">Animation Container</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This way will require Animation Container and will load GSAP library.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>To use it, add an animation container, drop any element inside, then enable the Mouse Follow option in the trigger type</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5190,"width":"400px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/09/[email protected]" alt="" class="wp-image-5190" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>By default, this will replace your cursor with a block that you put inside the Animation Container. You can also add a custom trigger class. This will make the cursor appear only when you hover over an element with this class.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Additionally, everything you put inside the transform values of the Animation container will be used when you click on an element. So, if you set Scale to 0.3, then each click will scale down the cursor block.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="custom-cursor-in-element-block">Custom cursor in Element block</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>To use this function, use <span style="box-sizing: border-box; margin: 0px; padding: 0px;"><a href="https://greenshiftwp.com/element-tag-block/" target="_blank" rel="noopener">the Div Element block</a>. Then, find the special Custom cursor panel. You must also provide a selector for the object </span>used as the custom cursor. So, if you added an element with the class "customcursor", put there ".customcursor".</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Here is a simple example</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-7684c97","type":"inner","localId":"gsbp-7684c97","customCursor":true,"customCursorOptions":{"selector":".cursor","opacity":true,"scale":true}} -->
<div class="gsbp-7684c97" data-custom-cursor="{"selector":".cursor","opacity":true,"scale":true}"><!-- wp:greenshift-blocks/element {"id":"gsbp-de78798","interactionLayers":[{"actions":[{"actionname":"set-variable","attrValue":"translate(calc(({{CLIENT_X}} - {{POSITION_LEFT}} - {{WIDTH}}/2) / 10 * 1px), calc(({{CLIENT_Y}} - {{POSITION_TOP}} - {{HEIGHT}}/2) / 15 * 1px))","attr":"transform","customMath":[],"attrValueSelector":"","aopts":[{"type":"x","value":"calc(({{CLIENT_X}} - {{POSITION_LEFT}} - {{WIDTH}}/2) / 5 * 1px)"},{"type":"y","value":"calc(({{CLIENT_Y}} - {{POSITION_TOP}} - {{HEIGHT}}/2) / 5 * 1px)"}]}],"env":"no-action","triggerData":{"trigger":"mouse-move"}}],"tag":"img","localId":"gsbp-de78798","src":"https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp","alt":"","mediaid":5169,"imageSize":"full","originalWidth":1024,"originalHeight":1024,"styleAttributes":{"width":["300px"],"transition":["all 0.5s ease-out"]}} -->
<img data-gspbactions="[{"actions":[{"actionname":"set-variable","attrValue":"translate(calc(({{CLIENT_X}} - {{POSITION_LEFT}} - {{WIDTH}}/2) / 10 * 1px), calc(({{CLIENT_Y}} - {{POSITION_TOP}} - {{HEIGHT}}/2) / 15 * 1px))","attr":"transform","customMath":[],"attrValueSelector":"","aopts":[{"type":"x","value":"calc(({{CLIENT_X}} - {{POSITION_LEFT}} - {{WIDTH}}/2) / 5 * 1px)"},{"type":"y","value":"calc(({{CLIENT_Y}} - {{POSITION_TOP}} - {{HEIGHT}}/2) / 5 * 1px)"}]}],"env":"no-action","triggerData":{"trigger":"mouse-move"}}]" class="gsbp-de78798" src="https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp" alt="" width="1024" height="1024" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-c488e98","type":"no","className":"cursor","localId":"gsbp-c488e98","styleAttributes":{"color":["#ff0000"],"backgroundColor":["#ff00d0"],"width":["40px"],"height":["40px"],"borderTopLeftRadius":["100px"],"borderBottomLeftRadius":["100px"],"borderTopRightRadius":["100px"],"borderBottomRightRadius":["100px"],"borderRadiusLink_Extra":true}} -->
<div class="cursor gsbp-c488e98"></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:paragraph -->
<p>The custom cursor option in the Element block also has a smooth appearance (will add smooth opacity when the cursor is active) and scale on click. It will also add .mouseclick-obj and .mouseclick-wrapper on the cursor object and container when you do click, so you can add more custom animations.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="when-should-you-use-animation-container-and-when-should-you-use-element-block">When should you use Animation Container and when should you use Element block?</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Both ways have similar effects, but they use different technologies. Animation container provides a smoother transition, and you can configure smooth speed. But price for this is the bigger size of the library. Element block uses a lightweight custom script. So, if you need a custom cursor on the page - use the Element block. If you already have other animations with GSAP and Advanced animations of Greenshift - use Animation Container</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="custom-global-cursor-element">Custom global cursor element</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>If you click on G icon in top right corner, you will get to global settings for Greenshift. You can enable a custom mouse effect there. This is how it will look on-site</p>
<!-- /wp:paragraph -->
<!-- wp:video {"id":1227} -->
<figure class="wp-block-video"><video autoplay controls loop muted src="https://greenshiftwp.com/wp-content/uploads/2022/05/mousefollow.mp4" playsinline></video></figure>
<!-- /wp:video -->