Jump to content
GreenSock

Ozzy-U

Scroll Trigger change the position of a markers

Recommended Posts

image.png.423f3595249862f19d07bda7260d8e1d.png

 

onMounted(() => {
  //fadeIn
  const fadeIn = gsap.utils.toArray(".fade-in")
  fadeIn.forEach((bg, i) => {
    console.log(bg)
    gsap.to(bg, {
      scrollTrigger: {
        trigger: bg,
        start: "top 40%",
        end: "top 20%",
        scrub: 3,
        markers: true,
      },
      opacity: 1,
    })
  })
})

 

The position of the scroll trigger markers in the onMounted can be adjusted using the 'start' and 'end' properties,

but how do I adjust the 'start' and 'end' of the pink object on the left side of the image?

Link to comment
Share on other sites

If I understand your question correctly, that's controlled by the first part of the "start" and "end", as explained in the docs and video. So, for example, if your trigger element is the pink <div>, and you do this: 

start: "top 30%"

That means "when the top of the trigger element hits 30% down from the top of the viewport". So you can change the "top" part to be something else, like "center" or "25%" or "50px"

 

I hope that helps. 

 

Link to comment
Share on other sites

Thank you for your answer. But the problem hasn't been solved.

 

image.thumb.png.a10410e26c867e55dadb60660eb42096.png

 

I mean, I want the pink div area 'start' and 'end' to go to the center of the pink div area. Like the image above.

 

Is it right to write "top 30%" of the answer you gave me in the JavaScript area? Like the image below?
(Sorry there is no codepen link.)

 

image.png.7aa2a903ab4d405ddcb8beb5383a1b28.png

Link to comment
Share on other sites

It looks correct according to your code. By the way, you put "start" in the ScrollTrigger object (correct) and ALSO in the tween object (incorrect). 

 

I think you might be getting confused by focusing too much on trying to move the markers instead of just thinking about when the ScrollTrigger should actually start and end. From what I can tell, ScrollTrigger is setting it up exactly as you requested in your code. If you're still struggling, please provide a minimal demo with just some colored <div> elements to show the problem (don't include your whole project).

 

From your arrow/drawing, it looks like you'd want something more like start: "center 30%" (though I can't really tell because I can't see how tall the bg element is). Again, a minimal demo will be essential to get you better help. 

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.
×