Showing x items then another x items on scroll (and playing animation on pin completion)

[amit95]

I have an animation which should work like this:

 

1. .pinnedBgText is hidden by default. When the section is in view, the clip-path ScrollTrigger starts.
2. The clip-path animation finishes as the .pinnedBgText pins
3. The batch stagger animation for .pinnedBgText__text starts when .pinnedBgText has pinned
4. Only 2 .pinnedBgText__text items should show at one time. Then on scroll, show the next 2 (2 text items should always be visible). I'm trying to achieve a reveal animation like this: https://imgur.com/AjyZt8V

 

Currently:

 

1. My batch animation begins when the section hasn't pinned yet. I have tried start: "bottom", but this breaks the animation.
2. I'm unsure on how I should approach item 4 in the above list.

 

In a previous demo, I have each text element translating up. However, now I'm looking for 2 items to reveal, then on scroll, two more animate up (like in the video above).

 

See the Pen BaxXBwg by amit_rai95 (@amit_rai95) on CodePen

 

Suggestions on how I can go about this?

 

See the Pen JjvgZjE?editors=1010 by amit_rai95 (@amit_rai95) on CodePen

[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 "here is my list of requirements...please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

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

 

I'd suggest breaking your questions down into bit-sized chunks and just focusing on one piece at a time. Create a forums thread for each one over time. Solve the first one, then more on to the next rather than "it should do ___ and then ___ and also ____ and then when ___ hits ___ then it does ___"

 

You'll significantly increase your chances of getting good help if you simplify things and provide a very clear minimal demo. 👍

[amit95]

Hi @GSAP Helper,

 

My above list isn't a list of requirements I'm looking for solutions to per se (not expecting someone to build it out for me). That was just a pseudo map of how I'm trying to get my animation to work.

 

I've provided two minimal demos in the question. 

• The first Codepen showcases my existing approach to how I'm showing two elements at a time (by translating them up and out). I put this demo in as I'm trying to explore making 2 text elements animate in together (like in the video I've posted above) rather than animating them up separately, as it is currently. I thought there may be something simple I can tweak in this demo to make it work as it does in the video.
• My second demo showcases the use of batch to stagger the elements. But my question in relation to this was that the animation starts before the section has pinned and the demo showcases this.

[Cassie]

Hey there, I read this a few times and I'm not really clear on exactly what it is you're attempting.

 

I think Jack's advice of breaking it down into chunks is good. It's also a lot easier for people who want to help. 

 

I think this little tip/approach might be useful for you though. It seems like you're possibly thinking a little too much about the scrolling part before getting the animation working the way you want?  👀

If you've got an animation that you want to play *while* a section is pinned. It's often a good idea to create an animation timeline and then pin a section within the animation timeline. e.g.
 

let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".container",
      pin: true, 
      start: "top top", 
      end: "+=500",
      scrub: 1, 
    }
  });

// add animations to the timeline
tl
  .to(".box", {rotation: 360})
  ...