GSAP notes

-

 <------------------------------------- GSAP IMPS ----------------------------------------->

# Randoms

1. Remember to use the useEffect and useRef(to take the reference of that particular block link div,etc) hook while using GSAP library.

   Example:-

        const containerRef = useRef(null);

        useEffect(() => {

            const tl = gsap.timeline();  

            tl.to(containerRef.current, {

              x: 800,

              duration: 1,

              delay: 2,

              backgroundColor: "green",

              rotate: 270,

              borderRadius: "50%",

              // both properties are required for animation of yoyo

              yoyo: true,

              repeat:-1

            }) 

            .to(containerRef.current, {

              x: 0,

              duration: 3,

              backgroundColor: "blue",

              rotate: 0,

              borderRadius: "0%",

            //   repeat: 1 // repeat infinite -> repeat:-1

            });

          }, []);


2. Create Custom Cursor

// IN THE SVG FILE

<svg width="14" height="14" viewBox="0 0 14 14" fill="white" xmlns="http://www.w3.org/2000/svg">

<path d="M14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14C5.14349 14 3.36301 13.2625 2.05025 11.9497C0.737498 10.637 2.80326e-07 8.85652 0 7L2.34191 7C2.34191 8.2354 2.83267 9.42021 3.70623 10.2938C4.57979 11.1673 5.7646 11.6581 7 11.6581C8.2354 11.6581 9.42021 11.1673 10.2938 10.2938C11.1673 9.42021 11.6581 8.2354 11.6581 7L14 7Z" fill="white"/>

<path d="M0.259985 8.67684C0.00689195 7.65953 -0.0126364 6.59814 0.202864 5.57221C0.418364 4.54629 0.863302 3.58246 1.50432 2.75297C2.14534 1.92348 2.96582 1.24986 3.90423 0.782603C4.84265 0.315345 5.87466 0.0665736 6.92291 0.0549386C7.97115 0.0433035 9.00844 0.269107 9.95699 0.71542C10.9055 1.16173 11.7408 1.81698 12.4 2.63203C13.0593 3.44709 13.5255 4.40081 13.7638 5.42169C14.002 6.44258 14.006 7.50415 13.7756 8.52682L11.5087 8.01601C11.6621 7.33548 11.6594 6.62907 11.5009 5.94973C11.3424 5.27039 11.0321 4.63574 10.5934 4.09337C10.1547 3.551 9.59891 3.11497 8.9677 2.81798C8.33649 2.52098 7.64624 2.37072 6.9487 2.37846C6.25115 2.38621 5.56441 2.55175 4.93995 2.86268C4.31548 3.17362 3.76951 3.62187 3.34295 4.17385C2.91638 4.72582 2.6203 5.3672 2.4769 6.04989C2.3335 6.73258 2.34649 7.43888 2.51491 8.11583L0.259985 8.67684Z" fill="white"/>

<circle cx="7" cy="7" r="2" fill="white"/>

</svg>


// IN THE APP FILE

import React, { useRef } from 'react';

import gsap from 'gsap';


function App() {

  const mouseRef = useRef(null);

  const mouseMoves = (e) => {

    gsap.to(mouseRef.current, {

      x: e.clientX - 17,

      y: e.clientY - 17,

      duration: 2,

      ease: 'back.out(2)'

    });

  };

  return (

    <>

      <div onMouseMove={mouseMoves} className="w-full h-screen">

        <div ref={mouseRef} className="w-12 h-12 -translate-x-72 border-white border-2 rounded-full absolute pointer-events-none">

        

        </div>     

      </div>

    </>

  );

}

export default App;



3.





to() -> gsap.to() help to start the animation to the starting point

Example :-

  gsap.to(containerRef.current, {

      x: 800,

      duration: 1,

      delay: 2,

      backgroundColor: "green",

      rotate: 270,

      borderRadius: "50%",

      // both properties are required for animation of yoyo

      yoyo: true,

      repeat:-1

    }) 



from() -> gsap.from() help to start the animation to the ending point

Examples:-

  gsap.from(containerRef.current, {

      x: 800,

      duration: 1,

      delay: 2,

      backgroundColor: "green",

      rotate: 270,

      borderRadius: "50%",

      // both properties are required for animation of yoyo

      yoyo: true,

      repeat:-1

    })


timeline() -> 'gsap.timeline().to' makes animation synchronous in nature means it animations will work line by line

