Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RandallHolbrook

scrollTrigger: I need help with section fade-in/fade/out

Recommended Posts

Hi all, I am new to GSAP and scrolltrigger,

I may have bitten off more than I can chew. I told a client i could mimic the way the sections fade in and out on this page: https://meiomi.com/wines.

I found "Looped "Scrolling" Section Transitions - ScrollTrigger" at 

See the Pen ZEpRKbZ by RNDL (@RNDL) on CodePen

, thinking it was pretty close, as it opens sections without visually scrolling, but I need  to animate the section content as well. I have a lot of questions. Is anybody willing to do a consultation with me to see what can and can't be done? 

A few things:

I am planning on building the site with Oxygen page builder. I have a sandbox here: Seven Rings - Sandbox (randallholbrook.com)

The content slowly disappears after a few scrolls, a blank section is created if I apply a footer to the page.

Content on the second section doesn't animate (or show). The content is animating out, where I would just like a fade.

I have been poring over the docs, did a snrkl.tv course, and watching lots of tutorials, but I am not quite getting the gist of combining the disparate parts into a whole.

Thank you in advance for your help!

 

 

 

 

See the Pen zYKaoBY by RNDL (@RNDL) on CodePen

Link to comment
Share on other sites

I love Meiomi :) 

 

2 hours ago, RandallHolbrook said:

what can and can't be done? 

Most anything can be done with enough work. Whether or not it's worth your time is a different question :) 

 

2 hours ago, RandallHolbrook said:

I have a lot of questions

If you have a specific question you're welcome to ask in these forums. We'll do our best to provide all the help that we can for free.

 

2 hours ago, RandallHolbrook said:

Is anybody willing to do a consultation with me

We at GreenSock have started to do some premium consultations. If you'd like one of us to work with you, please reach out to us via the contact page. If you'd like help from other people, there's a Jobs and Freelance forum that you could try posting in but we don't vouch for anyone who posts there. 

  • Like 1
Link to comment
Share on other sites

Thank you. 

Can you navigate between pages using scrolltrigger? (It appears that is what the meiomi site does ?

 

Link to comment
Share on other sites

8 minutes ago, RandallHolbrook said:

Can you navigate between pages using scrolltrigger?

That question doesn't make much sense. ScrollTrigger is for scroll-based animations. That's it :) 

 

You can create the effect that you see on the Meiomi site using GSAP + ScrollTrigger without issue but GSAP and ScrollTrigger don't have any built-in functionality to dynamically load new content and replace the current content. You can use a different library (like Barba or Highway) for that part. When the new content loads you can then use GSAP and ScrollTrigger to animate things as you want to. Or you could have all of the content on the same page and just use GSAP and ScrollTrigger to animate it.

 

Does that make sense?

Link to comment
Share on other sites

Thanks, Zach

I tried using barba, the leave animation worked great, but the enter never worked. Again, I read there are issues with Oxygen builder and tried the remedies i found in those forums, but no good.

Link to comment
Share on other sites

  • 2 weeks later...

Hi Zach (and other helpful coders),

Where ( and how?)  would I create a timeline to include the h1 in this pen? As stated above, I need to animate the page content (like the h1 in this instance)

like the x transition here, and then slide out before the section fades out. as it is,  can scroll by the h1 animation quickly and stop it from ever playing again so i think the triggerActions is in the wrong place. I really appreciate ELI5 help!

 

Am I heading in the right direction? updated pen:

See the Pen LYRobjx?editors=0010 by RNDL (@RNDL) on CodePen

 

 

 

Edited by RandallHolbrook
updated codepen
Link to comment
Share on other sites

I don't really understand what you're really after. I think it would help you spent some time to learn the basics of GSAP. The Getting Started article is a great place to start. The ScrollTrigger documentation and video is also a great resource for this sort of thing. 

 

You can add a CodePen by just pasting in the link - it should auto-embed. Please make sure to use the "fork" button when creating new versions of your pens to include in these forums so that context isn't lost. 

Link to comment
Share on other sites

OK, here is a simple ask, how do I make the h1 leave and enter moving in the same direction?

tl.to("h1", {y:40, autoAlpha: 0, duration:.4});

tl.to("h1", {y:40, autoAlpha: 1, duration:.4});

they cancel each other out.

I really have read the getting started, watched videos, did Carls' course. I think the pen I picked as a starting point is a bit above my JS skills, which was never one of my strong points. Thanks

 

 

Link to comment
Share on other sites

2 hours ago, RandallHolbrook said:

they cancel each other out

They don't cancel each other out? Since you added them to a timeline then it will be sequenced. I think if you made a minimal demo of the situation it'd be helpful. 

  • Like 1
Link to comment
Share on other sites

I really appreciate your time. Thank you.

if I switch one to y:-40, they animate up and down, but i would like them to fade-in up and fade-out up.

It is happening here:

See the Pen LYRobjx by RNDL (@RNDL) on CodePen

Link to comment
Share on other sites

There are a few things wrong with your approach:

  • You're making one of the most common GSAP mistakes of using a general selector for your tweens ("h1") when it should be one specific to the section that you're animating.
  • You're re-using the same variable name (tl) when you should either not using variables (they're unnecessary in this case) or name them different things.
  • You're using a .to() on the new section when you should be using a .from() or .fromTo().

Here's one way of setting it up:

