Is It Possible That the Current Fold Uncovers the Next Fold?

[revolutionnaire]

Is it possible for the current fold on the viewport to uncover the next fold?

 

This is what I'm doing right now, but I can't seem to achieve the effect I want to achieve: https://codesandbox.io/s/uncover-next-fold-l3zl7q

[mvaneijgen]

Layout is key when working with GSAP.

 

I've forked your code and disabled ScrollTrigger. There is no amount of ScrollTrigger code that will get you to where you want, you will have to fix the animation at first and to fix the animation you'll have to fix your layout with CSS. 

 

So if you want your two elements to overlap each other, you'll have to write CSS that they are overlapped. I challenge you to try and fix your layout your self, because it is so important to first have all your elements where you want them to be with CSS before you start animating.

 

And also: 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. 

 

https://codesandbox.io/s/uncover-next-fold-forked-3t64vh

[revolutionnaire]

Thanks! I thought GSAP can actually do that without overlapping the two sections in the layout. I asked because the height of the scrollable items would be reduced. How can I trigger the animation using ScrollTrigger if they are overlapped in the layout?

[mvaneijgen]

You can set an end trigger in GSAP. You've set it to end: "top top", which makes it that when the top of the element hits the top of the browser it will be done, eg it will already be done when it has started in your case, so nothing will really happen.

 

You can change this to be end: "top+=3000px top", which creates a scrollable area of 3000px or you can do something fancy end: `top+=${window.innerHeight * 3} top`, which sets the scrollable area to 3 times the window height. 

[revolutionnaire]

Wouldn't the top of '#fold-4' and '#fold-3' be the same if they are overlapped using CSS?

[mvaneijgen]

Yes, but again: forget about ScrollTrigger, first fix the animation, if that is working as you want, post the minimal demo here and it will be trivial to fix ScrollTrigger 

[revolutionnaire]

I've updated the sandbox: https://codesandbox.io/s/uncover-next-fold-l3zl7q.

 

For some reason, setting the position of #fold-3 and#fold-4 to absolute doesn't seem to work, so I just used relative.

[mvaneijgen]

Codesandbox was fighting me, so I've moved your code to a Codepen, much easier to work in. 

 

So, this is the animation you want right? Just the orange block animating away

 

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

 

If that is what you want all you need to do is enable ScrollTrigger to see how that works on scroll. I've put a lot of comments in your code (css and js ) to better explain things, be sure to read through them. Again, CSS is really important! You first have to lay everything out before you even think about animating. Hope it helps and happy tweening! 

 

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

[revolutionnaire]

Wow! I was doubting it was possible, but you made it happen. Thanks!

[revolutionnaire]

Is it best practice to separate the animation from the ScrollTrigger, which you placed in the timeline? I'm not exactly sure what makes it easier to understand, when you separate it from the animation.

[Rodrigo]

Basically separating the animation from ScrollTrigger helps you focus just on the animation first. Once the animation is complete and working as you expect, then you can add ScrollTrigger and solve the problems and challenges that come from that.

 

Otherwise you are trying to solve two different problems at the same time without even knowing if one could be or actually is affecting the other. It's like trying to untangle a skein from both ends at the same time, is better to just go in one direction and solve the next knot in that direction and not worry about the knots that lay ahead.

 

Just my two cents on the subject.

Happy Tweening!

[revolutionnaire]

Thanks! That makes a lot of sense. I'll do that.

[revolutionnaire]

Is it possible to do this to three consecutive sections? The first and second sections nested under the .overlap div will uncover the following section. I'm just implementing it now, and I'm not sure how the ScrollTrigger will work, if it's even possible.

[mvaneijgen]

44 minutes ago, revolutionnaire said:

if it's even possible.

That is the beauty of GSAP, everything is possible the only thing holding you back is your creativity. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. 

 

So just try your hand at adding a new second, again just focus on the animation and post back here with the versions you've tried, the more the better! 

[revolutionnaire]

Thanks! This is probably just beginners' frustration.

 

So I did some googling and I found this.

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

 

Does ScrollTrigger work with more than one tween in one declaration? In here, it seems like it does. I thought it only works on one tween per ScrollTrigger.

 

I implemented this, and I was also wondering if I'm correct, that end: '+=300%' adds the necessary space to .pin-spacer so that the page scrolls even if they're all stacked on top of each other and the height of #container is the height of one section.

[revolutionnaire]

Is this possible with ScrollTrigger? Can the position of #section-3 be reset, when the tween is done? That way, it's already in the viewport.

[mvaneijgen]

There are multiple ways to use and implement ScrollTrigger, see my previous point

 

On 7/28/2023 at 8:42 AM, mvaneijgen said:

That is the beauty of GSAP, everything is possible the only thing holding you back is your creativity. 

 

