Jump to content
Search Community

Headings marquee by sections observer

Dennyno test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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
    })
  }
});
})

 

  • Like 1
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...