https://github.com/anshpg/scroll-magic

Welcome to the ScrollMagic with GSAP ScrollTrigger repository! This project is your gateway to creating captivating scroll animations for your web pages using the powerful combination of GSAP (GreenSock Animation Platform) and ScrollTrigger library.
https://github.com/anshpg/scroll-magic

gsap gsap-scrolltrigger javascript

Last synced: about 1 month ago
JSON representation

Welcome to the ScrollMagic with GSAP ScrollTrigger repository! This project is your gateway to creating captivating scroll animations for your web pages using the powerful combination of GSAP (GreenSock Animation Platform) and ScrollTrigger library.

• Host: GitHub
• URL: https://github.com/anshpg/scroll-magic
• Owner: ANSHPG
• License: mit
• Created: 2023-08-30T16:36:52.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-30T16:40:43.000Z (over 1 year ago)
• Last Synced: 2023-08-31T04:01:54.693Z (over 1 year ago)
• Topics: gsap, gsap-scrolltrigger, javascript
• Language: HTML
• Homepage: https://anshpg.github.io/SCROLL-MAGIC/
• Size: 346 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SCROLL-MAGIC

https://github.com/ANSHPG/SCROLL-MAGIC/assets/132222062/827fb91b-a8ef-479c-a076-877ff714f988

Scroll Animations with GSAP ScrollTrigger

Create captivating scroll animations for your web projects with ease using the GSAP (GreenSock Animation Platform) and ScrollTrigger library. Enhance user engagement by adding dynamic and interactive scroll animations to your HTML, CSS, and JavaScript-based web pages.

Table of Contents

Introduction

Features

Getting Started

Usage

Customization

Contributing

License

Introduction

Scroll animations can transform your web designs from static to dynamic, making them more visually appealing and engaging for your audience. This repository provides a collection of pre-built scroll animations, along with detailed documentation, to help you get started quickly.

Features

GSAP Integration: Leverage the power of the GreenSock Animation Platform (GSAP) to create smooth and performant scroll animations.

ScrollTrigger Library: Use the ScrollTrigger library, a GSAP plugin, to precisely trigger animations as the user scrolls through your web page.

Easy-to-Follow Tutorials: Access step-by-step tutorials and comprehensive documentation to assist developers of all skill levels.

Responsive Design: Ensure your scroll animations work seamlessly across various screen sizes and devices for a consistent user experience.

Getting Started

Follow these steps to get started with scroll animations in your project:

Clone the Repository: Clone this repository to your local machine using the following command:

bash

Copy code

git clone https://github.com/your-username/scroll-animations.git

Installation: Include the necessary GSAP and ScrollTrigger libraries in your project. You can use a package manager like npm or include them via CDN links.

Explore Tutorials: Check out the provided tutorials in the docs folder to learn how to create scroll animations with GSAP and ScrollTrigger.

Customize: Modify the animations to suit your project's unique requirements by editing the HTML, CSS, and JavaScript components.

Integrate: Add the animations to your web pages by including the respective scripts and stylesheets.

Usage

To use the scroll animations in your project, follow these general steps:

Include the GSAP and ScrollTrigger libraries in your HTML file.

html

Copy code

Copy the HTML structure and CSS styles for the desired animation from this repository.

Customize the animation's content and appearance as needed.

Add the JavaScript code to trigger the animation using ScrollTrigger.

javascript

Copy code

gsap.from(".animated-element", {

  scrollTrigger: {

    trigger: ".trigger-element",

    start: "top center",

    end: "bottom center",

    scrub: true,

  },

  opacity: 0,

  y: 100,

  duration: 1,

});

Save and include the modified HTML, CSS, and JavaScript files in your project.

Customization

The scroll animations included in this repository are highly customizable. You can adapt them to your project's specific design and branding by modifying the CSS styles and animation parameters in the JavaScript code.

Contributing

We welcome contributions from the open-source community. If you have ideas for improving or expanding this repository, please follow these steps:

Fork the repository.

Create a new branch for your feature or bug fix.

Make your changes and commit them.

Push your changes to your fork.

Create a pull request, detailing the changes you made and why they are valuable.

We appreciate your contributions to make scroll animations accessible and impressive for everyone.

License

This project is open-source and available under the MIT License. You are free to use and modify the code for both personal and commercial projects.