Release notes

Check the news and updates

v2.0.1

Jun 21, 2021

Updates

  • Docs: Control the Slider by JavaScript with slideTo method

Fixes

  • inview trigger for effects such as pull.up now runs immediately when the original element position becomes visible in the viewport. So even if the element is far under its original position (example: inview:pull.up(500px)), it will trigger the transition based on its original position (without taking 500px to count)

v2.0.0

Jun 1, 2021

New

  • Redesigned engine

    V2 now uses MutationObserver to process the elements and generate the styles dynamically. This is done before the page is rendered (painted), so the static styles are applied immediately without any flashing.

  • Drastically reduced stylesheet size

    Because most of the CSS styles are generated dynamically, we could significantly reduce the CSS file size. The toruskit.min.css in v2 that includes effects and loops without Bootstrap has now 38kb vs 110kb in v1. We have also reduced the size for JavaScript files.

  • Improved performance

    We’ve ditched almost every method that forces the layout/reflow which was used to calculate the element bounds and position. Now they are all replaced with the asynchronous IntersectionObserver that is fast and has minimal impact on performance.

  • Class actions

    Class actions is a completely new tool that helps you to make dynamic class changes without any JavaScript. Based on various triggers such as click, hover, scroll, or timeout you can add, remove or toggle one or multiple classes on one or multiple elements.

  • Redesigned slider

    Completely redesigned slider source code that also bring a performance boost.

Changes

  • Replaced data-tor, data-tor-loop, data-tor-position, data-tor-push with a single data-tor attribute
  • Replaced data-tor-trigger, with a data-tor-parent attribute
  • Parent trigger actions are now defined with a <trigger>(p): instead of <trigger>-T:
  • Added support for percentage for some values such as opacity(10%) or scale.from(50%)
  • Clusters are now defined by the brackets [] instead of curly braces {}
  • Time values such as delay and wait has to defined in s or ms now
  • Loops are defined with the loop: trigger. Example: data-tor="loop:spin"
  • toruskit.js or toruskit.min.js files needs to be added to <head>. Read More
  • Change to syntax for some directional effects such as clip. Now uses clip(right) instead of clip.right
  • New syntax for effect options. Now it’s <effect>(<value>, {<options>}) instead of <effect>(<value>)__(<options>)
  • data-tor-push="<direction>(<value>)" now uses data-tor="shift.<direction>(<value>)" syntax.
  • data-tor-position="<position>(<value>)" now uses data-tor="place.<position>(<value>)" syntax.
  • You can now define a pause in a loop

Updates

  • Updated to Bootstrap 5.0.1

Removed

  • .btn-depth has been deprecated
  • Bootstrap Carousel styles has been deprecated in favor of Torus Kit Slider