Example:-

    const tl = gsap.timeline();


    tl.to(containerRef.current, {

      x: 800,

      duration: 1,

      delay: 2,

      backgroundColor: "green",

      rotate: 270,

      borderRadius: "50%",

      // both properties are required for animation of yoyo

      yoyo: true,

      repeat:-1

    }) 

    tl.to([textAnimate1.current,textAnimate2.current,textAnimate3.current,textAnimate4.current], {

      x: 0,

      duration: 3,

      backgroundColor: "blue",

      rotate: 0,

      borderRadius: "0%",

    //   repeat: 1 // repeat infinite -> repeat:-1

    });


ScrollTrigger{} -> this is used for the scrolling animations in website 

Example:-


    import React, { useEffect, useRef } from 'react';

    import gsap from 'gsap';

    import { ScrollTrigger } from 'gsap/ScrollTrigger';

    

    gsap.registerPlugin(ScrollTrigger);

    

    function About() {

      const bodyRef = useRef(null);

      const textRef = useRef(null);

    

    // dont touch the below gsap code because it might distrube the scroll trigger

      useEffect(() => {

        gsap.to(textRef.current, {

          transform: 'translate(-150%)',

          scrollTrigger: {

            trigger: bodyRef.current,

            // scroller:"body",

            markers: true, // Uncomment to see ScrollTrigger markers

            start: 'top 0%',

            end: 'top -100%',

            scrub: 2,

            pin: true,

          },

        });

      }, []);

    

      return (

        <div ref={bodyRef} className="bg-blue-500 w-full h-screen overflow-x-hidden">

          <div ref={textRef} style={{ fontSize: '500px' }} className="text-black font-bold">

            THUNDERBLOOD

          </div>

        </div>

      );

    }

    

    export default About;








# Some properties


x: 800,

y: 50,

duration: 1,

delay: 2,

backgroundColor: "green",

rotate: 270,

borderRadius: "50%",

// both properties are required for animation of yoyo

yoyo: true,

// repeat: 1 // repeat infinite -> repeat:-1

opacity: 1,

stagger: 0.5,

color:"blue",

fontWeight:"bold",

fontSize:"20px"

transform: 'translate(-150%)',

scrollTrigger: {

  trigger: bodyRef.current,

  // scroller:"body",

  markers: true, // Uncomment to see ScrollTrigger markers

  start: 'top 0%',

  end: 'top -100%',

  scrub: 2,

  pin: true,

},


Comments

Post a Comment

Popular posts from this blog

ReactJs Notes

-
 -------------------------------------- TAILWIND IN REACTJS ------------------------------------------------- Link paste in <head> tag:-- <script src="https://cdn.tailwindcss.com"></script> Manual Intsallation for in reactjs app :-- Use commands 1. npm create vite 2. npm i 3. npm install tailwindcss @tailwindcss/vite Configure the Vite plugin Add the @tailwindcss/vite plugin to your Vite configuration. import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' // https://vite.dev/config/ export default defineConfig({      plugins: [           react(),           tailwindcss(),      ], }) Import Tailwind CSS Add an @import to your CSS file that imports Tailwind CSS. Add the @tailwind directives for each of Tailwind’s layers to your main CSS file (index.css). @import "tailwindcss" use command npm run de...
Read more

NextJS Notes

-
  Reactjs is a Library and Nextjs is a Framework which is build on top of Reactjs, so before understanding what exactly is Nextjs, firstly we need to understand what is the difference between a library and a framework. Aspect JavaScript Library JavaScript Framework Definition A collection of functions and utilities for specific tasks A complete structure to build and manage an application Control Flow You call the library (you’re in control) Framework calls your code (framework is in control) Inversion of Control ❌ No inversion — you’re in charge ✅ Yes — framework dictates structure and flow Scope of Use Narrow, specific — often for a particular feature Broad — full application architecture Dependency Optional — can use as needed Mandatory — dictates how components interact Learning Curve Usually low — easier to integrate Higher — requires understanding framework’s patterns and structure Flexibility High — you choose when and how to use Low — must follow framework rules and lifec...
Read more

HTML NOTES

-
-> Please use live server or live preview in vs code to see the file and examples properly -> For learning new html tags and commands must visit - https://developer.mozilla.org/en-US/docs/Web/HTML/Element -> Try to use CSS rather than using different tags ###################### HTML CHAPTER 1 - INTRODUCTION ###################### HTML - hyper text makeup language. html is the language of web use to create a website. we can use html tags to define looks and fell of website. with understanding of tags and how to put together, we can create a beautiful website easily. ## THEN WHY CSS AND JAVASCRIPTS html is use for defining the layout of a page - a parabone page structure. CSS is used to add desining of a page created using html.  JavaScripts is used to program logic for the page layout eg what happend when a hovers on a txt, when to hide or show elements etc. # A EXAMPLE HTML = car body(only metal) CSS = car paint, decoration etc. JAVASCRIPTS = car engine + interior logic w...
Read more