Plugin has several mouse Follow effects that will affect position and orientation of object depending on position of mouse. You can add this effect for window (so, it will work always) or when hovering only on specific object
There are two ways to add this effect.
Animation panel
Enable Advanced Animations inside Animation panel and enable Mouse Animations.
Both methods do the same job but with different technology. Advanced Animation panel uses GSAP library, so it can be smoother, it will work also in editor and it has more options. But size of library is big, so if you need maximum performance, better to use Cursor effect panel in Element block
<!-- wp:paragraph -->
<p>Plugin has several mouse Follow effects that will affect position and orientation of object depending on position of mouse. You can add this effect for window (so, it will work always) or when hovering only on specific object</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-5ef1cfc","type":"inner","localId":"gsbp-5ef1cfc","styleAttributes":{"display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"]}} -->
<div class="gsbp-5ef1cfc"><!-- wp:greenshift-blocks/element {"id":"gsbp-47767f2","tag":"img","animation":{"duration":800,"easing":"ease","type":"mouse","usegsap":true,"mouse_px":"20","mouse_py":"20","mouse_rx":"30","mouse_ry":"30","mouse_rz":"","mouse_restore":true,"pointer_none":false},"localId":"gsbp-47767f2","src":"https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp","alt":"","mediaid":5169,"imageSize":"full","originalWidth":1024,"originalHeight":1024,"styleAttributes":{"width":["500px"],"height":["500px"],"maxWidth":["100%"]}} -->
<img data-gsapinit="1" data-duration="0.8" data-from="yes" data-mouse-move="yes" data-mouse-px="20" data-mouse-py="20" data-mouse-rx="30" data-mouse-ry="30" data-mouse-restore="true" class="gsbp-47767f2" src="https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp" alt="" width="1024" height="1024" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph -->
<p>There are two ways to add this effect.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="animation-panel">Animation panel</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Enable Advanced Animations inside Animation panel and enable Mouse Animations.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5175,"width":"356px","height":"703px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/[email protected]" alt="" class="wp-image-5175" style="width:356px;height:703px"/></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="cursor-effect-section">Cursor Effect Section</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This panel is available only in <a href="https://greenshiftwp.com/element-tag-block/" data-type="post" data-id="4576">Element block</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Enable effect in next panel</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5216,"width":"350px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/[email protected]" alt="" class="wp-image-5216" style="width:350px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-8fd26fb","type":"inner","localId":"gsbp-8fd26fb","styleAttributes":{"display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"]}} -->
<div class="gsbp-8fd26fb"><!-- wp:greenshift-blocks/element {"id":"gsbp-7d37cce","tag":"img","localId":"gsbp-7d37cce","src":"https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp","alt":"","mediaid":5169,"imageSize":"full","originalWidth":1024,"originalHeight":1024,"styleAttributes":{"width":["500px"],"height":["500px"],"maxWidth":["100%"]},"cursorEffect":true,"cursorEffectOptions":{"shiftX":"30","shiftY":"30"}} -->
<img class="gsbp-7d37cce" src="https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp" alt="" width="1024" height="1024" loading="lazy" data-cursor-effect="{"shiftX":"30","shiftY":"30"}"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:paragraph -->
<p>Both methods do the same job but with different technology. Advanced Animation panel uses GSAP library, so it can be smoother, it will work also in editor and it has more options. But size of library is big, so if you need maximum performance, better to use Cursor effect panel in Element block</p>
<!-- /wp:paragraph -->
