This is a library based on GSAP.js. You can use it by adding a class to an element and triggering animation with the ScrollTrigger. The animation starts when the object appears during scrolling.
Demo link: https://cengizilhan.com/sawaMotion/index.html
To use it, simply add the following class, for example:
<h1 class="animate-on-scroll-fade">sawacrow</h1>
Optionally, you can also add parameters such as data-duration and data-start.
<h1 class="animate-on-scroll-fade" data-duration="1" data-start="top 80%">sawacrow</h1>
The data-duration parameter specifies how long the animation will take to complete.
The data-start parameter specifies the starting point of the animation (top, bottom, center, 80%, etc.). For more detailed information, please refer to the GSAP.js ScrollTrigger documentation.
To use this library, you need to:
Include GSAP.js and GSAP Scroll Trigger in your project.
Include the SawaMotion.js file in your project.
Here is an example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="sawaMotion.js"></script>
- 'animate-on-scroll-fade'
- 'animate-on-scroll-fade-out'
- 'animate-on-scroll-zoom'
- 'animate-on-scroll-zoom-out'
- 'animate-on-scroll-slide-left'
- 'animate-on-scroll-slide-right'
- 'animate-on-scroll-slide-up'
- 'animate-on-scroll-slide-down'
- 'animate-on-scroll-flip'
- 'animate-on-scroll-rotate'
- 'animate-on-scroll-shake'
- 'animate-on-scroll-wipe'
- 'animate-on-scroll-fly'
- 'animate-on-scroll-spin'
- 'animate-on-scroll-flash'
- 'animate-on-scroll-dissolve'
- 'animate-on-scroll-bounce'
- 'animate-on-scroll-scale'
- 'animate-on-scroll-staggered'
- 'animate-on-scroll-color'
- 'animate-on-scroll-skew'
- 'animate-on-scroll-staggered-row'