Animate Elements On Reveal – t-scroll

Category: Animation , Javascript , Recommended | July 13, 2018
Author: crazychicken
Views Total: 3,318
Official Page: Go to website
Last Update: July 13, 2018
License: MIT

Preview:

Animate Elements On Reveal – t-scroll

Description:

The t-scroll JavaScript library lets you apply more than 45 pretty cool animations to any elements when they appear in the viewport.

How to use it:

Install it via NPM and import the t-scroll into your web project.

$ npm install t-scroll

Or include the t-scroll’s JavaScript and CSS files on the html page as this:

<link rel="stylesheet" href="/path/to/t-scroll.min.css">
<script src="/path/to/t-scroll.min.js"></script>

Add an animation of your choice to the element using CSS class. All available animations:

  1. bounceIn
  2. bounceOut
  3. bounceUp
  4. bounceDown
  5. bounceLeft
  6. bounceRight
  7. fadeIn
  8. fadeUp
  9. fadeDown
  10. fadeLeft
  11. fadeRight
  12. fadeUpBig
  13. fadeDownBig
  14. fadeLeftBig
  15. fadeRightBig
  16. flip
  17. flipX
  18. flipY
  19. lightSpeedUp
  20. lightSpeedRight
  21. lightSpeedDown
  22. lightSpeedLeft
  23. rollUp
  24. rollRight
  25. rollDown
  26. rollLeft
  27. rotate
  28. rotateUpLeft
  29. rotateUpRight
  30. rotateDownLeft
  31. rotateDownRight
  32. slideUp
  33. slideDown
  34. slideLeft
  35. slideRight
  36. zoomIn
  37. zoomInUp
  38. zoomInLeft
  39. zoomInDown
  40. zoomInRight
  41. zoomOut
  42. zoomOutUp
  43. zoomOutLeft
  44. zoomOutDown
  45. zoomOutRight
<div class="zoomIn">Element 1</div>
<div class="bounceIn">Element 2</div>

Initialize the t-scroll to animate the elements when they come into view.

Tu.t_scroll({
  't_element': '.bounceIn'
})

Sometimes you might need to set a timeout to the animation:

<div class="bounceIn" t_show="1">Element</div>

All possible options which can be passed during init.

  • t_elemet: target element
  • t_animate: animation type
  • t_show: timeout in seconds
  • t_position: Default: 0
  • t_delay: delay time
  • t_infinite: loop animations?
  • t_function: linear ease ease-in ease-out ease-in-out step-start step-end initial inherit

Changelog:

  • v1.1.10 (07/13/2018)

    update fix incompatible with IE

You Might Be Interested In:


5 thoughts on “Animate Elements On Reveal – t-scroll

  1. tutnm

    i think you need update demo view, i feel it simple …!

    Reply
  2. trantam

    i think you can update layout demo, i need clear and detail more than…

    Reply

Leave a Reply