Oxyfolio

Getting started

Introduction Installation

Texts

3D Swap Hover Arc Title Blade Reveal Blended Hover Blur Reading Blur Reveal Counter Decode Hover Decode Reveal Dynamic Copyright Fluid Gradient Highlight Hover Letter Launcher Looping Lines Looping Lines v2 Mousefill Title Proximity Hover Random Letters Scroll Reading Shading Lines Title Swap Hover Swap Reading Text Shimmer Twist Reveal Typed Underline Hover Unfold Hover Unfold Reveal

Buttons

Anyside Button Arrow Button Arrow Button v2 Arrow Button v3 Arrow Icon Crystal Button Glowing Button Layer Button Marquee Button Marquee Button v2 Mask Button Modal Button Prism Button Rainbow Button Ripple Button Ripple Button v2 Ripple Button v3 Shiny Button

Menus

Burger Circular Menu Dock Drawer Dropdown Dropdown megaMenu Dynamic Island Expanding Menu Focus Nav Gooey Nav Morphing Nav Multi OffCanvas Menu OffCanvas Menu Overlay Menu Sticky Header

Medias

Before/After Image Image Hotspots Image Reveal Parallax

Cursors

Cursor Cursor Slide Cursor Trail Designer Cursor

Sliders

Infinite Slider Parallax Slider

Backgrounds

Border Beam Fluids Interactive Lines Particles Physics Spotlight Spotlight v2 Tiles Tiles v2

Cores

Accordion Back to Top Click and Copy Decode Card Distorsion Tabs Flipbox Glitchy Glowing Card Horizontal Marquee Interactive Divider Inverted Corner Mask Hover Motion Divider Observer Parallax Hover Pixels Shimmer Card Progress Bar Progress Bar v2 QR Code Scrollbar Smooth Scroll Stacking Cards Tabs Tippy Toast Toolteam Vertical Marquee
Jose Tamu
April 9, 2025
/
Beginner

Looping Lines

  • My First Word
  • My Second Word
  • My Third Word
  • My Fourth Word
  • My Fifth Word

Content tab

Content group

Items: the lines and their content to be included at Looping Lines element have to be set here.

Lines group

Line height: the height applied to each line.
Lines to show: the number of lines to be displayed. The demo shows 3.
Align: where the lines should stick to. Left, Center or Right.
Fade: to include a blur fade at top and bottom.
Fade color: if fade is enabled, it's color.

Animation group

Duration
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Style tab

There are 3 groups available to style Looping lines: Margin, Padding and Typography. If you need to apply additional styles, you can do so at the Settings Tab.