Skip to Content
Scrollsequence v2 🎉 Alpha dev preview 🎉
V2Blocks Container

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.

Last updated on