riot/animore

Riot tags animations hooks

Simple and elegant component-based UI library

Custom components • Concise syntax • Simple API • Tiny Size

Riot brings custom components to all modern browsers. It is designed to offer you everything you wished the native web components API provided.

Tag definition

<timer>
  <p>Seconds Elapsed: { state.time }</p>

  <script>
    export default {
      tick() {
        this.update({ time: ++this.state.time })
      },
      onBeforeMount(props) {
        // create the component initial state
        this.state = {
          time: props.start,
        }

        this.timer = setInterval(this.tick, 1000)
      },
      onUnmounted() {
        clearInterval(this.timer)
      },
    }
  </script>
</timer>

Open this example on Plunker

Mounting

// mount the timer with its initial props
riot.mount('timer', { start: 0 })

Nesting

Custom components let you build complex views with HTML.

<timetable>
  <timer start="0"></timer>
  <timer start="10"></timer>
  <timer start="20"></timer>
</timetable>

HTML syntax is the de facto language on the web and it's designed for building user interfaces. The syntax is explicit, nesting is inherent to the language and attributes offer a clean way to provide options for custom tags.

Performant and predictable

• Absolutely the smallest possible amount of DOM updates and reflows.
• Fast expressions bindings instead of virtual DOM memory performance issues and drawbacks.
• One way data flow: updates and unmounts are propagated downwards from parent to children.
• No "magic" or "smart" reactive properties or hooks
• Expressions are pre-compiled and cached for high performance.
• Lifecycle methods for more control.

Close to standards

• No proprietary event system.
• Future proof thanks to the javascript module syntax.
• The rendered DOM can be freely manipulated with other tools.
• No extra HTML root elements, data- attributes or fancy custom attributes.
• No new syntax to learn.
• Plays well with any frontend framework.

Use your dearest language and tools

• Create components with CoffeeScript, Jade, LiveScript, Typescript, ES6 or any pre-processor you want.
• Build with @riotjs/cli, webpack, Rollup, parcel, Browserify.
• Test however you like; you can load your riot tags directly in node

Powerful and modular ecosystem

The Riot.js ecosystem is completely modular, it's designed to let you pick only the stuff you really need:

• @riotjs/cli - CLI to locally compile your tags to javascript
• @riotjs/ssr - Super simple server side rendering
• @riotjs/hydrate - Hydration strategy for your SPA
• @riotjs/route - Isomorphic router
• @riotjs/lazy - Lazy components loader
• @riotjs/hot-reload - Live reload plugin
• @riotjs/compiler - Advanced tags compiler
• @riotjs/parser - HTML parser
• @riotjs/dom-bindings - Expressions based template engine
• @riotjs/custom-elements - native custom elements implementation

CDN hosting

• unpkg
• jsDelivr
• cdnjs

How to contribute

If you are reading this it's already a good sign and I am thankful for it! I try my best working as much as I can on riot but your help is always appreciated.

If you want to contribute to riot helping the project maintenance please check first the list of open issues to understand whether there is a task where you could help.

Riot is mainly developed on UNIX systems so you will be able to run all the commands necessary to build and test the library using our Makefile. If you are on a Microsoft machine it could be harder to set up your development environment properly.

Following the steps below you should be able to properly submit your patch to the project

1) Clone the repo and browse to the riot folder

git clone [email protected]:riot/riot.git && cd riot

2) Set up your git branch

git checkout -b feature/my-awesome-patch

3) Install the npm dependencies

npm i

4) Build and test riot using the Makefile

# To build and test riot
$ make riot

# To build without testing
$ make raw

5) Pull request only against the dev branch making sure you have read our pull request template

6) Be patient

Credits

Riot is actively maintained with ❤️ by:

Gianluca Guarini

Many thanks to all smart people from all over the world who helped improving it.

Official Website

https://riot.js.org

Backers

Support us with a monthly donation and help us continue our activities. Become a backer

Sponsors

Become a sponsor to get your logo on our README. Become a sponsor

