diff --git a/example/__snapshots__/storyshots.test.ts.snap b/example/__snapshots__/storyshots.test.ts.snap
index 37d6198..45af737 100644
--- a/example/__snapshots__/storyshots.test.ts.snap
+++ b/example/__snapshots__/storyshots.test.ts.snap
@@ -5323,19 +5323,55 @@ exports[`Storyshots rn-placeholder Animations 1`] = `
}
}
>
- ShineOverlay
+ Shine Reverse
-
+
+
+
+
-
-
-
-
-
-
-
-
+ />
+ >
+
+
+
+
+ (
+
+
- ShineOverlay
+ props
+
+
+
+
+ )
+
+
+
+
+
+
+
+
+
+ =>
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ Shine
+
+
+
+
+
+
+
+
+
+ {
+
+
+
+
+ ...
+
+
+
+
+ props
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ reverse
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ true
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ />
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ PlaceholderLine
+
+
+
+
+
+
+
+
+
+ width
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ 80
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ PlaceholderLine
+
+
+
+
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ PlaceholderLine
+
+
+
+
+
+
+
+
+
+ width
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ 30
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ </
+
+
+
+
+ Placeholder
+
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ Copy code
+
+
+
+
+
+
+ ShineOverlay
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ Placeholder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ PlaceholderMedia
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Right
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ PlaceholderMedia
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Animation
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ ShineOverlay
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ PlaceholderLine
+
+
+
+
+
+
+
+
+
+ width
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ 80
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ PlaceholderLine
+
+
+
+
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ PlaceholderLine
+
+
+
+
+
+
+
+
+
+ width
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ 30
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ </
+
+
+
+
+ Placeholder
+
+
+
+
+ >
+
+
+
+
+
+
+
+
+
+ Copy code
+
+
+
+
+
+
+ ShineOverlay Reverse
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ Placeholder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ PlaceholderMedia
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Right
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ PlaceholderMedia
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Animation
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ (
+
+
+
+
+ props
+
+
+
+
+ )
+
+
+
+
+
+
+
+
+
+ =>
+
+
+
+
+
+
+
+
+
+ <
+
+
+
+
+ ShineOverlay
+
+
+
+
+
+
+
+
+
+ {
+
+
+
+
+ ...
+
+
+
+
+ props
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ reverse
+
+
+
+
+ =
+
+
+
+
+ {
+
+
+
+
+ true
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+ />
(
/>
+
+ Shine Reverse
+ }
+ >
+
+
+
+
+
+ }
+>
+
+
+
+`}
+ />
+
+
ShineOverlay
(
/>
+
+ ShineOverlay Reverse
+ }
+ >
+
+
+
+
+
+ }
+>
+
+
+
+`}
+ />
+
+
Progressive
= ({ duration, children, style }) => {
+export const Shine: React.FC = ({
+ duration,
+ children,
+ style,
+ reverse,
+}) => {
const animation = useRef(new Animated.Value(START_VALUE));
const start = () => {
@@ -35,7 +43,7 @@ export const Shine: React.FC = ({ duration, children, style }) => {
const left = animation.current.interpolate({
inputRange: [START_VALUE, END_VALUE],
- outputRange: ["0%", "100%"],
+ outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"],
});
return (
diff --git a/src/animations/ShineOverlay.tsx b/src/animations/ShineOverlay.tsx
index 14b8452..3e84a1c 100644
--- a/src/animations/ShineOverlay.tsx
+++ b/src/animations/ShineOverlay.tsx
@@ -8,11 +8,15 @@ const isInteraction = false;
export interface ShineOverlayProps {
/* Animation duration, default is 750 */
duration?: number;
+
+ /* Play the animation in reverse mod */
+ reverse?: boolean;
}
export const ShineOverlay: React.FC = ({
duration,
children,
+ reverse,
}) => {
const animation = useRef(new Animated.Value(START_VALUE));
@@ -37,7 +41,7 @@ export const ShineOverlay: React.FC = ({
const left = animation.current.interpolate({
inputRange: [START_VALUE, END_VALUE],
- outputRange: ["0%", "100%"],
+ outputRange: reverse ? ["100%", "0%"] : ["0%", "100%"],
});
return (