Jump to content
Search Community

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

revolutionnaire test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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! 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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! 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 

 

 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...