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

[RandallHolbrook]

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

[ZachSaucier]

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. 

[RandallHolbrook]

Thank you. 

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

 

[ZachSaucier]

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?

[RandallHolbrook]

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.

[RandallHolbrook]

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 January 22, 2021 by RandallHolbrook
updated codepen

[ZachSaucier]

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. 

[RandallHolbrook]

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

 

 

[ZachSaucier]

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. 

[RandallHolbrook]

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

[ZachSaucier]

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

[RandallHolbrook]

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!

[RandallHolbrook]

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 January 23, 2021 by RandallHolbrook
additional Q

[ZachSaucier]

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  

[RandallHolbrook]

thanks!

[Craig Johnston]

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

[GreenSock]

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.

[Craig Johnston]

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.

 

[mvaneijgen]

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

[Craig Johnston]

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?

[mvaneijgen]

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.

[akapowl]

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

 

[Craig Johnston]

Thank you so much @akapowl, this is amazing, I will note your comments!

[akapowl]

 

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

 

[akapowl]

11 minutes ago, Claire said:

Thank you very much @akapowl!!! I'm sorry for my embarassing mistake, thank you!!! 

 

No worries, it happens to everyone! A second set of eyes is always helpful.

 

12 minutes ago, Claire said:

But now, when I try to put in my project, I've got this error:

self.previous is not a function
the version of GSAP I'm using is 3.10.4
any idea?

 

It is really hard to tell from just a screenshot - there are just too many possibilities for what could be causing that. Maybe you are loading your files/trying to access elements before the DOM is ready? Are you maybe using React? WordPress? Some build tools? 

 

The GSAP version most definitely is not the problem though, as the codepen demos use the same version.

 

If you can provide a very simple CodePen or CodeSandbox that demonstrates the issue, you'll siginificantly increase your chances on getting a solid answer.