Attention! Have in mind that this package is based on GSAP. Please inform yourself about their license before using this package.
| Name | Description |
|---|---|
| GSAPFadeWrapper | Attaches a fade animation to the provided child elements. |
| GSAPFadeSlideWrapper | Attaches a fade and slide animation to the provided child elements. |
| GSAPScaleXWrapper | Attaches a scaleX animation to the provided child elements. |
| ScrollElement | Enables scrolling through a scrollable element by clicking/touching. |
Adds a fade animation to the provided child elements.
| Prop | Type | Default | Description |
|---|---|---|---|
elementType |
React.ElementType |
div |
Optional, the wrapper's element type |
classNames |
string |
"" |
Optional, CSS classes for the wrapper itself |
isVisible |
boolean |
true |
Optional, render condition of the wrapped elements |
fadeDuration |
numberor { fadeInDuration: number, fadeOutDuration: number }
|
0.5 |
Optional, duration of the fade animations in seconds |
Children elements/components may be included.
<GSAPFadeWrapper
elementType="p"
classNames="flex flex-col bg-red-600"
isVisible={renderCondition}
fadeDuration={{ fadeInDuration: 0.5, fadeOutDuration: 1.5 }}
>
Include any child elements/components
</GSAPFadeWrapper>Adds both a fade and slide animation to the provided child elements
| Prop | Type | Default | Description |
|---|---|---|---|
elementType |
React.ElementType |
div |
Optional, the wrapper's element type |
classNames |
string |
"" |
Optional, CSS classes for the wrapper itself |
isVisible |
boolean |
true |
Optional, render condition of the wrapped elements |
slideDirection |
slideDown or slideUp or slideFromRight or slideFromLeft
|
slideUp |
Optional, slide direction |
slideLength |
number |
50 |
Optional, slide length |
animationDuration |
numberor { animationInDuration: number, animationOutDuration: number }
|
0.5 |
Optional, Fade & slide duration in seconds |
Children elements/components may be included.
<GSAPFadeSlideWrapper
classNames="text-center custom_css_class"
elementType="h1"
isVisible={renderCondition}
slideDirection="slideDown"
animationDuration={{ animationInDuration: 0.5, animationOutDuration: 1.5 }}
slideLength={150}
>
This is some text!
</GSAPFadeSlideWrapper>Adds a scaleX entering and closing animation to the provided child elements
| Prop | Type | Default | Description |
|---|---|---|---|
elementType |
React.ElementType |
div |
Optional, the wrapper's element type |
classNames |
string |
"" |
Optional, CSS classes for the wrapper itself |
isVisible |
boolean |
true |
Optional, render condition of the wrapped elements |
animationDuration |
numberor { animationInDuration: number, animationOutDuration: number }
|
0.5 |
Optional, Fade & slide duration in seconds |
transformOrigin |
string |
center center |
Optional, transformOrigin property |
Children elements/components may be included.
<GSAPScaleXWrapper
classNames="w-36 h-1 bg-red-800"
isVisible={isShown}
animationDuration={2.5}
/>This component enables scrolling within a separate component or element through holding down the mouse on this component. For instance, users can navigate a list using the MouseScrollElement without having to use the actual scroll button on their mouse. To enable this functionality, it's essential to link a reference (ref) to both this component and the target element intended for scrolling. This component doesn't utilize GSAP, therefore the missing GSAP prefix. To handle cases where text is selected while holding down the button, consider using (User Select)[https://developer.mozilla.org/en-US/docs/Web/CSS/user-select]. This component doesn't support touch events on mobile devices out of the box. For enhanced mobile interaction, consider using libraries like (Hammer.js)[https://hammerjs.github.io/], which offer comprehensive touch event handling capabilities.
| Prop | Type | Default | Description |
|---|---|---|---|
elementType |
React.ElementType |
div |
Optional, the component's element type |
classNames |
string |
"" |
Optional, CSS classes for the component itself |
scrollAmount |
number |
2 |
Optional, determines the scroll speed |
scrollDirection |
{ horizontal: "left" or "right" } or { vertical: "down" or "up" }
|
{ vertical: "down" } |
Optional, sets the scroll direction |
ref |
React.RefObject<HTMLElement> |
Required, the ref that targets the scrollable element |
Children elements/components may be included.
<ScrollElement
ref={scrollTargetRef}
classNames="w-96 h-24 bg-red-200"
elementType={"button"}
scrollDirection={{ horizontal: "right" }}
scrollAmount={4}
>
SCROLL RIGHT
</ScrollElement>