jamesplease / jamesplease/puppets

Animation extension

Open
#18 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
No language data
Stars
4
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Animations will be based on css className.

``` html

```

At certain points in the Application, Puppets will add additional classNames to the element in an attempt to see if it begins to animate. For instance, `p-enter` will be added when a view is being shown, and `p-exit` for a view that is being exited.

Puppets will intelligently handle the situation that the animation has not been configured, so it should be a pretty seamless experience for developers.

Javascript animations would be registered via:

``` js
Puppets.registerAnimation('.my-list', {
enter(element, done) {},
exit(element, done) {}
});
```

Situations that trigger animations:
- Showing a child view
- Removing a child view
- Swapping views
- In other words, anything that happens through a Region
- Routing actions

Puppets.Animate will be a separate library.

\* this is based off Angular's implementation of animations, which I think is pretty baller

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the Region implementation, since the requested triggers occur when child views are shown, removed, swapped, or routed. Trace how class names are applied and how a separate Puppets.Animate library could expose registerAnimation; done means these Region transitions support configured CSS and JavaScript enter/exit animations while remaining seamless when none are configured.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.