Jump to content
Search Community

Pin Element Scroll GSAP + Scrolltrigger + React

Jhosep R test
Moderator Tag

Go to solution Solved by alig01,

Recommended Posts

Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"?


Caja de arena:  https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js


Link to comment
Share on other sites

  • Solution



I think you are looking for something like this 

const pinSlider = useRef();

  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      let contents = gsap.utils.toArray(".content");
      gsap.set(contents, { autoAlpha: 0, y: 500 });
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: pinSlider.current,
          scrub: true,
          pin: true,
          start: "top top",
          end: "+=3000 bottom",
          markers: true

      contents.forEach((content) => {
        tl.to(content, {
          keyframes: { y: [500, 185, -325] },
          duration: 5,
          autoAlpha: 1
    }, pinSlider);
    return () => ctx.revert();

Just make sure you remove the numbers from your divs and the refs which are no longer needed.


Hope this helps.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...