Here is a short hand, where if you know you will be using just one tween and you want to happen on scroll you can define all the logic in one GSAP tween (see the pen you've posted in your previous topic https://codepen.com/GreenSock/pen/BaowPwo), but this is highly optimised and personally I find it better to define a timeline and let ScrollTrigger control that timeline, even if there is just one tween on that timeline. Creating a timeline with a ScrollTrigger is just more versatile and there is always time to optimize code later, when everything works, because what is there to optimize if it isn't even working yet 🙃

 

2 hours ago, revolutionnaire said:

Can the position of #section-3 be reset, when the tween is done? That way, it's already in the viewport.

 

I don't understand the question. Your 3th and 4th section are not part of your .stack element. Below a fork of your code where the elements are part of the .stack and with a timeline written out which does all kinds of stuff to your sections. ScrollTrigger is commented out, but if you enable it on the timeline it will animate this timeline on scroll. Your end is set to +=200% which will set the end to 200% of the triggers height, if you set markers: true, to your ScrollTrigger object you can see where the markers are an thus see what it is doing an thus inspect if what you think it should do is correct with what it visually is doing.

 

https://codesandbox.io/s/uncover-and-cover-a-section-forked-zxv5dm?file=/index.html:213-218

 

There is just so much you can do with GSAP and that isn't possible to explain in just a few post. My advise would be watch every video on the GSAP YouTube channel https://www.youtube.com/c/GreenSockLearning/videos even the video you think you don't find interesting, there is just so much general knowledge to gain from them and if you've watched all those check our own @Carl YouTube channel https://www.youtube.com/user/snorklTV/videos even more in depth tutorials that explain certain parts of GSAP that you never knew that were possible and start experimenting. I like codepen for that, because you can just keep forking your work and fall back if new ideas are not working, try get your hand dirty and break things. Hope it helps and happy tweening! 

[revolutionnaire]

Thanks for the links. I'll take a look at GSAP's and Carl's YouTube channel

 

About your forked sandbox (and at the risk of sounding bratty, sorry): that's not exactly what I want. I want the third section to cover the second section when it scrolls into view. That's why I commented out the ScrollTrigger on both tween: to show you the outcome I want to happen—aside from it not working.

[mvaneijgen]

Yes. That is why I’ve send you a version that is way over the top, to show wat is possible, so you can modify it to suit your own need.  

[revolutionnaire]

Oh, okay. Got it.

[revolutionnaire]

I got the animation to work, but I'm struggling with ScrollTrigger. Is it okay if I get some help?

 

I didn't mention this, but there's a horizontal scrolling section involved, so I included it in the code.

 

Here it is: https://codesandbox.io/s/uncover-and-cover-a-section-ghmsg3?file=/src/index.js:376-515

[mvaneijgen]

Ok, this is really important there are some caveats, but ScrollTrigger CAN'T be on multiple tweens! It can only control a whole timeline.

 

Please check out: ScrollTrigger common mistakes

 

 

Below the fork of your pen with one ScrollTrigger controlling the whole timeline. I saw that you had different ST settings for different tweens, this is NOT possible with one timeline. You will have to create separate timelines with separate ST settings to get that to work, but I'll leave that for you to figure out, just create like 10 versions and try out different ideas to get to your end goal, but this is a great starting point to get off from. I've put comments in your JS code to explain certain parts. Hope it helps and happy tweening! 

 

https://codesandbox.io/s/uncover-and-cover-a-section-forked-7wv6yg?file=/src/index.js

 

Also check out the following video for some more ScrollTrigger tips 

 

 

[revolutionnaire]

Thanks so much for being patient with me. It's great that you got it to work, but I'm confused. Sorry. How did the horizontal scroll get triggered by scrolling without a ScrollTrigger? Does ScrollTrigger work even with tweens applied to the descendants of the trigger? How does ScrollTrigger care about duration?

 

I've separated my timelines into intro and outros of sections. I placed the stacked sections into one timeline. Still learning how to do it properly. I thought one timeline is ideal, but based on the link you sent, it's not.

[mvaneijgen]

const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: ".stack",
    start: "top top",
    end: "top+=300% top",
    scrub: true,
    pin: true,
    markers: true // Show what is going on with markers
  }
});

This is what triggers everything that is on the variable called timeline, so every twee you put on that timeline will be controlled by ScrollTrigger 

 

9 hours ago, revolutionnaire said:

Does ScrollTrigger work even with tweens applied to the descendants of the trigger?

No, it will work on everything that is put on a timeline. 

 

9 hours ago, revolutionnaire said:

How does ScrollTrigger care about duration?

Check the video I've posted at 1:29. If there is a tween of 0.5 seconds and a tween of 1 seconds with a ScrollTrigger that is 300px long the frist tween will be played over 100px an the second tween over 200px.

 

9 hours ago, revolutionnaire said:

I've separated my timelines into intro and outros of sections. I placed the stacked sections into one timeline. Still learning how to do it properly. I thought one timeline is ideal, but based on the link you sent, it's not.

It is ideal if you want to control long animations with the same settings, If you want different types of controls eg with snap you'll have to create two timelines with both their own ScrollTrigger setttings.