What would a GreenSock do here? Scroll-Trigger Logic

[FirstEight]

Hey green tinted GreatSocks,

 

i just started my first Project with socks on!  Iam glad that you all exsist.

I have some unclear points where i maybe decided a bit to fast and for sure wrong.  

 

well lets dive in @ https://underground.brainarea51.com/first8/

sorry for the 10mb header-video prototype placeholder  

 

I wanted a scroll-snap-type solution - coupled with scroll-trigger so iam using a scrollbar inside a div container as you can see.

and i use timelines for the 100dvh sections. So far so well. 

 

in the second section with those tabs expertise tabs i started to wonder, wich could be the best practice for revealing it all tab-wise instead of sectionwise.

 

here the snippet iam talking about:

 

//* -------------------------------------------------------- WHO SECTION

const whoSplit2 = new SplitType('.me .tab h3')
const whoSplit3 = new SplitType('.me .tab p')
let whoTitles = document.querySelectorAll(".me .tab .tab-title .char")
let whoWords = document.querySelectorAll(".me .tab p .word")

const whoTimeline = gsap.timeline({
  scrollTrigger: {
    trigger: "#who",
    scroller: ".contentwrap",
    start: "center 100%",
    markers: true,
    end: "center 0%",
    toggleActions: "play reverse play reverse"
  }
})

whoTimeline.from(".me .tab", {
  duration: 1,
  y: 50,
  opacity: 0,
  stagger: 0.45,
  ease: "back"
})

whoTimeline.from(".me .title-line", {
  duration: 1,
  width: "0%",
  stagger: 0.25,
  ease: "power4"
}, "-=1")

whoTimeline.from(whoTitles, {
  duration: 0.05,
  y: -50,
  opacity: 0,
  stagger: 0.04,
  ease: "power3"
}, "-=1")

whoTimeline.from(whoWords, {
  duration: 0.35,
  x: 50,
  opacity: 0,
  scale: 2,
  stagger: 0.02,
  ease: "back"
})

how can i target all expertise-tabs to set up their own trigger without repeat and hardcode it.

also the actual state is a mess on mobile, to much appearing to early and disappearing to early. I hope you can help me out a bit

 

You Guys are GREAT :)

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[FirstEight]

 

CodePen Demo

 

See the Pen WNKjvBQ by JayBERLIN (@JayBERLIN) on CodePen

[Rodrigo]

Hi @FirstEight and welcome to the GreenSock forums!

 

This basically boils down to JS logic and selectors, nothing more. This seems to work the way you intend:

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

 

The idea is to get every section and loop through the tabs of the section. Since all tabs will have the same animation and structure a loop is the solution for creating this.

 

Another alternative you could look into is ScrollTrigger Batch:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[FirstEight]

Well thank you.

That been good hints!

 

You made my day with that one. 
I gonna implement this. 

 

Gonna research for the utils of gsap, they promise to be useful.