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. 

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. 

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 3
  • 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

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