From b62be65701dd4daa356a0267ca1c694613f0d57b Mon Sep 17 00:00:00 2001 From: Hannah Date: Wed, 14 Jun 2023 15:59:34 +0100 Subject: [PATCH 1/2] EIUNAB-3645 --- catalog-info.yaml | 12 ++++++ docs/index.md | 107 ++++++++++++++++++++++++++++++++++++++++++++++ mkdocs.yml | 5 +++ 3 files changed, 124 insertions(+) create mode 100644 catalog-info.yaml create mode 100644 docs/index.md create mode 100644 mkdocs.yml diff --git a/catalog-info.yaml b/catalog-info.yaml new file mode 100644 index 0000000..4595963 --- /dev/null +++ b/catalog-info.yaml @@ -0,0 +1,12 @@ +apiVersion: backstage.io/v1beta1 +kind: Component +metadata: + name: react-scrollmagic + namespace: economist-impact + annotations: + github.com/project-slug: signal-noise/react-scrollmagic + backstage.io/techdocs-ref: dir:. +spec: + type: library + lifecycle: production + owner: group:economist-impact/signal-noise diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..fd25a26 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,107 @@ +# react-scrollmagic + +> React components for ScrollMagic + +[![NPM](https://img.shields.io/npm/v/react-scrollmagic.svg)](https://www.npmjs.com/package/react-scrollmagic) + +# Introduction + +react-scrollmagic lets you use the [ScrollMagic](http://scrollmagic.io/) library in React in a fully declarative way. It abstracts away the direct use of the ScrollMagic classes [ScrollMagic.Controller](http://scrollmagic.io/docs/ScrollMagic.Controller.html) and [ScrollMagic.Scene](http://scrollmagic.io/docs/ScrollMagic.Scene.html). + +From version 2 on the GSAP library in no more included. But react-scrollmagic plays nicely together with [react-gsap](https://github.com/bitworking/react-gsap). + +## Install + +```bash +npm install --save react-scrollmagic +``` + +## Usage + +```jsx +import React from 'react'; +import { Controller, Scene } from 'react-scrollmagic'; + +const App = () => ( +
+ + +
Sticky Example
+
+
+
+); +``` + +Examples live demo: + +https://bitworking.github.io/react-scrollmagic/ + +Examples source: + +https://github.com/bitworking/react-scrollmagic/tree/master/example/src/components/ScrollMagicExamples + +# Documentation + +These React components use http://scrollmagic.io/ internally. So for an in-depth documentation please visits following sites: + +http://scrollmagic.io/docs/ScrollMagic.Controller.html +http://scrollmagic.io/docs/ScrollMagic.Scene.html + +There are two components available: + +## Controller + +Props: + +name | type | optional | default | more info +--- | --- | --- | --- | --- +container | string or object | yes | window +vertical | boolean | yes | true +globalSceneOptions | object | yes | {} | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor) +loglevel | number | yes | 2 +refreshInterval | number | yes | 100 + +## Scene + +The Scene component only consumes a single child. If you want to animate multiple children then you have to wrap them in a HTML element. + +Scene sets the ref for the child component automatically. This only works for HTML tags, Styled Components or React.forwardRef components. If you use stateless or stateful components then you need to set the triggerElement or pin prop or wrap them in a HTML tag. See [Components.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/Components.js) for an example. + +The Scene component also works with a function as child. The function takes an animation progress (0-1) as first parameter and the event object as second parameter. See [ClassToggle.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/ClassToggle.js) for an example. + +From version 2 on it also works with a [react-gsap](https://github.com/bitworking/react-gsap) Tween or Timeline component as direct child. See [SectionWipes2.js](https://github.com/bitworking/react-scrollmagic/blob/master/example/src/components/ScrollMagicExamples/SectionWipes2.js) for an example. + +Props: + +name | type | optional | default | more info +--- | --- | --- | --- | --- +duration | number or string | yes | 0 | Can be changed on-the-fly +offset | number or string | yes | 0 | Can be changed on-the-fly +triggerElement | string, object or null | yes | child element +triggerHook | number or string | yes | "onCenter" | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#constructor) (Can be changed on-the-fly) +reverse | boolean | yes | true | Can be changed on-the-fly +loglevel | number | yes | 2 +indicators | boolean | yes | false | only boolean in contrast to plugin options: [link](http://scrollmagic.io/docs/debug.addIndicators.html#Scene.addIndicators) +classToggle | string or string[2] | yes | undefined | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#setClassToggle) +pin | boolean or string | yes | undefined | [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin) +pinSettings | PinSettings | yes | undefined | See Types and [link](http://scrollmagic.io/docs/ScrollMagic.Scene.html#setPin) +enabled | boolean | yes | true | Can be changed on-the-fly + +## Types + +### PinSettings + +name | type | optional | default +--- | --- | --- | --- +pushFollowers | boolean | yes | true +spacerClass | string | yes | "scrollmagic-pin-spacer" + + +This project was bootstrapped with: + +https://github.com/transitive-bullshit/create-react-library + +## License + +MIT © [bitworking](https://github.com/bitworking) diff --git a/mkdocs.yml b/mkdocs.yml new file mode 100644 index 0000000..a569f5f --- /dev/null +++ b/mkdocs.yml @@ -0,0 +1,5 @@ +docs_dir: docs +nav: + - Main: index.md +plugins: + - techdocs-core From 2b66b67f04731b70fceb844ad475c821a001c566 Mon Sep 17 00:00:00 2001 From: impactyogi <40470099+impactyogi@users.noreply.github.com> Date: Wed, 19 Jul 2023 17:32:59 +0100 Subject: [PATCH 2/2] Update catalog-info.yaml --- catalog-info.yaml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/catalog-info.yaml b/catalog-info.yaml index 4595963..e941d14 100644 --- a/catalog-info.yaml +++ b/catalog-info.yaml @@ -5,6 +5,14 @@ metadata: namespace: economist-impact annotations: github.com/project-slug: signal-noise/react-scrollmagic + # the circleCI project, mirrors github repo in this case: + circleci.com/project-slug: github/signal-noise/react-scrollmagic + # GUID - see https://docs.newrelic.com/docs/query-your-data/explore-query-data/dashboards/manage-your-dashboard/ + newrelic.com/dashboard-guid: MzY1MjgxOXxWSVp8REFTSEJPQVJEfGRhOjE3MDkwOA + newrelic.com/dashboard-guid: MzY1MjgxOXxWSVp8REFTSEJPQVJEfGRhOjE5NTIyNw + description: covid-relative-risk for SignalNoise Economist Impact Project + opsgenie: + domain: https://economist.app.opsgenie.com/teams/dashboard/49177ca8-5e59-4364-af23-c22cc60c026f/main backstage.io/techdocs-ref: dir:. spec: type: library