Scroll on reveal with a function for each box, and get the first box to display by default whilst the others do not.

[Matthew M]

Hi GSAP community, 

I am pretty new to this and I am trying to get boxes to display on scroll, the thing is I need the first box to display by default and when each box is entered, I need a function to run. I need the function to run for all boxes but just not the opacity/autoAlpha. 

I have managed to achieve the display and getting the function to run successfully by using the utils.toArray but the thing is, there is a flicker this is due to me setting the autoAlpha to 0 for all boxes in the array. They then set back to 1 when scrolled. I have overridden this for the first box (the one I want to show by default). But it sets back to 0 for around a few milliseconds and flickers when the marker hits the start point scroll trigger.
TBH I just would like it so that I could add the onLeave/enter/back functions to this box but not the autoAlpha setting, but I just can not figure out the best way to go about it. I had a look at the .batch but was not able to add the onEnter/leave/back function, I also tried adding a class to the first box and using .contains with an if block and then adding the scroll trigger twice, once inside each block one with the autoAlpha and the other without, but that also did not work. 
Here is what I have so far, I would like to get rid of the flicker on the first box, and have the first box fade in after a few seconds but without having to be scrolled to.  

Any advice is much is appreciated 
 

    let tl = gsap.timeline();

 

    const icons = gsap.utils.toArray('.nav__link-container--index');

    icons.map(icon => {

      gsap.from(icon, {

        autoAlpha: 0, // do not want this for the first box / item in the array and would like to set it to 1 for this box by default and stay at on

        scrollTrigger: {

          ease: 'elastic.in',

          trigger: icon,

          markers: true,

          start: 'top 70%',

          end: 'bottom 60%',

          onEnter: () => {

            icon.firstElementChild.togglePlay(); // but I still need these to run when scrolled through.

          },

 

          onEnterBack: () => {

            icon.firstElementChild.togglePlay();

          },

 

          onLeaveBack: () => {

            icon.firstElementChild.togglePlay();

          },

 

          onLeave: () => {

            icon.firstElementChild.togglePlay();

          },

        },

      });

    });

 

    // make first icon display by default.

    tl.to('.first-nav-item', { autoAlpha: 1 });  // This was the best way I could come up with to override the setting, but I get the flicker when it first hits. 

 

    return tl;

See the Pen VwMvGzM by Matteveli (@Matteveli) on CodePen

[GreenSock]

Welcome to the community, @Matthew M

 

I assume you meant something like this?:

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

 

Also, there's no such thing as an "ease" inside a ScrollTrigger. I think you meant to put that on the tween (outside the ScrollTrigger object), but "elastic.in" would be a very strange ease to choose for an autoAlpha animation

[Matthew M]

Thank you @GreenSock! That was what I meant, and apologies for the shoddy code 🙂
That worked, I really appreciate your help and advice. 

I see what you mean for the elasic.in. ease it cancels it out 😔 
I have learnt alot from your example, 
Thanks again.