Did you find thoughts that you do the same actions repeatedly to add common modern popular effects to the site? Or maybe you want to add some smooth, modern interactions on the site but don’t want to study animations and interactions.

We are glad to introduce our big update of Effects Kit.

This includes 3 new panels: classes presets, updated Animation panel and Effects panel

Let’s start from classes

Perspective preset classes

These set of classes are for adding fast perspective and shadow effects, highly likely you will use them for images. You can simply select them in class system

Perspective and shadow

gs_style_perspective

Perspective and skew

gs_style_skewed

Perspective and rotate

gs_style_rotated

Isometric

gs_style_stacked

3d Layer

gs_style_3d_multi

Hover Presets Classes

These classes are made to add some simple hover effects with transitions. Hover over elements to see effect.

Twin Slide Effect

gs-twin-on-hover
Home
Services
Portfolio
Prices
gs_scale_on_hover
gs_top_on_hover
gs_shadow_on_hover

Animation Panel and animation presets

Greenshift has a powerful Animation System and Interaction Layers, but for common animations, it’s better to use presets. They have some benefits. They are:

  1. Animations are Based on a variable system. So, you can add overriding via global styles to disable or change the animation on the whole site or in specific areas
  2. Balanced presets for consistent, smooth animations. We use only aesthetical useful animations
  3. Available not only for a current block but also for all children (stagger animations).
  4. It can be used in combination with Slider blocks and Panel blocks. It will be triggered on active slide, for example

Animation Presets Panel

All blocks have Animation panel

Screenshot

It’s easy to use. Just select the Animation type. You can also enable animation not to the current block but on direct child items. The option to add stagger delay can be helpful for adding some delay to each child. Animation panel has also Split text option if you enable Animation on child. This will split text by words and add animations to words with some delay on each word. Example:

Culpa commodo proident nostrud adipisicing sit ipsum pariatur enim dolor occaecat reprehenderit nostrud adipisicing commodo nisi amet excepteur minim elit consectetur laborum pariatur officia reprehenderit

Animation presets are based on CSS and have very small js library just to detect that object is in view.

Animations have few extra options. For example, you can enable stagger effect and option to apply animation to children instead of block itself.

There is also option “Animate On Parent Active class”. When you use it, animation will be active once any of parent blocks will have “.active” class. This works also if you use element inside Sliding panels, also in sliders. See slider example

Title of Slider First
Buy This Now!
Title of Slider Second
Buy This Now!

This can be used also inside Panel. Read more about Interactive sliding panels

Click to Show menu
Home
Services
Portfolio
Prices
Contacts

Used variables

All presets use common variable system, so you can easily overwrite all values globally

Hover variables

--gs-root-hover-transition

Use it if you need to change transition for hover effects. You must put transitions value, example

body{–gs-root-hover-transition: all 0.5s ease-in !important}

--gs-root-hover-timing

You can also change only timing of hover animation. Default is 0.5s

--gs-root-hover-easing

You can change only easing. Default is cubic-bezier(0.42, 0, 0.58, 1)

--gs-root-hover-transform

Use if you want to change effect of hover. So, if you use

body{–gs-root-hover-transform: translateY(-100px)}

This will change all on hover transform effect to be -100px

Motion Variables

“animation” prefix is used for Animation panel presets

--gs-root-animation-transition

General variable to replace motion transitions. Example

body{–gs-root-animation-transition: all 1.3s ease-in-out !important}

--gs-root-animation-timing

Use to change time of motion. Default is 0.9s

--gs-root-animation-easing

Use to overwrite easing, Default is cubic-bezier(0.42, 0, 0.58, 1)

--gs-root-animation-clip-path

If you use clip path effect, you can overwrite them in this variable

--gs-root-animation-transform

If you used any of transform related motions, you can overwrite them here, example

body{ –gs-root-animation-transform: rotateX(-45deg) translateY(-30px) !important}

Effects panel and Transition Panel

If you want to dive in making custom animations, you must be familiar with CSS Animations and CSS transitions.

I recommend next tutorials

  1. MDN web docs about animation CSS
  2. Updated Timeline API for CSS
  3. W3 Css transitions explanation

To make your life easier, Greenshift has a lot of ready presets for CSS transitions and Animations. But in the same time, you can use any values. You can find panels in Element block in Local styles and in class system

There are some ready presets for animation, to enable them, hover over “+” icon.

Check more about Animation Effects presets