See the Pen gOwJxyW?editors=0010 by GreenSock (@GreenSock) on CodePen

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

Thank you, Zach!

I will implement this in my project. That is helpful, and makes a lot of sense. I could neve come up with that on my own. I look forward to joining the club when I get paid!

  • Like 1
Link to comment
Share on other sites

18 hours ago, ZachSaucier said:

You're re-using the same variable name (tl) when you should either not using variables (they're unnecessary in this case) or name them different things.

This was copied from one of the videos with the "Freds". Do I just use .to or .from and drop the tl?

Also, help me to understand what "overwrite" does in:

gsap.defaults({overwrite: 'auto', duration: 1}); 

I couldn't find it in docs. 

Edited by RandallHolbrook
additional Q
Link to comment
Share on other sites

5 hours ago, RandallHolbrook said:

Do I just use .to or .from and drop the tl?

You can view what I did in the demo that I posted.

 

5 hours ago, RandallHolbrook said:

gsap.defaults({overwrite: 'auto', duration: 1}); 

From the tween vars docs:

overwrite If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false.

 

5 hours ago, RandallHolbrook said:

This was copied from one of the videos with the "Freds".

That's @Carl's stuff :) 

  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

Hi all, I am new to GSAP and scrolltrigger as well, this looks amazing, but I'm really struggling with how I would add just a standard scrollable div above and bellow?

 

See the Pen poazvKZ by bondandcoyne-craig (@bondandcoyne-craig) on CodePen

Link to comment
Share on other sites

39 minutes ago, Craig Johnston said:

Hi all, I am new to GSAP and scrolltrigger as well, this looks amazing, but I'm really struggling with how I would add just a standard scrollable div above and bellow?

What do you mean by a "scrollable div"? You want a <div> that has its own scrollbar above and below? Your demo doesn't show anything like that, so I wasn't sure if I misunderstood.

Link to comment
Share on other sites

Hi Thanks for getting back to me. What I mean is, I'm trying to create it so that the content above the scroll triggered slider is normal scrollable content (just like you can scroll on this page). I have attached a screenshot below to try and articulate what I'm trying to achieve.

44261459_CleanShot2022-04-29at08_32.56@2x.thumb.png.887f18335176d40dfe85614396c63743.png

 

Link to comment
Share on other sites

Here is a demo that has a normal scrollable div on top and bottom with a ScrollTigger animation in between. Be sure to check all the demo's on https://greensock.com/st-demos/ there is probably something in there that closely matches what you are looking for.

 

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

Link to comment
Share on other sites

Hi @mvaneijgen, thanks for sharing this, I did see something similar to this demo when I was searching for solutions, however the reason why I was trying to edit the solution above was because the slider populates dynamically, whereas this one that you shared is hard coded. Does that make sense?

Link to comment
Share on other sites

I see you're not the original poster. I would recommend just create a minimal demo with what you can get working, nothing fancy just some colored divs and start a new topic when you have that.

 

Making it dynamic or not doesn't really matter for scrollTrigger, it just has to do how you code it up.

Link to comment
Share on other sites

Hello @Craig Johnston

 

You do have a typo in the demo you initially provided (comma instead of semicolon in the inline-styles of the container) that's why things don't display how you'd imagine to begin with.

 

// bad
<div id="test" style="position: relative, height: 100vh">
  
// better
<div id="test" style="position: relative; height: 100vh">

 

Next you'll now need to make sure to pin the container so it stays in place when it hits the top of the window, and then you'll need to adjust the start and end for it to work. For the first panel with the index of 0 you could set the start to 'top top' and for all the others make it dependent on the end of the previous ScrollTrigger e.g., so something like this maybe:

 

start: (self) => i === 0 ? "top top" : self.previous().end,
end: () => "+=" + innerHeight,

 

Is that what you were going for?

 

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

 

 

 

As a sidenote: you might want to consider using a .fromTo tween instead of the .from tween for the actual animation/s because if you scroll back up quickly, you might notice the text is not going back to the center (where it was initially at). So here it is using the logic for the tweens initially provided by Zach, just to show the differrence it makes.

 

I hope that will help. Happy Scrolling!

 

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

 

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

  • 1 month later...

Hi guys, 

I'm new here and I'm sorry in advance for every mistake I can do here (also for my english), I'm using GSAP for little jobs, and it's wonderful, but here I can't solve this issue:
I've got three  .panel(s) areas that are 100vh.
The .panel(s) have vertical scroll, and before them I've got a banner with 100vh and after them I've got a footer.
The desired behavior is that after the banner, scrolling down,  the first panel is pinned, then the second and then the third (and so on) arrive, changing background color and text.
I've tried to implement @akapowl code but in first instance (when you refresh) it doesn't work properly because it only shows the third .panel, it works only at the second scroll session (when you turn back scrolling up...here it works perfectly!). I'm not able to understand what I'm missing...
Can someone help me to understand what I'm doing wrong? Thank you to everyone here, you are amazing!


Here my Codepen:

See the Pen jOZzbVE?editors=1011 by chiaralyn (@chiaralyn) on CodePen

Link to comment
Share on other sites

 

Hello there @Claire

 

Looks like you've only got a typo in your CSS - you forgot the leading dot on the .panel class here which sets all but the first panel to hidden

 

panel:not(.first) {
  opacity: 0;
  visibility: hidden;
}

 

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

 

  • Thanks 1
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.
×