Jump to content
Search Community

Another vertical reveal related question + ScrollSmoother

Freehand Sam test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I know there are a million posts about this cuberto.com effect, but I can't find anyone that has combined the effect akapowl ultimately achieves here: 

See the Pen 71b0d3b98ebd526c8abf2bb4b70ac702 by akapowl (@akapowl) on CodePen

 but swapping out Scrollbar for the ScrollSmoother plugin. I had this basically working with no scrolling library prior to adding ScrollSmoother by wrapping the whole section in a .scroller div that had overflow-y:scroll and a set height of 300vh, since I have 3 section of 100vh each.  But then adding ScrollSmoother broke that, understandably - since it's not going to scroll that internal div. So then I tried changing my "scroller" parameter in my ScrollTriggers to use the #smooth-content div, closer to what the Scrollbar demo does, but to no avail. 

 

Ultimately, I'd like it to scroll down to the gallery (#values) section, pin, and then reveal each of the three images on the right based on the scrub position. But then also slide up the text corresponding text as its section comes into view. I was going to tackle the text part once I got the images going, but any direction as to how to trigger those properly would be greatly appreciated too. I'll probably end up right back here asking anyway. I'm obviously new to this.

 

I'm very grateful for the extremely helpful community here. I've only been playing with GSAP for a week now and it's starting to gel, but unfortunately my client is pushing me into the deep end right off the bat, so I'm humbly asking for assistance.

See the Pen MWQbarm by freehand_sam (@freehand_sam) on CodePen

Link to comment
Share on other sites

Hi Sam,

 

I would recommend going through this thread and reading what I have to say about approaching everything from a purely animation point of view, meaning don't think about scrolling. So instead of thinking about how can I do x when y scrolls into view, think about the animation in an isolated context. That cuberto animation should be pretty straightforward if you just think about what's happening as a normal animation. All you need to do is create a timeline that animates the text container and images up.

 

 

 

  • Like 1
Link to comment
Share on other sites

  • Solution
2 hours ago, Freehand Sam said:

I know there are a million posts about this cuberto.com effect, but I can't find anyone that has combined the effect akapowl ultimately achieves here [...] but swapping out Scrollbar for the ScrollSmoother plugin.

 

I was just wondering, why that codepen of mine wouldn't work with ScrollSmoother, so I quickly reworked it - and it appears to work just fine :) 

 

Blake is totally right, though - It will be a lot easier thinking of this as one long animation that you can easily hook up to one ScrollTrigger, instead of creating a bunch of ScrollTriggers, i.e. one forEach of the images.

 

Nonetheless, here is that linked example working with ScrollSmoother instead of smooth-scrollbar.

 

See the Pen jOZVrZM by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thanks, @OSUblake. You were right. I forgot about scrolling and jut did the reveal animations for when each text panel was visible and it worked on my first shot. So that did it for the left side. Then in regard to my issue with ScrollSmooth, it was a simple as removing "scroller:" parameter from the triggers. Which, obviously, I should have figured out on my own, but am thankful for @akapowl's direction.

 

All set. Thanks again for the great community here.

Link to comment
Share on other sites

2 hours ago, akapowl said:

Blake is totally right, though - It will be a lot easier thinking of this as one long animation that you can easily hook up to one ScrollTrigger, instead of creating a bunch of ScrollTriggers, i.e. one forEach of the images.

 

Yes. I think this is much easier to wrap your head around.

 

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

 

  • Like 2
Link to comment
Share on other sites

Yes, it is. I rebuilt it using that logic and it's much easier for me to understand now.  For whatever reason, I did have to go back and add the bit about z-indexing from the original to keep my last photo from being on top - I'm sure that's related to some parent positioning or z-indexing I already had going on in my site's stylesheets. I also had to set PinSpacing: 'false' otherwise there was a huge space below (bc .text-wrap is 300vh I assume). Again, probably some difference in overflow in my site vs the Pen. But this definitely got me there. Thanks again, guys.

Link to comment
Share on other sites

  • 3 weeks later...
