Bricksmotion Components
  • Getting Started
  • Setup
    • Where is my license key?
    • Activate you license within Bricksforge
  • Using components
    • Bricksforge One-Click
    • Bricks Structure
    • Activate "Event Panel"
    • Manual Importing Timelines and Events
    • Locked Classes
    • Reassign Timelines
    • Loading Conditions
  • Components
    • HEROES
      • Hero #1
      • Hero #2
      • Hero #3
      • Hero #4
      • Hero #5
      • Hero #6
      • Hero #7
      • Hero #8
      • Hero #9
      • Hero #10
    • SCROLL SCENES
      • Sticky Sections #1
      • Vertical Scroll #1
      • Scroll Scene #1
      • Scroll Scene #2
      • Scroll Scene #3
      • Scroll Scene #4
      • Scroll Scene #6
      • Scroll Scene #7
      • Scroll Scene #8
      • Scroll Scene #9
    • BUTTONS
      • Button #1
      • Button #2
      • Button #3
      • Button #4
      • Button #5
      • Button #6
      • Button #7
    • TABS
      • Tabs #3
      • Tabs #4
    • PROJECTS
      • Projects #1
      • Projects #2
      • Projects #3
      • Projects #4
      • Projects #5
      • Projects #6
      • Projects #7
    • CTA
      • CTA #1
      • CTA #2
    • CARDS
      • Cards #1
      • Cards #2
    • MENUS
      • Bottom Nav #1
      • Mega Menu #1
      • Full Screen Menu #2
      • Full Screen Menu #3
    • CUSTOM CURSORS
      • Custom Cursor #1
    • LOADING SCREENS
      • Loading Screen #1
      • Loading Screen #2
      • Loading Screen #3
    • TEXT
      • Text Hover #1
      • Split Text #2
    • IMAGE
      • Image Tilt #1
      • Image Reveal #1
      • Image Reveal #2
      • Image Reveal #3
    • PROGRESS BARS
      • Progress Bar #1
      • Progress Bar #2
Powered by GitBook
On this page
  • Component Structure
  • Animation Structure
  • Key Features
  1. Components
  2. TEXT

Split Text #2

Component Structure

  • ST2 SB TRIGGER (Section): This serves as the scrollable trigger area for the animation, extending to 300vh in height with the st2-sb__trigger class applied for styling and to identify the trigger zone.

  • Within the ST2 SB TRIGGER, a Div element is placed to center the text container vertically within the viewport, making use of a flex display to align its child container.

    • Container: Directly holds the Text-Basic element, ensuring it's properly positioned within the vertical center of the section.

      • ST2 SB TARGET (Text-Basic): The text to be animated, split into lines as the user scrolls. The st2-sb__target class applies specific styles and animations, including a dynamic background clip effect that reveals the text in a unique manner as the page scrolls.

Animation Structure

ST2 - SCRUB - ANIMATION

This timeline consists of animations that are triggered by scrolling within the .st2-sb__trigger section:

  1. Text Split Animation: Splits the text into lines (splitTextType set to "lines"), enabling the animation to target each line individually for a more detailed and dynamic effect as the user scrolls.

  2. Background Width Animation: Adjusts the --bg-width custom property from 0% to 100% over the duration of the scroll through the trigger area. This effect creates a revealing animation for the text, where the text color changes as the background "fills in" behind it. The .st2-sb__target .brf-split-lines selector indicates that this animation targets the background of the split lines, with a staggered delay (staggerValue of 0.5) to enhance the visual impact.

The scroll-triggered animation is set to pin the ST2 SB TRIGGER section, creating a fixed position effect for the duration of the scroll through this section. The scrub property is enabled with a scrubValue of 2, ensuring a smooth transition of the animation tied directly to the scroll speed and position.

Key Features

  • Custom CSS for Split Text: The st2-sb__target class includes custom CSS that implements the background clip effect on the text, dynamically controlled through the --bg-width variable adjusted by the scroll animation.

PreviousText Hover #1NextIMAGE

Last updated 1 year ago