React Native Fiesta - A set of celebration animations

Overview

React Native Fiesta 🎉

A set of celebration animations powered by @shopify/react-native-skia. Engage more with your users by celebrating in your React Native application.

Gifs React Native Fiesta

Fiesta is a set of animations ideal for celebration and user engagement.

react-native-fiesta is fully powered by @shopify/react-native-skia.

Getting Started

yarn add @shopify/react-native-skia
yarn add react-native-fiesta

Full Documentation

Library Under Construction 🚧

This library is still under construction, right now it is experimental. You can read more about it here.

Contributing

Please read the guidelines.

  • If you have any questions or suggestions, please open an issue on Github.
  • To contribute adding a new animation or by improving the existing ones, please open a pull request.
  • If you have a cool theme the community can use, don't hesitate opening an issue to suggest it (or just shoot a PR).

License

MIT

Comments
  • Add Shopify's Confetti

    Add Shopify's Confetti

    This looks great! Thanks for building it.

    Any chance you could add Shopify's infamous confetti effect with customizable colors as per their demo here: https://shopify.engineering/building-arrives-confetti-in-react-native-with-reanimated

    Seems like it would be a nice nod to the owners of Skia 😊

    enhancement react-native 
    opened by nextriot 4
  • Halloween pumpkins animation

    Halloween pumpkins animation

    As part of the roadmap for Fiesta and because halloween is just around the corner, would be great to have some pumpkins animation as part of the set.

    Ideally the animation can be used with the Popper component, you can use the Hearts or Balloons as examples. The animation can either be created using an SVG as a string or an SVG built with components.

    Ideal API:

    <Pumpkins theme={FiestaThemes.Halloween} />
    

    Below an image for inspiration:

    image

    enhancement help wanted good first issue react-native hacktoberfest 
    opened by mateoguzmana 3
  • Musical notes animation

    Musical notes animation

    As part of the roadmap for Fiesta, would be great to have some musical notes animation as part of the set.

    Ideally the animation can be used with the Popper component, you can use the Hearts or Balloons as examples. The animation can either be created using an SVGs as a string or SVGs built with components.

    Perhaps an option to choose which musical notes would be a great addition for the component.

    <MusicNotes notes=['...'] />
    

    And below an image as inspiration:

    (No need for all of them, leaving it up to the contributor)

    musical notes

    enhancement help wanted good first issue react-native hacktoberfest 
    opened by mateoguzmana 3
  • Flowers animation

    Flowers animation

    It would be great to have some animated flowers in Fiesta to celebrate some special occasions.

    Ideally the animation can be used with the Popper component, you can use the Hearts or Balloons as examples. The animation can either be created using an SVG as a string or an SVG built with components.

    Keeping in mind performance, perhaps the animation can include some flower opening or something else. Leaving it up to the contributor.

    Leaving this animation I found in Codepen, some animated flowers with css and canvas.

    And below an image as inspiration:

    image

    enhancement help wanted good first issue react-native hacktoberfest 
    opened by mateoguzmana 3
  • Christmas animation

    Christmas animation

    To make Fiesta more complete, would be nice to have some christmas animations. Christmas is still a couple of months away but something can be introduced in the meantime.

    It can be maybe some ornaments, lights or something else representing Christmas.

    Ideally this Christmas animation can be use with the Popper component. You can refer to the Hearts as an example for the implementation.

    I leave the image below for inspiration:

    image

    help wanted good first issue react-native hacktoberfest 
    opened by mateoguzmana 2
  • Error when installing

    Error when installing

    Hey, just encountered this bug when installing via yarn.

    Command failed.
    Exit code: 127
    Command: patch-package
    Arguments: 
    

    Version 0.3.1 and below seem to install as expected, but 0.4.0 onward raises this error.

    bug react-native 
    opened by nextriot 1
  • Documentation for the Popper component

    Documentation for the Popper component

    Currently there is no documentation for the Popper component.

    This component can be very useful for custom animations. Would be good to expose the how to use it under the components section on the Fiesta website. You can follow the documentation structure of the other components

    documentation enhancement help wanted good first issue react-native hacktoberfest easy-pick 
    opened by mateoguzmana 1
  • fix(patches): deleting non-needed patches

    fix(patches): deleting non-needed patches

    Canvas types issues have been solved in Skia. These patches are not needed anymore. Also deleting the patch package configuration to fix some problems on the library exported package.

    Fixes #34

    opened by mateoguzmana 0
  • perf(balloons): improving balloons performance

    perf(balloons): improving balloons performance

    Improving balloons performance significantly on Android by simplifying the animation removing the shadow and using a matrix instead of multiple Group. Also adding some small tweaks to auto-hide with a fade out the balloon

    opened by mateoguzmana 0
  • feat(confettis): adding basic support for the confetti animations

    feat(confettis): adding basic support for the confetti animations

    Motivation

    As asked in #29, this PR adds a basic confetti animation. The animation is done using purely RN Skia so it looks a bit different, however, it is possible to do a couple of improvements to make it more alike and also more configurable. More improvements to it will come later.

    import { Confettis } from 'react-native-fiesta'
    
    const App = () => {
      return (
        <Confettis />
      )
    }
    

    Screenshoots

    https://user-images.githubusercontent.com/20783123/209863810-1a8318b4-5804-4287-b34d-b665f188ce1b.mov

    Closes #29

    opened by mateoguzmana 0
  • perf(fireworks): moving fade-out one level up

    perf(fireworks): moving fade-out one level up

    Moving the fade-out effect of the particles one level up to the whole firework. By doing this we remove some calculations that are happening in each particle and instead execute it only once.

    opened by mateoguzmana 0