Thanks

Special thanks to Browserstack for their support

animore's Issues

Animejs callbacks

Callbacks

You can use all the animation callbacks provided by anime

Can we have an example of how you do this within a tag or mixin? BTW, AnimeJS is awesome. Good pick for Riot. Really small and concise, as per usual.

Riot v4

Hi Gianluca,

I tried, but failed. Is riot-animore isn't compatible with riotjs v4 yet?

Thank you

Bower support

Hi,
Could you please consider adding animore to bower repo ?

Flicker when update and unmount used together

@GianlucaGuarini this is great, I only noticed this right now. It's exactly what I was looking for in a Riot implementation. Thanks!

Two questions:

• why did you implement it as a tag instead of a mixin?
• is there any way to prevent the flicker/jerky movement when deleting (unmounting) an item, when update is also specified? Perhaps this is caused by the flipr effect, not correctly taking the height or something? Or perhaps an easing issue? Without any update specified, it works nicely.

Please see this adapted plunkr: http://plnkr.co/edit/dvwKmpxTz3noUAbfyZcV?p=preview

Motion on unmount could be a bit more fluid in general (even without update), and with your original plunkr the animations became slower and slower when adding more items (20+) on my iPad (Pro) this morning. I haven't tested my updated plunkr, but I suspect the same to happen (edit: strangely enough, my plunkr appears pretty smooth compared to yours).

I wonder if this is on Anime or Riot's end of things?

update not animating

I have a Riot tag defined like this:

<recent-search-item>
  <button 
    data-is="animore"
    update={{ 
      duration: 500,
      easing: 'linear',
    }}
    mount={{
      duration: 500,
      translateX: [50, 0],
      offset: parent.isMounted ? 0 : 50
    }}
  >
    {opts.text}
  </button>
</recent-search-item>

It is used by an outer tag like this:

<recent-search-item
  each={v in displayed_recent_searches}
  text={v.search_term}
  type={v.type_navigated}
/>

I can see that the onUpdate hook is firing on the expected elements, but the prevProps and newProps inside of the anime_min function call are identical, causing the animation to have no path.

I don't know what may be happening here, any assistance is appreciated. Thanks.

Modified / Unmount works not as expected

I have played around and reduce the version in https://github.com/riot/animore/tree/dev, to only handle css-classes, but i have a problem with the function "unmount". Mount and animation works, but unmount seems to run, but is not waiting for unmountSlot().

<span is="transition" if={ state.show === true }>
    1
</span>

<transition>
    <script>
        import {pure, __} from 'riot'

        const { template, bindingTypes } = __.DOMBindings

        export default pure(({ slots }) => {

            return {
                mount(element, context) {
                    this.element = element

                    this.element.addEventListener('transitionend', () => {
                        this.element.classList.remove('transition-enter')
                    })

                    this.element.addEventListener('transitioncancel', () => {
                        this.element.classList.remove('transition-enter')
                    })

                    this.element.classList.add('transition-enter')
                    setTimeout(() => {
                        this.element.classList.add('transition-active-enter')
                    }, 10)

                    this.createSlot(this.element, context)
                },

                createSlot(element, context) {
                    if (!slots || !slots.length) return

                    this.slot = template('<slot></slot>', [{
                        type: bindingTypes.SLOT,
                        selector: 'slot',
                        name: 'default'
                    }])

                    this.slot.mount(element, {
                        slots
                    }, context)
                },

                update(context) {
                    if (this.slot) {
                        this.slot.update({}, context)
                    }
                },

                unmount(context, ...rest) {
                    const parentNode = this.element.parentNode
                    const unmountSlot = () => this.slot ? this.slot.unmount(context, ...rest) : null

                    this.element.addEventListener('transitionend', () => {
                        unmountSlot()
                    })

                    this.element.classList.add('transition-leave')
                    setTimeout(() => {
                        this.element.classList.add('transition-active-leave')
                    }, 10)
                }
            }
        })
    </script>
</transition>