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
  • feat(context): adding fiesta context

    feat(context): adding fiesta context

    This PR introduces a new way of displaying Fiesta components in an application by using the Fiesta context.

    Along with the recently introduced controlled components, this aims to give a good experience by giving the option to run an animation by just invoking a function from the context.

    Basic implementation:

    import React from 'react';
    import { SafeAreaView, StyleSheet } from 'react-native';
    import { FiestaProvider } from 'react-native-fiesta';
    
    import { MyNiceComponent } from './components/MyNiceComponent';
    
    function App() {
      return (
        <SafeAreaView style={styles.container}>
          <FiestaProvider>
            <MyNiceComponent />
          </FiestaProvider>
        </SafeAreaView>
      );
    }
    

    And in MyNiceComponent we can simply call runFiestaAnimation from the fiesta context.

    ...
    import { useFiesta, FiestaAnimations } from 'react-native-fiesta';
    
    export function MyNiceComponent() {
      const { runFiestaAnimation } = useFiesta();
    
      return <Button onPress={() => runFiestaAnimation({ animation: FiestaAnimations.Hearts })} />
    }
    
    opened by mateoguzmana 0
  • feat: controlled components

    feat: controlled components

    This introduces the first way to control the Fiesta components. Starting with the Hearts components.

    heartsRef?.current?.start()
    

    Will start the animation.

    opened by mateoguzmana 0
  • Fireworks: Improve animation

    Fireworks: Improve animation

    Currently the animation is quite basic, you can see it below:

    https://user-images.githubusercontent.com/20783123/185928439-9d84873a-9b08-47cd-abe5-84ab755beca1.mov

    The aim is to get something a bit closer to this, but considering keeping a decent performance as well.

    image

    enhancement good first issue 
    opened by mateoguzmana 0
  • 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
  • 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 0
  • 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 0
  • 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 2
  • 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
Releases(v0.3.1)
  • 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.3k Sep 24, 2022
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 Sep 21, 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.5k Oct 1, 2022
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 981 Sep 7, 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 129 Aug 27, 2022
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 109 Sep 27, 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 Aug 23, 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 374 Sep 24, 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 72 Sep 18, 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 166 Sep 21, 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.3k Sep 22, 2022
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.3k Sep 24, 2022
😎 🍿 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 Sep 26, 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 9 Aug 13, 2022