On 5/13/2022 at 7:26 PM, akapowl said:

Nonetheless, here is that linked example working with ScrollSmoother instead of smooth-scrollbar.

 

Hi, had a good go at adapting another variations of this to ScrollSmoother too (this one where the titles pin momentarily before fading up and out

See the Pen 256175b2dab5ddca7073dbc0e64e606d by akapowl (@akapowl) on CodePen

)

 

Not sure what I'm missing to make the pinning work to achieve that momentary text 'pause'? Have tried a few things such as adding height to the wrapper to replace .scroller etc.

 

Also not sure why the structure falls apart after orange panel? Having read the ScrollSmoother docs, thinking this is something to do with replacing the .scroller container with the right CSS for the 'smooth-content' container.

 

See the Pen abqGyBY by matt-rudd (@matt-rudd) on CodePen

 

Thanks as ever!

Link to comment
Share on other sites

 

Hello Matt,

 

that original demo of mine which was a fork from another user's codepen is technically flawed and not correct, which back then I didn't notice (I mentioned this somewhere in a different thread already, which of course you probably haven't seen). It appears to work with smooth-scrollbar (and I think it also does with native scroll) but when implementing ScrollSmoother it shows that it is not set up correctly.

 

For it to work properly, the pinning would have to happen first, before the setup of the other STs - and for those other STs to work then, a wrapper around the pinned part would be neccessary - which unlike the pinned part, would keep scrolling and thus could be used as the trigger element for the other STs.

 

This looks to be working, so you should be able to just tweak the durations/position-paramaeters/starts/ends to your liking if you wanted. But as Blake showed above - it would be way easier to wrap your head around, just using one single timeline with the relevant tweens added to it.

 

See the Pen JjpvrXQ by akapowl (@akapowl) on CodePen

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

8 minutes ago, akapowl said:

 

Hello Matt,

 

that original demo of mine which was a fork from another user's codepen is technically flawed and not correct, which back then I didn't notice (I mentioned this somewhere in a different thread already, which of course you probably haven't seen). It appears to work with smooth-scrollbar (and I think it also does with native scroll) but when implementing ScrollSmoother it shows that it is not set up correctly.

 

For it to work properly, the pinning would have to happen first, before the setup of the other STs - and for those other STs to work then, a wrapper around the pinned part would be neccessary - which unlike the pinned part, would keep scrolling and thus could be used as the trigger element for the other STs.

 

This looks to be working, so you should be able to just tweak the durations/position-paramaeters/starts/ends to your liking if you wanted. But as Blake showed above - it would be way easier to wrap your head around, just using one single timeline with the relevant tweens added to it.

 

 

 

 

@akapowlAhhhh lovely stuff. Thank you! 

P.S. After following your advice and getting stuck into all the docs and supporting how-tos, I've FINALLY managed to get my head around barba.js transitions. ScrollSmoother certainly made it a lot simpler, but it was a bit like learning to wheelie on my bike when I was 10... one day, it just clicks

Thanks again for nudging me along with that stuff ?

  • Like 2
Link to comment
Share on other sites

 

Happy to help :) 

 

Here is that example set up a little more like what Blake suggested above to do instead of the loops - it certainly can still be tweaked a bit (and it doesn't behave exactly the way the original does) but it should be good enough to at least convey the idea.

 

See the Pen vYdjePm by akapowl (@akapowl) on CodePen

 

 

 

42 minutes ago, Mattrudd said:

P.S. After following your advice and getting stuck into all the docs and supporting how-tos, I've FINALLY managed to get my head around barba.js transitions.

 

Awesome, that is great to hear! It's like you said, one day it will just click. Good job hanging in there! ? 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...
4 minutes ago, Jean Polkin said:

Hi everyone, I love that animation, i would love to find a way to change direction (from right to left) of those color boxes.

thank in advance if somebody would help me

 

Why don't you go ahead and give it a shot and then if you get stuck, post back here with a minimal demo?

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to accommodate free "please make a demo that fits my list of requirements " requests. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can 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. 

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...