Jump to content
Search Community

Animate elems within a section scrolltrigger

Degendev test
Moderator Tag

Recommended Posts

Hi, I've been trying to get something to work and after browsing the forums and google, reading a lot of topic and trying a lot of things.
I am currently at a roadblock where I have no clue how to continue.

Explanation

I have a wrapper and 3 sections, what I envision is that my wrapper is pinned and my first section is always visible on load (this works).
Upon scrolling down I want to fade out my first section and fade in the second section with a scrub (this also work). Now where I am stuck is, is that I want to have specific elements within the section to fadeIn and stagger and/or add a class when said section is currently active.

I already tried using 'toggleClass()' but this seems to work globally and not per section that fades in.

Here's a codepen of what I currently have.

 

Any help is appreciated!

See the Pen MWqmrLb by djilanos (@djilanos) on CodePen

Link to comment
Share on other sites

Hi,

 

There are mainly three problems in your setup.

sections.forEach(function (elem, i) {
  gsap.set("section", { zIndex: (i, target, targets) => targets.length - i });
  var smallTL = gsap.timeline();
  smallTL
    .to(elem, { autoAlpha: 1 })
    .to(elem, { autoAlpha: 0 }) // <- 1
    .to(elem.querySelector/* 2 */(".fadeThis"), { opacity: 1/* 3 */, stagger: 0.5 })
    .to(elem.querySelector(".fadeThis"), { opacity: 0, stagger: 0.5 });
  largeTL.add(smallTL);
});
  1. You are setting the autoAlpha (opacity + visibility) of the entire section to 0, so nothing inside the section is visible after that.
  2. You are using querySelector to get the elements inside the section, but querySelector only returns the first one. You need to use querySelectorAll. Another option is to use GSAP Selector to get the elements of that particular section.
  3. You are only animating the opacity of the fadeThis elements, but before the loop you use a set() instance to make their autoAlpha 0, so you're not changing their visibility, so regardless of animating the opacity they won't be visible.

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Hi Rodrigo,

 

Thanks for the explanation!
I did use querySelectorAll but it didn't change anything, but I guess I just didn't read the documentation good enough

about the difference between autoAlpha and Opacity.

Thanks again! 😎

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