Related CodePen Home GSAP cards how to recycle?

[anecko]

how to change this code to the one in the video?

https://gyazo.com/847d30e010cca560fce5f60067ce9047

See the Pen MWmVwpX by GreenSock (@GreenSock) on CodePen

[GreenSock]

Welcome to the forums, @anecko

 

I think the best way to approach this is to ignore ScrollTrigger initially - just focus on getting that animation of the cards unstacking to run the way you like (standalone). Sequence it in a gsap.timeline(). Then, once you're happy with that, it should be quite easy to hook that up to the scroll position by adding a ScrollTrigger to the timeline, and set scrub: true (or a number if you want to smooth it), and pin the container. 

 

Give it a crack and then if you get stuck, feel free to post your minimal demo here showing your progress. 👍

[anecko]

@GreenSock hi, i did something that it still breaks(, can you help fix it?

 

See the Pen KKGqaew by aneckon (@aneckon) on CodePen

[Cassie]

First step with stuff like this is to get the content positioned and styled the way you want it, then create a timeline that does what you want, then add ScrollTrigger once you're happy.

Here's a good starting point!

See the Pen YzJQQEe by GreenSock (@GreenSock) on CodePen

[GreenSock]

Yep, Cassie is exactly right. And then look how easy it is to slap a ScrollTrigger on that once you've got the animation nailed down: 

See the Pen bGmRoBo?editors=1010 by GreenSock (@GreenSock) on CodePen

[anecko]

Thank you very much

[anecko]

@GreenSock it breaks on my react project, how can it be fixed in this case?

 

[GreenSock]

@anecko if you want help troubleshooting, you need to provide a minimal demo that clearly shows the issue. Here's a Stackblitz that you can fork: 

https://stackblitz.com/edit/react-cxv92j

 

I'd strongly recommend reading this: 

 

gsap.context() is your best friend in React because it makes cleanup so easy.

[anecko]

@GreenSock did as here, for some reason it breaks all the time - https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js

 

[GreenSock]

@anecko it looks like you forgot to hit the "fork" button or save it - you just posted back the exact same link I gave you to the starter template. In order to troubleshoot, we really need to actually see the Stackblitz that illustrates the issue

 

[anecko]

@GreenSock https://stackblitz.com/edit/react-prmmqj?file=src%2FApp.js,src%2Fstyle.css 

[GreenSock]

You've got logic issues in your code - you're looping through every box and creating an entirely new timeline and ScrollTrigger each time through, and every one of those timelines is fighting for control of all of the boxes. Plus you're pinning the boxes instead of the container. So you've got a ton of conflicts going on. Since you have 3 boxes, you're creating 3 timelines, each of which is trying to control all 3 boxes (so 9 tweens).

 

I assume you meant to do this (I simplified the code for you too): 

https://stackblitz.com/edit/react-4q639w?file=src%2FApp.js

 

Better? 

[anecko]

@GreenSock I want to do this but something is not working for me, and you also have bugs with it there

 

See the Pen bGmRoBo by GreenSock (@GreenSock) on CodePen

[Cassie]

Can you explain what do you mean by 'bugs?' and 'something is not working for me' - That's very vague.
 

[anecko]

@Cassie look at how this code works - 

See the Pen bGmRoBo by GreenSock (@GreenSock) on CodePen

and this - https://stackblitz.com/edit/react-4q639w?file=src%2FApp.js, I need them to work like on simple js but to transfer evo to react

[Rodrigo]

Hi,

 

There are a few issues in your setup.

 

You are already importing both hooks (useLayoutEffect and useRef) so there is no need to use the React. notation there, just use the hooks directly:

import React, { useLayoutEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function Scroll() {
  const contentRef = useRef(null);

  useLayoutEffect(() => {}, []);

  return ();
}

Also you have an issue with scoping on your GSAP Context instance. This is your HTML
 

<div ref={contentRef} className="paralax">
  <div className="card one">1</div>
  <div className="card two">2</div>
  <div className="card three">3</div>
</div>

And this is your GSAP Context:

const ctx = gsap.context((self) => {
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".paralax",
      start: 'top top',
      end: '+=1000',
      scrub: 1,
      pin: true,
      markers: true,
    },
  });
  tl.to('.one, .two, .three', { yPercent: 150, stagger: -0.5, ease: "none" });
}, contentRef);

Basically you're passing he same class selector that the scope parameter contentRef so GSAP is looking for an element with a .paralax class within the scope and is not finding it because that is the actual scope ref. See the problem?

 

This seems to work the way you expect:

export default function Scroll() {
  const contentRef = useRef(null);

  useLayoutEffect(() => {
    const ctx = gsap.context((self) => {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: contentRef.current,
          start: 'top top',
          end: '+=1000',
          scrub: 1,
          pin: true,
          markers: true,
        },
      });
      tl.to('.one, .two, .three', {
        yPercent: 150,
        stagger: -0.5,
        ease: 'none',
      });
    }, contentRef);
    return () => ctx.revert();
  }, []);

  return (
    <div ref={contentRef} className="paralax">
      <div className="card one">1</div>
      <div className="card two">2</div>
      <div className="card three">3</div>
    </div>
  );
}

Here is a fork of your Stackblitz example:

https://stackblitz.com/edit/react-mptzzr?file=src%2Fstyle.css,src%2FApp.js

 

Finally I strongly recommend you to read the articles Jack linked, since they provide a solid starting point for using GSAP in your React apps.

 

Happy Tweening!

[anecko]

@GreenSock thx)