gsap timeline stacking and removing the previous element

[gsap-user]

Hi folks,

just looking into gsap timeline and trying to figure out how to only display one item at a time.
have a look at my codepen where the text is overlapping on scroll
just figuring out how to set the opacity on the previous one to 0 would help I guess.

Thank you very much

See the Pen vYqGNGM by gsap-user (@gsap-user) on CodePen.

[gsap-user]

also adding another requirement I am not sure to do.
having the first item of the timeline already placed at position and only start at the 2nd item to bring them in.
I could exclude it from the timeline but then I'd guess it will not be possible to remove the previous element

[mvaneijgen]

Hi @gsap-user welcome to the forum!

 

I've written a post about this exact issue! I see so many people struggling with this and I my self also fall in this trap sometimes! Please read the following post 

 

 

Staggers and loops are great! But you first have to have a working example before you can start implementing the logic you want. Also keep in mind 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. 

 

I've installed GSDevTools (a plugin only our club members can use, 🤫 but you can freely use on places like Codepen) so you can easily debug your animation. Personally when writing out the animation by hand I like to use five items, because this will give you a better view of where things changes (spoiler alert the first and last item are different the rest you can write in a loop) (double spoiler alert you can target your elements with .y:not(:first-child) and .y:not(:last-child), with these you can write your stagger tweens, try it out and when you get stuck post back here with what you've tried! Hope it helps and happy tweening! 

 

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

[Rodrigo]

Hi,

 

Maybe these demos can help:

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

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

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

 

Happy Tweening!

[gsap-user]

Thanks for the examples  @Rodrigo. The first example seems almost like what I wanna do, but I do lose the image stacking when going with the forEach loop.
this is my setup 

See the Pen vYqGNGM?editors=1010 by gsap-user (@gsap-user) on CodePen.

this is a try with the loop from the first example, where the cards aren't stacking

See the Pen bGPedPX by gsap-user (@gsap-user) on CodePen.

it is also very abrupt and not nicely fading with the opacity.

Thanks for having a look at it. I appreciate it

[Rodrigo]

Hi,

 

I'm sure I follow exactly what you're trying to do here. Maybe something like this?

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

 

Hopefully this helps. If not please provide a detailed description of what you're trying to achieve and if possible include a live demo/site that works the way you intend so we can get a clear idea of what you're after.

Happy Tweening!

[gsap-user]

Hi,

the first example I've shown is my exactly my setup and what I want to achieve, except that the text stacks on top of each other.
I want the cards stacking, while each card has a text that coming in, while the previous disappears.
Would love to show a video of the designers demo but it's too big to share here...

[mvaneijgen]

2 minutes ago, gsap-user said:

Would love to show a video of the designers demo but it's too big to share here...

You could easily upload a video to YouTube or any other video sharing website and post the link here. 

[gsap-user]

I hope that works for you 
Filebin | ik6fcgwkuckmvqyd

[Rodrigo]

Hi,

 

Unfortunately we don't have the time resources to create custom demos or solve specific logic/layout issues for our users, is beyond the scope of what we do in these free forums.

 

Here is a variation of the last demo I linked with some CSS changes to it:

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

 

Hopefully this helps

Happy Tweening!

[gsap-user]

Thank you for getting back to me.
I don't quite understand... I never asked for a custom demo. I posted my fully working demo and was just asking how it's possible to let the previous text disappear, maybe with the extra to even connect the text better to the cards.
I will leave this open to any regular forum user to have a look.

Thanks for your time

[Rodrigo]

If your first demo is working, then it should be simple enough to get the logic from my last demo and use it there. I suspect that the major issue you  have here is the logic in  your loop, nothing more. The code is super simple it just checks if there is a next element in the current iteration of the loop:

images.forEach((img, i) => {
  if (images[i + 1]) {
    tl.to(img, { opacity: 0 }, "+=0.5")
      .to(rightElements[i], { opacity: 0 }, "<")
      .to(images[i + 1], { opacity: 1 }, "<")
      .to(rightElements[i + 1], { y: 0, opacity: 1 }, "<");
  }
});

If you have an array of three elements and the loop is in the final element this images[i + 1] is undefined and he if statement returns falsy and it doesn't run the code, that's all there is to that. Then all you have to do is adapt the HTML/CSS to the animation you're trying to achieve.

 

Finally you can definitely benefit from removing ScrollTrigger and get the animation working as you expect first. ScrollTrigger simply updates the playhead of a Tween/Timeline according to the scroll position nothing more, so sometimes is better to just remove it and just get the animation working. You can use GSDevTools in order to easily debug your animation. You can use it for free in codepen or locally by installing the GSAP Trial package:

https://www.npmjs.com/package/gsap-trial

 

Happy Tweening!

[gsap-user]

Still happy to accept a solution from anyone wanting to help.
the demo is here 

See the Pen vYqGNGM by gsap-user (@gsap-user) on CodePen.

please see the text on the right side stacking instead of moving the previous one out of screen.

[Rodrigo]

Maybe something like this:

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

 

Happy Tweening!