Make your page moving around

Todat I;'m going to share web animation. Although I not really know it well So, it might be not much explanation Anyway, I'm going share a package and what I did with it

First, here my project (It's hex school activity of frontend) So far, I only finished mobile version After seeing other participants works, they all good, like really good so many great people 😿 (I feel I'm a little bit not that good)

wipe away tears, I'm about to tell you how I use this package

The package is called GSAP and this time I use ScrollTrigger(plugin) mostly besides this plugin it has two powerful function: Tween and Timeline You can find those in the documents it's really coooool

It's easy to use you need to let it know what element you want to add animation

let element = document.querySelector(".animated-box");
gsap.from(element, { opacity: 0, x: 100 });

// let element .animated-box， (from) opacity 0 and horizontal position 100
// moving back to horizontal position =0, opacity =1

It allowed to use "from/ to/ fromTo" to set start/end state of animation this time I only use the easiest function to make them moving around

The very first thing that I did is to try it on codepen example as follow you can click into it, to change some code/parameter and see what will happen

in scrollTrigger config, parameters meaning：

• scrub: boolean/number it means how long it take for animation to keep up with scrolling distance if value is boolean(true), means animation will be exactly equal to scrolling distance so, backward scrolling will make animation reverse

• trigger, means which element should be as a reference

• start, string with two words ,like "top center" first word means that element will be start when start-reference-line contact here second word means the start-reference-line position

• end , basically the same as above

you can find more information HERE

And if you want to use this in react/next you need to add it in useEffect apart from this, the usage is not much different

// in Parent Component
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

const container = useRef();
gsap.registerPlugin(ScrollTrigger);
useEffect(() => {
  const element = container.current;

  gsap.fromTo(
    element.querySelector(".target_element"),
    { opacity: 0, y: 10 },
    {
      opacity: 1,
      y: 0,
      scrollTrigger: {
        trigger: element.querySelector(".first"), // this is scroll trigger element
        start: "top center",
        end: "bottom center",
      },
    }
  );
}, []);

/*
 scroll-trigger-element is used to set the start/end line 
*/

return <div ref={container}>/* inside is child components */</div>;

// container is ref in Parent Component

// in Children Component
// I pass container.current as prop (in element prop-name)

function Child({ element }) {
  useEffect(() => {
    gsap.fromTo(
      element.querySelector(".animate") // select which element you want to add animation
      //...animation
    );
  }, []);

  return <div className="animate"></div>;
}

This time example, implement is not diffcult as I thought but, actually there are some more useful, powerful functions that I have not used yet So for, there still mobile version of my work. I would find some day to finish it

The above example may not the best practice, and there might be some much better way to use them However, this is my first time to use this package so I notes these for the record After my works updated, or I might find some new way to use this package I will also update this post, or post a new one.

It's very interesting to make web alive(animation) this is today's sharing 👋