gsap-quicktools v1.1.9

License Information

Attention! Have in mind that this package is based on GSAP. Please inform yourself about their license before using this package.

Components

GSAPFadeWrapper

Adds a fade animation to the provided child elements.

Table Prop Overview

Children elements/components may be included.

Example

<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>

GSAPFadeSlideWrapper

Adds both a fade and slide animation to the provided child elements

Table Prop Overview

Children elements/components may be included.

Example

<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>

GSAPScaleXWrapper

Adds a scaleX entering and closing animation to the provided child elements

Table Prop Overview

Children elements/components may be included.

Example

<GSAPScaleXWrapper
  classNames="w-36 h-1 bg-red-800"
  isVisible={isShown}
  animationDuration={2.5}
/>

MouseScrollElement

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.

Table Prop Overview

Children elements/components may be included.

Example

<ScrollElement
  ref={scrollTargetRef}
  classNames="w-96 h-24 bg-red-200"
  elementType={"button"}
  scrollDirection={{ horizontal: "right" }}
  scrollAmount={4}
>
  SCROLL RIGHT
</ScrollElement>