0.5.4 • Published 2 years ago
tween-sass v0.5.4
tween-sass
tween-sass is a SASS single code-line mixin that delivers the possibility for chaining multiple tween components to one tween animation
Usage
- Install tween-sass package
npm install tween-sass --save-dev
- Define mixin on your SASS file
@use "tween-sass" as *
- Define your animation tweening chain on your element
- Run animation with adding ".is--tweening" class to your parent or root element
Custom Configuration
@use "tween-sass" as * with ($parent: "#flyTarget", $activeClass: ".flyContentActive")
Tween Components
There is an overview of all existing components on http://projects.bminusg.de/tween-sass
@use "tween-sass" as *
#example
@include tween(slideInLeft, wait 2.5s, slideOutRight)
animation-iteration-count: infinite
Ideation
- Use tween-group(tween, index, length) mixin for a dynamic offset calculating depending of multiple tweens