Headings marquee by sections observer

[Dennyno 29 Likes (Newbie)]

Hi, 

 is this something doable with Scrolltrigger / Scrollproxy?

Making a marquee following the id of the sections.

I made a quick idea with just CSS to show the markup.

Thanks

See the Pen JjpGjPq by DedaloD (@DedaloD) on CodePen

[Cassie 4,223 Likes (Superhero)]

Heya!

 

There's a lot of posts in the forums on marquee effects. This one should be a good place to start
 

 

I'm not sure how exactly you want to link it to scroll, but yes, that's possible too!

Why don't you give the marquee effect a bash and then we can give you a hand hooking it up to ScrollTrigger if you still need help?

[Dennyno 29 Likes (Newbie)]

Hi @Cassie and thanks ☺️
 

Yep technically I’m able doing that, just a loop and translate.. but how to synchronize each item to its anchor?

 

aka I mean, if I scroll to elem X, then the horizontal carousel scroll to its related element X, centering it…

 

It’’s something doable via Gsap or do I need to pass via interception observer?

[Dennyno 29 Likes (Newbie)]

Still no solution, maybe too too complex issue?

Uhm...

[Cassie 4,223 Likes (Superhero)]

Sounds like you could use ScrollTrigger to detect the section and then move the nav to a certain position depending on which section you're in.

Maybe something like this? (pseudo code)

Pop together a pen with what you've tried and we can take a look!
 

sections.forEach(section => {
ScrollTrigger.create({
  trigger: section,
  start: "top center",
  onToggle: self => {
    console.log("toggled, isActive:", self.isActive)
    gsap.to('.nav', {
      xPercent: something
    })
  }
});
})