Container Block
Container Block is a wrapper that gives context to the animations and allows various operations to the nested block. The idea is to prevent polluting the whole editor and extend all blocks in the Gutenberg editor, so this Container Block acts as a wrapper co isolate what this plugin changes to this container.
All blocks that are nested inside Container Block are extended with Content Animation.
Content Animation
Content Animation allows attaching animations to the following events
- onLoad
- onClick
- onHover
- onClick
- onCustom_event
Keyframes
Keyframes are the core of Scrollsequence v2 content animation, allowing you to add and configure to various block elements within your scroll sequence.
Keyframes can be added to any block inside the Container Block, and they can be configured to animate any CSS property, such as opacity
, transform
, background-color
, or special properties like autoAlpha
or xPercent
.
Keyframes are GSAP animations, and you can use the GSAP syntax to configure them. See the GSAP Keyframe documentation  for more details on how to use GSAP animations.
Viewport Block
Viewport block can only be nested directly in the container block. It has two variations
1. Sticky Viewport Block
Content placed inside sticky viewport block will behave in a similar way as CSS position:sticky , if your theme is using overflow:hidden
which breaks the behavior of position:sticky
, then there is an option to use Javascript pinning to pin the block to the viewport
2. Fixed Viewport Block
Fixes the contents of the block to the viewport and uses CSS clip path  to clip the bottom or top of the container to make it look as if it is being revealed by scrolling
Content inside fixed viewport block is aligned to the center and the common use case is to animate the autoAlpha
property on it to show and hide it on scroll.