Releases(v0.5.1)
  • v0.5.1(Jan 2, 2023)

  • v0.5.0(Dec 30, 2022)

    0.5.0 (2022-12-30)

    Bug Fixes

    • docs-website: re-adding algolia and fixing edit link (0c96f2e)

    Features

    • confettis: adding basic support for the confetti animations (#31) (0af2f63)
    • examples: adding option to change theme, more friendly background (a867b08)
    • examples: adding safe area insets to show the animations across the whole screen (d8392ec)
    • expo-example: improving expo example (6a0db64)
    • fireworks: adding logic to generate random positions across the screen (8b79644)
    • lib: adding pointerEvents none as default for the animations (dffc565)
    • web: setting up initial web example (e9d03ee)

    Performance Improvements

    • balloons: improving balloons performance (#32) (0f99887)
    • fireworks: executing fadeout to the whole firework instead of each particle (5c1828f)
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Dec 11, 2022)

    0.4.0 (2022-12-11)

    Bug Fixes

    • direction: fixing naming on example (9fc89df)
    • docs: fixing subtitles for fiesta context docs (d1626c9)
    • example: adding extra descriptions (0d88492)
    • example: using enum instead of fixed value (65eac50)
    • popper: adding an enum for the direction - better naming (9dc7d6c)
    • popper: adding missing memoisation (ea500e9)
    • popper: using absolute stylesheet object (c2b5a44)
    • readme: fixing contributing link (d13131e)

    Features

    • context: allowing passing the direction in the context (b9244fa)
    • context: allowing passing theme as a param (b7c71e0)
    • examples: adding a dynamic key to allow re-renders (4956d96)
    • examples: adding fireworks extreme mode example (1dfc3dc)
    • fireworks: extending fireworks config, num of partic. and fireworks (447d8f1)
    • popper: adding option to change the animation direction (6191cf0)
    • pull-request: adding a basic pull request template (4273244)
    Source code(tar.gz)
    Source code(zip)
  • v0.3.1(Sep 8, 2022)

  • v0.3.0(Sep 8, 2022)

  • v0.2.0(Sep 2, 2022)

  • v0.1.0(Aug 23, 2022)

    0.1.0 (2022-08-23)

    Bug Fixes

    • ballon: fixing rect position for the balloon (2c619c5)
    • balloon: improving y axis positions to spread the balloons (127655e)
    • balloons: better initial y position for balloons set (ee8a473)
    • balloons: reducing balloons spacing (17f480c)
    • balloon: using rotation instead of skewX (d4b1d69)
    • colors: fixing colorsFromTheme function to avoid inconsistency (efeebb8)
    • emoji: removing colour property since it's not needed for now (6485b03)
    • emojis: changing emoji example (ab92ce6)
    • firework: removing unnecessary autoplay prop (3ebc760)
    • fireworks: fixing prop name casing (95ede37)
    • lib: fixing exports (5bd7e9a)

    Features

    • balloon: adding a bigger gap to render more balloons (ed06520)
    • balloon: adding initial configuration for balloon string movement (4bc8ef5)
    • balloon: adding shadow to the balloon (dfb4eae)
    • balloon: applying depth (a80f9a6)
    • balloon: improving animation and graphics (fb016ab)
    • balloon: improving y positions distribution for the balloons (a4ebddd)
    • balloon: limiting skewX movement to balloon string instead of whole balloon (cfbba1f)
    • balloons: improving animation by externalising the translateY animation (13c4760)
    • balloons: wrapping balloons with popper instead of custom popper logic (2e5f197)
    • birthday: allowing autoplay (cde4d76)
    • colors: creating functionality to avoid filling theme unnecesarily (c26b66b)
    • components: adding star and heart components (e747864)
    • docs: adding first draw of docs with docosaurus (67977b9)
    • docs: adding proper documentation for emojis (7c6db2e)
    • emoji: allow pass color from props (e93e42a)
    • emoji: allowing size as a prop (3c74b12)
    • emoji: emoji popper experiment (5414208)
    • emojis: advances adding a font that works (12a918b)
    • emojis: allowing multiple emojis (82867cd)
    • emojis: fixing function to fill multiple emojis and colors from theme (ff38c17)
    • emojis: installing open emoji font for testing (d229bd7)
    • emojis: passing font from app instead of bundling it in the library (a39bd16)
    • emojis: passing xGap as a prop option for emoji popper (0b9f022)
    • example: adding example descriptions for elements list (d68a83c)
    • example: getting heart to work in the example app (b12c67e)
    • example: graphic examples, adding a list of elements (c87e728)
    • example: putting graphics instead of buttons only wip (f1f39ff)
    • fade: adding a fade out effect to hearts and stars (69874bc)
    • firework: allowing autoHide and particle radius from outside of the lib (030f7cf)
    • firework: improving firework animation values, smoothing animation (3f097e6)
    • fireworks: creating initial algorithm to generate a particles circle (08be16d)
    • fireworks: rendering more fireworks and spreading the positions (e797b30)
    • hears: creating hearts animation (3e66575)
    • hearts: adding colors and theming support for hearts (6adfead)
    • palettes: adding halloween, neon and christmas palettes (11f416d)
    • palettes: improving palettes (a04ae9a)
    • particles: creating logic to display multiple fireworks (5e43360)
    • popper: adding color extractor functionality to popper (a17c073)
    • popper: adding emoji popper logic (0c4e3f4)
    • popper: adding usage of generic popper to emoji popper (1afc143)
    • popper: initial wip of generic popper (6f00491)
    • popper: using fiesta speed for popper animation (53591a7)
    • speed: adding initial speed configuration (402e2d4)
    • speed: externalising fade out speed for single items (b7e3fde)
    • star: creating proper start and fixing code logic (81b2105)
    • stars: adding colors and theming support for stars (71cb894)
    • stars: adding x,y positions for stars (a7d62ba)
    • stars: wrapping stars using popper (71b51f8)
    • theming: adding initial light theme (a3ca4ca)
    • theming: adding theming support for fireworks (1548a62)
    Source code(tar.gz)
    Source code(zip)
Standard set of easy to use animations and declarative transitions for React Native

react-native-animatable Declarative transitions and animations for React Native Installation $ npm install react-native-animatable --save Usage To ani

Joel Arvidsson 9.4k Jan 3, 2023
React Native Bridge for Native Spruce Animation Library

ReactNative Spruce - (Android & iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can still use thi

Pranav Raj Singh Chauhan 536 Sep 22, 2022
Experimental implementation of high performance interactable views in React Native

Interactable react-native-interactable LOOKING FOR A MAINTAINER We love this project, but currently we don’t have enough time to work on it. So we are

Wix.com 5.2k Dec 29, 2022
React Native's Animated library reimplemented

React Native's Animated library reimplemented Reanimated 2 is here! Check out our documentation page for more information React Native Reanimated prov

Software Mansion 6.8k Jan 2, 2023
Create magical move transitions between scenes in react-native 🐰🎩✨

Important react-native-shared-element update! A follow up project called react-native-shared-element has been created which can be considered the succ

Hein Rutjes 980 Nov 27, 2022
React Native component for animated sprite and tweening

The React Native Animated Sprite react-native-animated-sprite (RNAS) package is a feature rich declarative component for animation, tweening, and drag

null 131 Jan 4, 2023
React-native-animatable-flatlist: Ready to go animatable flatlist based on reanimated 2

react-native-animatable-flatlist ready to go animatable flatlist based on reanimated 2 Features Hooks support Not opinionaded, Fully extendable Suppor

kubilay 5 Apr 27, 2022
Gesture based interruptible animation samples in React Native.

Gesture based interruptible animation samples in React Native.

Ashu 178 Dec 28, 2022
A simple animation for react-native

Simple structure Simple and performance Easy to start a new project Support more platform: android, ios and web Techincal react-native: lets you creat

null 9 Nov 6, 2022
Modern Animated UI Library For React-Native

react-native-ui-toolkit UI Toolkit For React Native Installation npm install react-native-ui-toolkit Usage import { ScrollableHeader } from "react-nat

Tariq Khan 3 Sep 14, 2022
📺 Display and animate textured Wavefront .OBJ 3D models with 60fps - native bridge to GLView (iOS) and jPCT-AE (Android)

react-native-gl-model-view A <ModelView> component for react-native, allowing you to display and animate any Wavefront .OBJ 3D object. Realized with a

Michael Straßburger 387 Dec 21, 2022
🎞️ Animated API math extension - approximates sin, cos and tan by combining Animated Nodes with full Native Driver support

react-native-animated-math An Animated API math extension - implementing sine, cosine, tangent and others as AnimatedNodes. All calculations are imple

Michael Straßburger 74 Dec 7, 2022
Legend Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.

Legend Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.

Legend 199 Dec 29, 2022
Standard set of easy to use animations and declarative transitions for React Native

Standard set of easy to use animations and declarative transitions for React Native

Joel Arvidsson 9.4k Jan 7, 2023
Standard set of easy to use animations and declarative transitions for React Native

react-native-animatable Declarative transitions and animations for React Native Installation $ npm install react-native-animatable --save Usage To ani

Joel Arvidsson 9.4k Jan 3, 2023
😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.

USE-WEB-ANIMATIONS Using Web Animations API (a.k.a WAAPI) in the React hook way. Let's create highly-performant, flexible and manipulable web animatio

Welly 1.2k Dec 23, 2022
A custom React router that leverages the Web Animations API and CSS animations.

A custom React router that leverages the Web Animations API and CSS animations.

Nate Adams 28 Jan 18, 2021
A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.

CreativeModernDev 0 Aug 29, 2022
:computer: :dash: Make your component visible with animations and a set of rules or simple props

Make your component visible with animations and a set of rules or simple props Content Installation Display content with simple props Display content

Marvin Frachet 16 Apr 24, 2020
🗺 Mandelbrot set and Julia set explorer made with React and WebGL

Mandelbrot Maps Mandelbrot Maps is an interactive fractal explorer built using React and WebGL.

Joao Maio 10 Nov 18, 2022