Copy this post’s content
<!-- wp:paragraph -->
<p>Did you find thoughts that you do the same actions repeatedly to add common modern popular effects to the site? Or maybe you want to add some smooth, modern interactions on the site but don’t want to study animations and interactions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We are glad to introduce our big update of Effects Kit.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This includes 3 new panels: classes presets, updated Animation panel and Effects panel</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-4c1fa7d","flexbox":{"type":"flexbox","flexDirection":["row"],"columngap":["30px"]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-4c1fa7d" id="gspb_container-id-gsbp-4c1fa7d"><!-- wp:greenshift-blocks/image {"id":"gsbp-d72aaa0","width":["custom",null,null,null],"customWidth":[200,null,null,null],"originalWidth":566,"originalHeight":1119,"shadow":{"hoffset":0,"voffset":5,"blur":23,"spread":0,"color":"rgba(188, 207, 219, 0.35)","position":"","preset":"4"},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2024/10/image-518x1024.png","mediaid":5232} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-d72aaa0" id="gspb_image-id-gsbp-d72aaa0"><img src="https://greenshiftwp.com/wp-content/uploads/2024/10/image-518x1024.png" data-src="" loading="lazy" width="200" height="1119"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:greenshift-blocks/image {"id":"gsbp-92c1e1e","width":["custom",null,null,null],"customWidth":[200,null,null,null],"originalWidth":556,"originalHeight":988,"shadow":{"hoffset":0,"voffset":5,"blur":20,"spread":0,"color":"rgba(0, 0, 0, 0.03)","position":"","preset":"2"},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2024/10/[email protected]","mediaid":5312} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-92c1e1e" id="gspb_image-id-gsbp-92c1e1e"><img src="https://greenshiftwp.com/wp-content/uploads/2024/10/[email protected]" data-src="" loading="lazy" width="200" height="988"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-126201d","tag":"img","localId":"gsbp-126201d","src":"https://greenshiftwp.com/wp-content/uploads/2024/10/effects.jpg","alt":"","mediaid":5367,"originalWidth":271,"originalHeight":640,"styleAttributes":{"width":["200px"]}} -->
<img class="gsbp-126201d" src="https://greenshiftwp.com/wp-content/uploads/2024/10/effects.jpg" alt="" width="271" height="640" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:paragraph -->
<p>Let's start from classes</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="perspective-preset-classes">Perspective preset classes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>These set of classes are for adding fast perspective and shadow effects, highly likely you will use them for images. You can simply select them in <a href="https://greenshiftwp.com/documentation/greenshift-extra/global-and-local-class-system/" data-type="documentation" data-id="3786">class system</a></p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-8897f4b","type":"inner","localId":"gsbp-8897f4b","styleAttributes":{"display":["flex"],"flexDirection":["row",null,null,"column"],"columnGap":["35px"],"alignItems":["center"],"rowGap":["35px"],"justifyContent":["center"],"marginBottom":["80px"]}} -->
<div class="gsbp-8897f4b"><!-- wp:greenshift-blocks/element {"id":"gsbp-b36edfb","dynamicGClasses":[{"value":"gs_style_perspective","type":"preset","label":"gs_style_perspective"}],"tag":"img","className":"gs_style_perspective","localId":"gsbp-b36edfb","src":"https://greenshiftwp.com/wp-content/uploads/2024/10/Ransar_the_word_UX_formed_by_watercolor_flowers_in_white_backgr_a541bd51-a0d3-4f2f-8309-53ad5da1231d.webp","alt":"","mediaid":5237,"originalWidth":1024,"originalHeight":1024,"styleAttributes":{"height":["350px"],"width":["350px"],"minWidth":["350px"],"maxWidth":["100%"]}} -->
<img class="gs_style_perspective gsbp-b36edfb" src="https://greenshiftwp.com/wp-content/uploads/2024/10/Ransar_the_word_UX_formed_by_watercolor_flowers_in_white_backgr_a541bd51-a0d3-4f2f-8309-53ad5da1231d.webp" alt="" width="1024" height="1024" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-cc4ff57","type":"inner","localId":"gsbp-cc4ff57"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-39cb5a7","textContent":"Perspective and shadow ","tag":"p","localId":"gsbp-39cb5a7","styleAttributes":{"fontSize":["clamp(2.2rem, 4vw, 2.8rem)"],"lineHeight":["clamp(2.75rem, 4.7vw, 3.5rem)"],"fontWeight":["600"]}} -->
<p class="gsbp-39cb5a7">Perspective and shadow </p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-cdcc5f8","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_style_perspective","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-cdcc5f8"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_style_perspective</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-9facab6","type":"inner","localId":"gsbp-9facab6","styleAttributes":{"display":["flex"],"flexDirection":["row",null,null,"column"],"columnGap":["35px"],"alignItems":["center"],"rowGap":["35px"],"justifyContent":["center"],"marginBottom":["80px"]}} -->
<div class="gsbp-9facab6"><!-- wp:greenshift-blocks/element {"id":"gsbp-da545cb","type":"inner","localId":"gsbp-da545cb"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-d27b93b","textContent":"Perspective and skew","tag":"p","localId":"gsbp-d27b93b","styleAttributes":{"fontSize":["clamp(2.2rem, 4vw, 2.8rem)"],"lineHeight":["clamp(2.75rem, 4.7vw, 3.5rem)"],"fontWeight":["600"]}} -->
<p class="gsbp-d27b93b">Perspective and skew</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-ae747e2","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_style_skewed","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-ae747e2"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_style_skewed</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-965b781","dynamicGClasses":[{"value":"gs_style_skewed","type":"preset","label":"gs_style_skewed"},{"value":"gs_border_radius_l","type":"preset","label":"gs_border_radius_l"}],"tag":"img","className":"gs_style_skewed gs_border_radius_l","localId":"gsbp-965b781","src":"https://greenshiftwp.com/wp-content/uploads/2024/10/460632523_8616843655019565_9050092431129497590_n.jpg","alt":"","mediaid":5239,"originalWidth":1024,"originalHeight":1024,"styleAttributes":{"height":["350px"],"width":["350px"],"minWidth":["350px"],"maxWidth":["100%"]}} -->
<img class="gs_style_skewed gs_border_radius_l gsbp-965b781" src="https://greenshiftwp.com/wp-content/uploads/2024/10/460632523_8616843655019565_9050092431129497590_n.jpg" alt="" width="1024" height="1024" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-1a3b2aa","type":"inner","localId":"gsbp-1a3b2aa","styleAttributes":{"display":["flex"],"flexDirection":["row",null,null,"column"],"columnGap":["35px"],"alignItems":["center"],"rowGap":["35px"],"justifyContent":["center"],"marginBottom":["80px"]}} -->
<div class="gsbp-1a3b2aa"><!-- wp:greenshift-blocks/element {"id":"gsbp-c4de333","dynamicGClasses":[{"value":"gs_style_rotated","type":"preset","label":"gs_style_rotated"}],"tag":"img","className":"gs_style_rotated","localId":"gsbp-c4de333","src":"https://greenshiftwp.com/wp-content/uploads/2024/10/Firefly-G-квіти-й-листя-рожевого-гавайського-гібіскусу-гіперреалістичні-83759.jpg","alt":"","mediaid":5234,"originalWidth":1024,"originalHeight":1024,"styleAttributes":{"height":["350px"],"width":["350px"],"minWidth":["350px"],"maxWidth":["100%"]}} -->
<img class="gs_style_rotated gsbp-c4de333" src="https://greenshiftwp.com/wp-content/uploads/2024/10/Firefly-G-квіти-й-листя-рожевого-гавайського-гібіскусу-гіперреалістичні-83759.jpg" alt="" width="1024" height="1024" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e82e660","type":"inner","localId":"gsbp-e82e660"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-bca1fba","textContent":"Perspective and rotate","tag":"p","localId":"gsbp-bca1fba","styleAttributes":{"fontSize":["clamp(2.2rem, 4vw, 2.8rem)"],"lineHeight":["clamp(2.75rem, 4.7vw, 3.5rem)"],"fontWeight":["600"]}} -->
<p class="gsbp-bca1fba">Perspective and rotate</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-cadedba","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_style_rotated","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-cadedba"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_style_rotated</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-dd468d4","type":"inner","localId":"gsbp-dd468d4","styleAttributes":{"display":["flex"],"flexDirection":["row",null,null,"column"],"columnGap":["135px"],"alignItems":["center"],"rowGap":["135px"],"justifyContent":["center"],"marginBottom":["80px"]}} -->
<div class="gsbp-dd468d4"><!-- wp:greenshift-blocks/element {"id":"gsbp-1c5ba41","type":"inner","localId":"gsbp-1c5ba41"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-4752aaa","textContent":"Isometric","tag":"p","localId":"gsbp-4752aaa","styleAttributes":{"fontSize":["clamp(2.2rem, 4vw, 2.8rem)"],"lineHeight":["clamp(2.75rem, 4.7vw, 3.5rem)"],"fontWeight":["600"]}} -->
<p class="gsbp-4752aaa">Isometric</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-388ef35","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_style_stacked","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-388ef35"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_style_stacked</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a9ef2b5","dynamicGClasses":[{"value":"gs_style_stacked","type":"preset","label":"gs_style_stacked"}],"tag":"img","className":"gs_style_stacked","localId":"gsbp-a9ef2b5","src":"https://greenshiftwp.com/wp-content/uploads/2024/04/zerogilator_G_letter_in_3d_vibrant_colors_dark_background_d889950f-1ce7-4daf-8475-83edc2dd8571.png","alt":"","mediaid":4671,"originalWidth":1024,"originalHeight":1024,"styleAttributes":{"height":["350px",null,null,"250px"],"width":["350px",null,null,"250px"],"minWidth":["350px",null,null,"250px"],"maxWidth":["100%"]}} -->
<img class="gs_style_stacked gsbp-a9ef2b5" src="https://greenshiftwp.com/wp-content/uploads/2024/04/zerogilator_G_letter_in_3d_vibrant_colors_dark_background_d889950f-1ce7-4daf-8475-83edc2dd8571.png" alt="" width="1024" height="1024" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-00d4695","type":"inner","localId":"gsbp-00d4695","styleAttributes":{"display":["flex"],"flexDirection":["column"],"alignItems":["center"]}} -->
<div class="gsbp-00d4695"><!-- wp:greenshift-blocks/element {"id":"gsbp-ea6a5e6","textContent":"3d Layer","tag":"p","localId":"gsbp-ea6a5e6","styleAttributes":{"fontSize":["clamp(2.2rem, 4vw, 2.8rem)"],"lineHeight":["clamp(2.75rem, 4.7vw, 3.5rem)"],"fontWeight":["600"],"textAlign":["center"]}} -->
<p class="gsbp-ea6a5e6">3d Layer</p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-79c8e49","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_style_3d_multi","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-79c8e49"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_style_3d_multi</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a53cea3","dynamicGClasses":[{"value":"gs_style_3d_multi","type":"preset","label":"gs_style_3d_multi"}],"type":"inner","className":"gs_style_3d_multi","localId":"gsbp-a53cea3","styleAttributes":{"marginBottom":["60px"],"paddingTop":["3px"],"paddingLink_Extra":"all","paddingBottom":["3px"],"paddingLeft":["3px"],"paddingRight":["3px"]}} -->
<div class="gs_style_3d_multi gsbp-a53cea3"><!-- wp:greenshift-blocks/image {"id":"gsbp-abcae8a","scale":["cover"],"positionImage":[{"x":0.51,"y":0.48}],"width":["custom",null,null,null],"widthUnit":["%","px","px","px"],"customWidth":[100,null,null,null],"originalWidth":2560,"originalHeight":1463,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2024/10/Firefly-3d-arm-is-touching-big-G-letter-81666-scaled.jpg","mediaid":5249,"alt":""} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-abcae8a" id="gspb_image-id-gsbp-abcae8a"><img src="https://greenshiftwp.com/wp-content/uploads/2024/10/Firefly-3d-arm-is-touching-big-G-letter-81666-scaled.jpg" data-src="" alt="" loading="lazy" width="100%" height="1463"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="hover-presets-classes">Hover Presets Classes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>These classes are made to add some simple hover effects with transitions. Hover over elements to see effect.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-717a353","type":"inner","localId":"gsbp-717a353","styleAttributes":{"display":["flex"],"flexDirection":["column"],"alignItems":["center"]}} -->
<div class="gsbp-717a353"><!-- wp:greenshift-blocks/heading {"id":"gsbp-2226aab","dynamicGClasses":[],"headingTag":"h3","headingContent":"Twin Slide Effect","typography":{"alignment":["center"]},"customAnchor":"twin-slide-effect","className":""} -->
<div id="twin-slide-effect"></div><h3 id="gspb_heading-id-gsbp-2226aab" class="gspb_heading gspb_heading-id-gsbp-2226aab ">Twin Slide Effect</h3>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-74a482f","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs-twin-on-hover","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-74a482f"} -->
<div class="label_for_class gs_style_skeuomorphism">gs-twin-on-hover</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-149e9ac","dynamicGClasses":[],"type":"inner","className":"","localId":"gsbp-149e9ac","styleAttributes":{"paddingLeft":["2vh"],"paddingRight":["2vh"],"paddingTop":["2vh"],"paddingBottom":["2vh"],"height":["100%"],"display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"fontSize":["4rem"],"fontWeight":["700"],"paddingLink_Extra":"all","marginBottom":["40px"]},"metadata":{"name":"Panel Content"}} -->
<div class="gsbp-149e9ac"><!-- wp:greenshift-blocks/element {"id":"gsbp-4c50341","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Home","className":"gs-twin-on-hover","localId":"gsbp-4c50341","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-4c50341">Home</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-f5e418d","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Services","className":"gs-twin-on-hover","localId":"gsbp-f5e418d","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-f5e418d">Services</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-2b80f92","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Portfolio","className":"gs-twin-on-hover","localId":"gsbp-2b80f92","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-2b80f92">Portfolio</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a2ef400","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Prices","className":"gs-twin-on-hover","localId":"gsbp-a2ef400","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-a2ef400">Prices</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-6e1f0a3","tag":"section","type":"inner","localId":"gsbp-6e1f0a3","styleAttributes":{"display":["flex"],"justifyContent":["center"],"paddingRight":[null,"min(3vw, 20px)"],"paddingLeft":[null,"min(3vw, 20px)"],"marginTop":["0px"],"marginBottom":["70px"],"paddingLink_Extra":"lr"},"isVariation":"contentcolumns"} -->
<section class="gsbp-6e1f0a3"><!-- wp:greenshift-blocks/element {"id":"gsbp-a7c74fc","type":"inner","localId":"gsbp-a7c74fc","styleAttributes":{"maxWidth":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 100%)"],"width":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px)"],"display":["flex"],"flexColumns_Extra":3,"flexWidths_Extra":{"desktop":{"name":"33/33/33","widths":[33.33,33.33,33.33]},"tablet":{"name":"33/33/33","widths":[33.33,33.33,33.33]},"mobile":{"name":"100/100/100","widths":[100,100,100]}},"columnGap":["25px"],"rowGap":["25px"],"flexWrap":["wrap"]},"isVariation":"contentarea","metadata":{"name":"Content Area"}} -->
<div class="gsbp-a7c74fc"><!-- wp:greenshift-blocks/element {"id":"gsbp-e858b4f","type":"inner","localId":"gsbp-e858b4f","styleAttributes":{"display":["flex"],"flexDirection":["column"],"alignItems":["center"],"rowGap":["25px"]}} -->
<div class="gsbp-e858b4f"><!-- wp:greenshift-blocks/element {"id":"gsbp-cbd22ba","dynamicGClasses":[{"value":"gs_scale_on_hover","type":"preset","label":"gs_scale_on_hover"}],"tag":"img","className":"gs_scale_on_hover","localId":"gsbp-cbd22ba","src":"https://placehold.co/400","alt":"","styleAttributes":{"maxWidth":["100%"]}} -->
<img class="gs_scale_on_hover gsbp-cbd22ba" src="https://placehold.co/400" alt="" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-aae8ac7","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_scale_on_hover","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-aae8ac7"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_scale_on_hover</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-770ea72","type":"inner","localId":"gsbp-770ea72","styleAttributes":{"display":["flex"],"flexDirection":["column"],"alignItems":["center"],"rowGap":["25px"]}} -->
<div class="gsbp-770ea72"><!-- wp:greenshift-blocks/element {"id":"gsbp-c432f5b","dynamicGClasses":[{"value":"gs_top_on_hover","type":"preset","label":"gs_top_on_hover"}],"tag":"img","className":"gs_top_on_hover","localId":"gsbp-c432f5b","src":"https://placehold.co/400","alt":"","styleAttributes":{"maxWidth":["100%"]}} -->
<img class="gs_top_on_hover gsbp-c432f5b" src="https://placehold.co/400" alt="" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-02a0f20","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_top_on_hover","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-02a0f20"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_top_on_hover</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-875ae35","type":"inner","localId":"gsbp-875ae35","styleAttributes":{"display":["flex"],"flexDirection":["column"],"rowGap":["25px"],"alignItems":["center"]}} -->
<div class="gsbp-875ae35"><!-- wp:greenshift-blocks/element {"id":"gsbp-7003eca","dynamicGClasses":[{"value":"gs_shadow_on_hover","type":"preset","label":"gs_shadow_on_hover"}],"tag":"img","animation":{"duration":800,"easing":"ease","type":"","onchild":false,"onsplit":false,"onscrub":false},"className":"gs_shadow_on_hover","localId":"gsbp-7003eca","src":"https://placehold.co/400","alt":"","styleAttributes":{"maxWidth":["100%"]}} -->
<img class="gs_shadow_on_hover gsbp-7003eca" src="https://placehold.co/400" alt="" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-4d08158","dynamicGClasses":[{"value":"label_for_class","type":"local","label":"label_for_class","localed":false,"css":".label_for_class{padding-top:2px;padding-bottom:4px;padding-right:12px;padding-left:12px;font-size:15px;display:inline-block;border-top-left-radius:2px;border-bottom-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-width:1px;border-style:solid;border-color:#0000000a;}","attributes":{"styleAttributes":{"paddingTop":["2px"],"paddingBottom":["4px"],"paddingRight":["12px"],"paddingLeft":["12px"],"fontSize":["15px"],"display":["inline-block"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["2px"],"borderBottomLeftRadius":["2px"],"borderTopRightRadius":["2px"],"borderBottomRightRadius":["2px"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#0000000a"],"borderCustom_Extra":false,"borderLink_Extra":false}},"originalID":"gsbp-cdcc5f8","originalBlock":"greenshift-blocks/element","selectors":[]},{"value":"gs_style_skeuomorphism","type":"preset","label":"gs_style_skeuomorphism"}],"textContent":"gs_shadow_on_hover","className":"label_for_class gs_style_skeuomorphism","localId":"gsbp-4d08158"} -->
<div class="label_for_class gs_style_skeuomorphism">gs_shadow_on_hover</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="animation-panel-and-animation-presets">Animation Panel and animation presets</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span style="box-sizing: border-box; margin: 0px; padding: 0px;">Greenshift has a powerful <a href="https://greenshiftwp.com/learning/animations/deep-overview-of-animation-panel/" target="_blank" rel="noopener">Animation System</a> and <a href="https://greenshiftwp.com/documentation/greenshift-extra/interaction-panels/" target="_blank" rel="noopener">Interaction Layers,</a> but for common animations, it's better to use presets.</span> They have some benefits. They are:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>Animations are Based on a variable system. So, you can add overriding via global styles to disable or change the animation on the whole site or in specific areas</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Balanced presets for consistent, smooth animations. We use only aesthetical useful animations</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Available not only for a current block but also for all children (stagger animations).</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>It can be used in combination with Slider blocks and Panel blocks. It will be triggered on active slide, for example</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="animation-presets-panel">Animation Presets Panel</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>All blocks have Animation panel</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5312,"width":"250px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/10/[email protected]" alt="" class="wp-image-5312" style="width:250px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It's easy to use. Just select the Animation type. You can also enable animation not to the current block but on direct child items. The option to add stagger delay can be helpful for adding some delay to each child. Animation panel has also Split text option if you enable Animation on child. This will split text by words and add animations to words with some delay on each word. Example:</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-362ced4","dynamicGClasses":[],"textContent":"Culpa commodo proident nostrud adipisicing sit ipsum pariatur enim dolor occaecat reprehenderit nostrud adipisicing commodo nisi amet excepteur minim elit consectetur laborum pariatur officia reprehenderit","animation":{"duration":800,"easing":"ease","type":"flip-up","onchild":true,"onsplit":true,"onscrub":false},"className":"","localId":"gsbp-362ced4","styleAttributes":{"fontSize":["2rem"],"fontWeight":["600"],"lineHeight":["2.9rem"]}} -->
<div data-aos="flip-up" data-aos-easing="ease" data-aos-duration="800" data-aos-split="true" class="gsbp-362ced4">Culpa commodo proident nostrud adipisicing sit ipsum pariatur enim dolor occaecat reprehenderit nostrud adipisicing commodo nisi amet excepteur minim elit consectetur laborum pariatur officia reprehenderit</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:paragraph -->
<p>Animation presets are based on CSS and have very small js library just to detect that object is in view.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Animations have few extra options. For example, you can enable stagger effect and option to apply animation to children instead of block itself.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-746ed19","dynamicGClasses":[],"type":"inner","animation":{"duration":800,"easing":"ease","type":"clip-down","onchild":true,"onsplit":false,"onscrub":false,"onchild_delay":true},"className":"","localId":"gsbp-746ed19","styleAttributes":{"display":["flex"],"flexColumns_Extra":3,"flexWidths_Extra":{"desktop":{"name":"33/33/33","widths":[33.33,33.33,33.33]},"tablet":{"name":"33/33/33","widths":[33.33,33.33,33.33]},"mobile":{"name":"33/33/33","widths":[33.33,33.33,33.33]}},"columnGap":["25px"],"rowGap":["25px"],"flexWrap":["wrap"]},"isVariation":"contentarea","metadata":{"name":"Content Area"}} -->
<div data-aos="clip-down" data-aos-easing="ease" data-aos-duration="800" class="gsbp-746ed19"><!-- wp:greenshift-blocks/element {"id":"gsbp-533e9e0","type":"inner","localId":"gsbp-533e9e0"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-a1f4f9e","dynamicGClasses":[{"value":"gs_scale_on_hover","type":"preset","label":"gs_scale_on_hover"}],"tag":"img","className":"gs_scale_on_hover","localId":"gsbp-a1f4f9e","src":"https://placehold.co/400","alt":"","styleAttributes":{"maxWidth":["100%"]}} -->
<img class="gs_scale_on_hover gsbp-a1f4f9e" src="https://placehold.co/400" alt="" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-3eecd0d","type":"inner","localId":"gsbp-3eecd0d"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-8368ec7","dynamicGClasses":[{"value":"gs_scale_on_hover","type":"preset","label":"gs_scale_on_hover"}],"tag":"img","className":"gs_scale_on_hover","localId":"gsbp-8368ec7","src":"https://placehold.co/400","alt":"","styleAttributes":{"maxWidth":["100%"]}} -->
<img class="gs_scale_on_hover gsbp-8368ec7" src="https://placehold.co/400" alt="" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-14e133d","type":"inner","localId":"gsbp-14e133d"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-d975fb7","dynamicGClasses":[{"value":"gs_scale_on_hover","type":"preset","label":"gs_scale_on_hover"}],"tag":"img","className":"gs_scale_on_hover","localId":"gsbp-d975fb7","src":"https://placehold.co/400","alt":"","styleAttributes":{"maxWidth":["100%"]}} -->
<img class="gs_scale_on_hover gsbp-d975fb7" src="https://placehold.co/400" alt="" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:paragraph -->
<p>There is also option "Animate On Parent Active class". When you use it, animation will be active once any of parent blocks will have ".active" class. This works also if you use element inside <a href="https://greenshiftwp.com/sliding-panels/" data-type="post" data-id="771">Sliding panels</a>, also in <a href="https://greenshiftwp.com/advanced-slider-and-carousel/" data-type="post" data-id="565">sliders</a>. See slider example</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/swiper {"id":"gsbp-1e7bfc0","slideHeight":[300,null,null,null]} -->
<div class="wp-block-greenshift-blocks-swiper gs-swiper gspb_slider-id-gsbp-1e7bfc0" style="position:relative"><div class="gs-swiper-init" data-slidesperview="1" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="400" data-loop="false" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="false" data-freemode="false" data-centered="false" data-autoplay="false" data-autodelay="4000" data-effect="" data-coverflowshadow="false"><div class="swiper"><div class="swiper-wrapper"><!-- wp:greenshift-blocks/swipe {"imageurl":"https://greenshiftwp.com/wp-content/uploads/2024/10/460632523_8616843655019565_9050092431129497590_n.jpg","imagealt":"","imageid":5239,"asImage":true,"id":"gsbp-332bff3"} -->
<div class="swiper-slide"><div class="wp-block-greenshift-blocks-swipe swiper-slide-inner gspb_sliderinner-id-gsbp-332bff3"><div class="slider-overlaybg"></div><div class="slider-image-wrapper"><img src="https://greenshiftwp.com/wp-content/uploads/2024/10/460632523_8616843655019565_9050092431129497590_n.jpg" alt="" loading="lazy" class="wp-image-5239" width="100%" height="100%"/></div><div class="slider-content-zone"><!-- wp:greenshift-blocks/element {"id":"gsbp-e0f7ace","dynamicGClasses":[],"type":"inner","animation":{"duration":800,"easing":"ease","type":"fade-up","onchild":true,"onsplit":false,"onscrub":false,"onchild_delay":true,"delay":null,"onchild_delay_time":400,"onclass_active":true},"className":"","localId":"gsbp-e0f7ace","styleAttributes":{"display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"rowGap":["10px"]}} -->
<div data-aos-easing="ease" data-aos-duration="800" class="gsbp-e0f7ace"><!-- wp:greenshift-blocks/element {"id":"gsbp-905664f","dynamicGClasses":[],"textContent":"Title of Slider First","className":"","localId":"gsbp-905664f","styleAttributes":{"textAlign":["center"],"color":["#ffffff"],"fontSize":["clamp(2.2rem, 4vw, 2.8rem)"],"lineHeight":["clamp(2.75rem, 4.7vw, 3.5rem)"],"fontWeight":["bold"]}} -->
<div class="gsbp-905664f">Title of Slider First</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-decee84","dynamicGClasses":[{"value":"gs-parent-hover","type":"preset","label":"gs-parent-hover"},{"value":"gs_button_w_icon","type":"local","label":"gs_button_w_icon","localed":false,"css":"","attributes":{},"originalBlock":"greenshift-blocks/element","selectors":[{"value":" svg","attributes":{"styleAttributes":{"maxHeight":["18px"]}},"css":".gs_button_w_icon svg{max-height:28px;}"}]}],"tag":"a","type":"inner","className":"wp-element-button gs-parent-hover gs_button_w_icon","localId":"gsbp-decee84","href":"#","styleAttributes":{"textDecoration":["none"],"display":["inline-block"],"position":["relative"],"overflow":["hidden"],"color_hover":["#ffffff"],"paddingTop":["8px"],"paddingBottom":["8px"],"paddingRight":["26px"],"paddingLeft":["26px"]},"isVariation":"buttonoverlay"} -->
<a class="wp-element-button gs-parent-hover gs_button_w_icon gsbp-decee84" href="#"><!-- wp:greenshift-blocks/element {"id":"gsbp-85ee789","tag":"span","type":"inner","localId":"gsbp-85ee789","styleAttributes":{"display":["flex"],"flexDirection":["row"],"alignItems":["center"],"position":["relative"],"zIndex":["1"]},"metadata":{"name":"Content Area"}} -->
<span class="gsbp-85ee789"><!-- wp:greenshift-blocks/element {"id":"gsbp-2d4d464","textContent":"Buy This Now!","tag":"span","localId":"gsbp-2d4d464"} -->
<span>Buy This Now!</span>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div></div></div>
<!-- /wp:greenshift-blocks/swipe -->

<!-- wp:greenshift-blocks/swipe {"imageurl":"https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp","imagealt":"","imageid":5169,"asImage":true,"id":"gsbp-8eea40f"} -->
<div class="swiper-slide"><div class="wp-block-greenshift-blocks-swipe swiper-slide-inner gspb_sliderinner-id-gsbp-8eea40f"><div class="slider-overlaybg"></div><div class="slider-image-wrapper"><img src="https://greenshiftwp.com/wp-content/uploads/2024/09/0_2-2.webp" alt="" loading="lazy" class="wp-image-5169" width="100%" height="100%"/></div><div class="slider-content-zone"><!-- wp:greenshift-blocks/element {"id":"gsbp-a5ae1a0","dynamicGClasses":[],"type":"inner","animation":{"duration":800,"easing":"ease","type":"fade-up","onchild":true,"onsplit":false,"onscrub":false,"onchild_delay":true,"delay":null,"onchild_delay_time":400,"onclass_active":true},"className":"","localId":"gsbp-a5ae1a0","styleAttributes":{"display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"rowGap":["10px"]}} -->
<div data-aos-easing="ease" data-aos-duration="800" class="gsbp-a5ae1a0"><!-- wp:greenshift-blocks/element {"id":"gsbp-29c906e","dynamicGClasses":[],"textContent":"Title of Slider Second","className":"","localId":"gsbp-29c906e","styleAttributes":{"textAlign":["center"],"color":["#ffffff"],"fontSize":["clamp(2.2rem, 4vw, 2.8rem)"],"lineHeight":["clamp(2.75rem, 4.7vw, 3.5rem)"],"fontWeight":["bold"]}} -->
<div class="gsbp-29c906e">Title of Slider Second</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-4321ae9","dynamicGClasses":[{"value":"gs-parent-hover","type":"preset","label":"gs-parent-hover"},{"value":"gs_button_w_icon","type":"local","label":"gs_button_w_icon","localed":false,"css":"","attributes":{},"originalBlock":"greenshift-blocks/element","selectors":[{"value":" svg","attributes":{"styleAttributes":{"maxHeight":["18px"]}},"css":".gs_button_w_icon svg{max-height:28px;}"}]}],"tag":"a","type":"inner","className":"wp-element-button gs-parent-hover gs_button_w_icon","localId":"gsbp-4321ae9","href":"#","styleAttributes":{"textDecoration":["none"],"display":["inline-block"],"position":["relative"],"overflow":["hidden"],"color_hover":["#ffffff"],"paddingTop":["8px"],"paddingBottom":["8px"],"paddingRight":["26px"],"paddingLeft":["26px"]},"isVariation":"buttonoverlay"} -->
<a class="wp-element-button gs-parent-hover gs_button_w_icon gsbp-4321ae9" href="#"><!-- wp:greenshift-blocks/element {"id":"gsbp-2de608f","tag":"span","type":"inner","localId":"gsbp-2de608f","styleAttributes":{"display":["flex"],"flexDirection":["row"],"alignItems":["center"],"position":["relative"],"zIndex":["1"]},"metadata":{"name":"Content Area"}} -->
<span class="gsbp-2de608f"><!-- wp:greenshift-blocks/element {"id":"gsbp-4b8e0b3","textContent":"Buy This Now!","tag":"span","localId":"gsbp-4b8e0b3"} -->
<span>Buy This Now!</span>
<!-- /wp:greenshift-blocks/element --></span>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:paragraph {"align":"center","placeholder":"Add content here or replace by custom block","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size"></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/swipe --></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-scrollbar"></div></div></div>
<!-- /wp:greenshift-blocks/swiper -->

<!-- wp:paragraph -->
<p>This can be used also inside Panel. Read more about <a href="https://greenshiftwp.com/sliding-panels/" data-type="post" data-id="771">Interactive sliding panels</a></p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-3082e69","type":"inner","localId":"gsbp-3082e69"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-4428292","dynamicGClasses":[{"value":"gs_padding_s","type":"preset","label":"gs_padding_s"}],"interactionLayers":[{"actions":[{"actionname":"panel","env":"no-action","selector":"#panel_gsbp-4428292"}],"env":"no-action","triggerData":{"trigger":"click"}}],"textContent":"Click to Show menu","tag":"span","className":"gs_padding_s","localId":"gsbp-4428292","styleAttributes":{"backgroundColor":["#000000"],"color":["#ffffff"]}} -->
<span data-gspbactions="[{"actions":[{"actionname":"panel","env":"no-action","selector":"#panel_gsbp-4428292"}],"env":"no-action","triggerData":{"trigger":"click"}}]" class="gs_padding_s gsbp-4428292">Click to Show menu</span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-3e9fbfe","anchor":"panel_gsbp-4428292","dynamicGClasses":[{"value":"control-panelgsbp-4428292","type":"local","label":"control-panelgsbp-4428292","localed":false,"css":"body.gspb-bodyfront .control-panelgsbp-4428292{position:fixed;top:0px;left:0px;bottom:0px;right:0px;}","attributes":{"styleAttributes":{"position":["fixed"],"top":["0px"],"left":["0px"],"bottom":["0px"],"right":["0px"]}},"originalBlock":"greenshift-blocks/element","selectors":[],"localedSpace":"front"}],"type":"inner","animation":{"duration":800,"easing":"ease","type":"clip-down","onclass_active":true},"className":"control-panelgsbp-4428292","localId":"gsbp-3e9fbfe","align":"full","styleAttributes":{"height":["100vh"],"maxWidth":["100%"],"backgroundColor":["#000"],"color":["#fff"]},"metadata":{"name":"Sliding Panel"}} -->
<div data-aos-easing="ease" data-aos-duration="800" class="control-panelgsbp-4428292 gsbp-3e9fbfe alignfull" id="panel_gsbp-4428292"><!-- wp:greenshift-blocks/element {"id":"gsbp-1e78b7e","type":"inner","animation":{"duration":800,"easing":"ease","type":"fade-up","onchild":true,"onchild_delay":true,"onclass_active":true,"delay":300},"localId":"gsbp-1e78b7e","styleAttributes":{"paddingLeft":["5vw"],"paddingRight":["5vw"],"paddingTop":["5vh"],"paddingBottom":["5vh"],"height":["100%"],"display":["flex"],"flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"],"fontSize":["4rem"],"fontWeight":["700"]},"metadata":{"name":"Panel Content"}} -->
<div data-aos-delay="300" data-aos-easing="ease" data-aos-duration="800" class="gsbp-1e78b7e"><!-- wp:greenshift-blocks/element {"id":"gsbp-7fd7ab1","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Home","className":"gs-twin-on-hover","localId":"gsbp-7fd7ab1","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-7fd7ab1">Home</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-d80453c","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Services","className":"gs-twin-on-hover","localId":"gsbp-d80453c","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-d80453c">Services</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-5f93e38","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Portfolio","className":"gs-twin-on-hover","localId":"gsbp-5f93e38","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-5f93e38">Portfolio</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-f5e83f7","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Prices","className":"gs-twin-on-hover","localId":"gsbp-f5e83f7","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-f5e83f7">Prices</div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-d166c51","dynamicGClasses":[{"value":"gs-twin-on-hover","type":"preset","label":"gs-twin-on-hover"}],"textContent":"Contacts","className":"gs-twin-on-hover","localId":"gsbp-d166c51","styleAttributes":{"cursor":["pointer"]}} -->
<div class="gs-twin-on-hover gsbp-d166c51">Contacts</div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="used-variables">Used variables</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>All presets use common variable system, so you can easily overwrite all values globally</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="hover-variables">Hover variables</h3>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-hover-transition</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Use it if you need to change transition for hover effects. You must put transitions value, example</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>body{--gs-root-hover-transition: all 0.5s ease-in !important}</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-hover-timing</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>You can also change only timing of hover animation. Default is 0.5s</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-hover-easing</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>You can change only easing. Default is cubic-bezier(0.42, 0, 0.58, 1)</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-hover-transform</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Use if you want to change effect of hover. So, if you use </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>body{--gs-root-hover-transform: translateY(-100px)}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This will change all on hover transform effect to be -100px</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="motion-variables">Motion Variables</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>"animation" prefix is used for Animation panel presets</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-animation-transition</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>General variable to replace motion transitions. Example</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>body{--gs-root-animation-transition: all 1.3s ease-in-out !important}</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-animation-timing</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Use to change time of motion. Default is 0.9s</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-animation-easing</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Use to overwrite easing, Default is cubic-bezier(0.42, 0, 0.58, 1)</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-animation-clip-path</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If you use clip path effect, you can overwrite them in this variable</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>--gs-root-animation-transform</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If you used any of transform related motions, you can overwrite them here, example</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>body{ --gs-root-animation-transform: rotateX(-45deg) translateY(-30px) !important}</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="effects-panel-and-transition-panel">Effects panel and Transition Panel</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you want to dive in making custom animations, you must be familiar with CSS Animations and CSS transitions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I recommend next tutorials</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>MDN web docs about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation">animation CSS</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Updated <a href="https://developer.chrome.com/docs/css-ui/scroll-driven-animations">Timeline API for CSS</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>W3 <a href="https://www.w3schools.com/css/css3_transitions.asp">Css transitions explanation</a></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>To make your life easier, Greenshift has a lot of ready presets for CSS transitions and Animations. But in the same time, you can use any values. You can find panels in <a href="https://greenshiftwp.com/element-tag-block/" data-type="post" data-id="4576">Element block</a> in Local styles and in <a href="https://greenshiftwp.com/documentation/greenshift-extra/global-and-local-class-system/" data-type="documentation" data-id="3786">class system</a></p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-525b61d","type":"inner","localId":"gsbp-525b61d","styleAttributes":{"display":["flex"],"flexDirection":["row"],"columnGap":["25px"]}} -->
<div class="gsbp-525b61d"><!-- wp:greenshift-blocks/element {"id":"gsbp-36ef451","tag":"img","localId":"gsbp-36ef451","src":"https://greenshiftwp.com/wp-content/uploads/2024/10/effects.jpg","alt":"","mediaid":5367,"originalWidth":271,"originalHeight":640,"styleAttributes":{"width":["300px"]}} -->
<img class="gsbp-36ef451" src="https://greenshiftwp.com/wp-content/uploads/2024/10/effects.jpg" alt="" width="271" height="640" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-4929486","tag":"img","localId":"gsbp-4929486","src":"https://greenshiftwp.com/wp-content/uploads/2024/10/transition.jpg","alt":"","mediaid":5368,"originalWidth":544,"originalHeight":1164,"styleAttributes":{"width":["300px"],"height":["auto"]}} -->
<img class="gsbp-4929486" src="https://greenshiftwp.com/wp-content/uploads/2024/10/transition.jpg" alt="" width="544" height="1164" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:paragraph -->
<p>There are some ready presets for animation, to enable them, hover over "+" icon.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Check more about Animation Effects presets</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-e35445d","src":"https://youtu.be/fc5uuHN3lkI","provider":"youtube","poster":"https://i.ytimg.com/vi/fc5uuHN3lkI/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0.25,"overlayIcon":true,"postDate":"2024-10-09T12:38:54+00:00","playiconBg":"#00ed6c","bgColor":"#000000","bgGradient":null} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-e35445d" id="gs-video-gsbp-e35445d"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://youtu.be/fc5uuHN3lkI" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="false" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/fc5uuHN3lkI/maxresdefault.jpg)" data-type="youtube" data-lightbox="false"><div class="gs-play-icon" style="background-color:#00ed6c"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #00ed6c;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #00ed6c;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#000000;background-image:;opacity:0.25"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->
«
»