1.0.6 • Published 3 years ago
wio-typed v1.0.6
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-typedmandatory to enable typed.js on the element | should be set astruedata-wio-typed-speedtype speed in milliseconds |numberdata-wio-typed-start-delaytime before typing starts in milliseconds |numberdata-wio-typed-back-speedbackspacing speed in milliseconds |numberdata-wio-typed-back-delaytime before backspacing in milliseconds |numberdata-wio-typed-smart-backspaceonly backspace what doesn't match the previous string |trueorfalsedata-wio-typed-fade-outFade out instead of backspace |trueorfalsedata-wio-typed-fade-out-classcss class for fade animation |stringdata-wio-typed-fade-out-delayFade out delay in milliseconds |numberdata-wio-typed-looploop typing animation |-1for infinite loop,0for no loop or any othernumberfor loop countdata-wio-typed-cursorfor custom cursor |nonefor no cursor, add any otherstringto show as cursor example|for pipe cursordata-wio-typed-auto-cursor-cssinsert CSS for cursor and fadeOut into HTML |trueorfalsedata-wio-typed-content-type'html' or 'text' for plaintextdata-wio-typed-enter-viewtrigger typing on element is visible on screendata-wio-typed-enter-view-offsetA 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). |0to1data-wio-typed-enter-view-onceWhether or not to trigger the animation just once. |trueorfalse
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