Skip to main content

Motion & Effect Blocks

Motion and effect blocks add movement, live numbers, and interactive widgets to your pages: scrolling ribbons, typing headlines, counters, progress rings, and before/after sliders. Ronin includes 10 motion and effect blocks. Several of them also share the padding and animation controls described in Block Settings.

Marquee​

block-marquee.webp

The Marquee block scrolls a ribbon of text and icons continuously across the container.

Settings:

  • Spacing between items: Gap between repeated items, from 5 to 50 px.
  • Marquee speed: Scroll speed from 1 (slow) to 10 (fast).
  • Pause when hovered: Stop the ribbon while the pointer is over it.
  • Motion direction: Forward or Backward.
  • Padding: Device-specific padding around the ribbon.
  • Child blocks: Add Text and Icon blocks inside the marquee; they repeat to fill the width.

Typing​

block-typing.webp

The Typing block animates a headline that types, slides, or morphs through a list of phrases.

Settings:

  • Tag name: The HTML tag (h1-h6 or div) for SEO and hierarchy.
  • Enable custom color and Color typing: Color only the animated phrase.
  • Content before / Content after: Static text shown before and after the animated phrase.
  • Array content typing: The list of phrases to cycle through, entered as an array such as ['Content 1', 'Content 2', 'Content 3'].
  • Typing effect: Typing, Slide, or Goo.
  • Delay time between text paragraphs: Pause between phrases, in milliseconds.
  • Transition effect time: Length of each transition, in milliseconds.

Circular text​

block-circular-text.webp

The Circular text block wraps text around a slowly rotating circle, a popular badge for stickers and stamps.

Settings:

  • Text: The text placed around the circle.
  • Circular box: Text color, Font size (px), Letter spacing (0-20), and Box size of the circle, plus Padding (0-100) between the text and the ring.
  • Stroke color and Stroke width: An optional ring drawn inside the text, from 0 to 10 px wide.
  • Speed: One full rotation every 0 to 15 seconds.
  • Rotate direction: Clockwise or Counterclockwise.

Circle bar​

block-circle-bar.webp

The Circle bar block draws an animated circular progress ring, ideal for percentages and statistics.

Settings:

  • Circle value: The percentage to fill, from 0 to 100.
  • Animation duration (ms): How long the ring takes to fill when it scrolls into view.
  • Stroke width (px): Thickness of the ring.
  • Size (px): Diameter of the circle.
  • Track color: Color of the unfilled ring.
  • Thumb color: Color of the filled progress.
  • Padding: Device-specific padding.

Count down​

block-countdown.webp

The Count down block displays a timer counting down to a fixed date or running an evergreen countdown for each visitor.

Settings:

  • Timer mode: Fixed date or Evergreen.
  • Time: The target date and time for a fixed countdown, in the format 2025-10-30 00:00.
  • Evergreen unit: Days, Hours, Minutes, or Seconds.
  • Evergreen value: How many units the evergreen timer runs before it ends.
  • Padding: Device-specific padding.

Count to​

block-countto.webp

The Count to block animates a number counting from a start value to an end value, useful for stats and impact figures.

Settings:

  • Start value and End value: The numbers the counter animates between.
  • Duration (ms): Length of the counting animation.
  • Time delay (ms): Wait before the counter starts once it is in view.
  • Typography: Preset (Default, Paragraph, Heading 1-6, or Custom). Custom exposes font, size, italic, weight, line height, letter spacing, case, and wrap.
  • Color: Text color from the scheme, Transparent, or a custom color, plus opacity.
  • Padding: Device-specific padding.

Scroll to​

block-scroll-to.webp

The Scroll to block renders a button that smoothly scrolls the page to a target element, such as back to the top.

Settings:

  • Scroll to target: A CSS class or ID of the element to scroll to, for example .footer or #footer. Use #top to scroll to the top of the page.
  • Button text: The label of the button.
  • Icon: None, Arrow up, Arrow down, Chevron up, or Chevron down.
  • Icon size: Size of the icon in pixels.

Image comparison​

block-image-comparison.webp

The Image comparison block shows two images with a draggable handle so visitors can reveal a before and after view.

Settings:

  • Image before: The image shown on the left of the handle.
  • Image after: The image shown on the right of the handle.
  • Child blocks: Two Image comparison label blocks, one for each side, are created automatically.

Image comparison label​

block-image-comparison-label.webp

The Image comparison label block positions the "Before" or "After" badge over its image.

Settings:

  • Label position: Top, Center, or Bottom.

block-carousel-navigation.webp

The Carousel navigation block adds custom previous and next arrows to a Layout block set to the Carousel type.

Settings:

  • Navigation: Disabled navigation on mobile, Carousel navigation position (Outside or Inside the carousel), and Navigation alignments (Left, Center, Right, Space between, or Space around) for outside arrows.
  • Icon: Icon style (Custom or Style 1), Icon type (Icon or Image), the Icon itself, Icon size, Icon color with opacity, or an uploaded Image with Width and Height.
  • Animation: Global preset, custom effect and duration, or none.
  • Appearance: Color scheme, background (color, gradient, or image with overlay), corner radius, and border for custom-styled arrows.
  • Padding: Device-specific padding.
  • Background: The arrow Background color when the icon style is Style 1.

block-carousel-pagination.webp

The Carousel pagination block adds dot or bar indicators to a Layout block set to the Carousel type.

Settings:

  • Pagination style: Default, Style 1, Style 2, or Custom.
  • Alignments: Left, center, or right.
  • Button style: Circle or Square dots.
  • Pagination color: Button color, Button active color, and the Pagination background behind the dots (custom style).
  • Pagination button size: Pagination button width and height from 1 to 40 px (custom style).
  • Pagination button active size: A different width and height for the active dot (custom style).
  • Pagination button border style: Inside or Outside (Style 2).
Using the carousel blocks

A Layout block in Carousel mode has its own navigation and pagination controls with default styling. Add a Carousel navigation or Carousel pagination block to the same section when you want to style the controls yourself or place them away from the carousel, for example above the slides next to a heading. Turn off the Layout's built-in arrows and pagination so both do not appear at once.