1.0.6 • Published 2 years ago

wio-typed v1.0.6

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Typed.js Attributes for Webflow by Workshore Team

Core Features

  • Configure any element with attributes
  • Trigger interaction when the element enters into the view (similar to scroll into view)

Setup

Add script

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wio-typed@latest/build/index.min.js" />

Attributes

  • data-wio-typed mandatory to enable typed.js on the element | should be set as true
  • data-wio-typed-speed type speed in milliseconds | number
  • data-wio-typed-start-delay time before typing starts in milliseconds | number
  • data-wio-typed-back-speed backspacing speed in milliseconds | number
  • data-wio-typed-back-delay time before backspacing in milliseconds | number
  • data-wio-typed-smart-backspace only backspace what doesn't match the previous string | true or false
  • data-wio-typed-fade-out Fade out instead of backspace | true or false
  • data-wio-typed-fade-out-class css class for fade animation | string
  • data-wio-typed-fade-out-delay Fade out delay in milliseconds | number
  • data-wio-typed-loop loop typing animation | -1 for infinite loop, 0 for no loop or any other number for loop count
  • data-wio-typed-cursor for custom cursor | none for no cursor, add any other string to show as cursor example | for pipe cursor
  • data-wio-typed-auto-cursor-css insert CSS for cursor and fadeOut into HTML | true or false
  • data-wio-typed-content-type 'html' or 'text' for plaintext
  • data-wio-typed-enter-view trigger typing on element is visible on screen
  • data-wio-typed-enter-view-offset A value from 0 to 1 of how far from the bottom of the viewport to offset the trigger by. 0 = top of element crosses bottom of viewport (enters screen from bottom), 1 = top of element crosses top of viewport (exits screen top). | 0 to 1
  • data-wio-typed-enter-view-once Whether or not to trigger the animation just once. | true or false

Fix : Text is Visible before typing

add following css style to head

<style>
.wio-typed-reset{
  opacity: 0;
}
</style>

then add wio-typed-reset class to your element

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago