Cards Splitting Animations Need Clues

[ClemNico]

Hello everyone, 

I'm trying to do this effect (the one with the four cards): 
https://www.botify.com/

I'm having trouble and need some advice to succeed. 
Thank you for your help

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mvaneijgen]

Hi @ClemNico welcome to the forum!

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! but in theory it just moving the cards on the y-axis the two above using a negative number and the others with a positive number and then adding a slight rotation and the text can just be a scale form 0. The most important here is getting the HTML and CSS ready, my advise stack everything right on top of each other and don't forget the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources

Here is a starter template which loads all the plugins

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

[ClemNico]

Hello @mvaneijgen thanks for yout answer

Here is what i did so far, it should start on scroll but i think there is conflict between scrollTriggers. I don't know how to handle it, maybe with timeline ? 

See the Pen NWZNJyr by ClemNicola (@ClemNicola) on CodePen.

[mvaneijgen]

Your initial setup I would set up something like this. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

See the Pen dyBXoGv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

And indeed just one timeline with a ScrollTrigger that animates the whole animation would be much easier, something like this. Hope it helps and happy tweening! 

 

See the Pen KKjMpVE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[ClemNico]

I'm sorry to bother you again, but I think I've found the cause of the problem in my animation. 

I'll try to be concise and clear. 
In my project I have another section above the one where the animation I'm trying to make is located. This top section also contains an animation but with overlapping cards. Here is the code: 

  useEffect(() => {

    const ctx = gsap.context(() => {

      const cards = gsap.utils.toArray('.card') as HTMLElement[]

      gsap.set(cards[0], {y: 100 })
      gsap.set(cards.slice(1), {y: 900 })

      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionSector.current,
          start: 'top top',
          end: `+=${cards.length * 50}%`,
          pin: true,
          pinSpacing: true,
          scrub: 1,
          markers: true,
        },
      })

      tl.to(cards[0], { y: 0 }, 0)

      cards.slice(1).forEach((card, index) => {
        const isSecond = index === 0
        tl.to(
            card,
            {
              opacity: 1,
              y: 0,
              duration: isSecond ? 0.75 : 0.5,
            },
            isSecond ? 0.75 : (index + 2) * 0.6,
        )
      })



      ScrollTrigger.refresh()
    }, sectionSector)
    return () => ctx.revert()
  }, [sectorsData])

 

As you can see, the 'end' takes up a certain size, so the section overlaps the one below. I've tried changing it to 'bottom bottom', but in this case the animation is instantaneous and I have no way of slowing it down so that it runs smoothly. I think I've tried everything to prevent the top section from encroaching on the bottom. 
Do you see what I can do? 

Translated with DeepL.com (free version)

[mvaneijgen]

Hi if you use React I would definitely use useGSAP() 

 

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

When having two sections that need to play right after each other I would combine the two and use one ScrollTrigger and timeline to control them both, this is always much easier. 

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better.