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.

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;