Jump to content
Search Community

Problem with ScrollTrigger target top/bottom

aka_lux test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

First of all sorry, but I can't provide a codepen, I will try to describe the problem the best I can. Basically I have this type of structure:

<div class='middle'>
  <div class='canvas-holder'>
    <!-- [Three.js Canvas] -->
  </div>
</div>

This is the CSS each of this element have:

.middle {
	position: relative;
  	margin-top: 7rem;
}

.canvas-holder {
	position: absolute;
  	height: 100%;
  	
  	// [Three.js Canvas]
  	canvas {
  		position: sticky;
      		top: 0;
  	}
}

The Three.js canvas has a certain size (window.innerWidth, window.innerHeight), with GSAP I wanted to animate the position of a model inside the Three.js canvas. I wanted to move up the model by when I scroll, so I wrote this:

// peeler_model is the model I want to move
gsap.to(peeler_model.position, {
    y: 5,
    scrollTrigger: {
        target: middle_div, // I wanted to take the div as a reference point for the markers
        start: "top top",
        end: "bottom bottom",
        scrub: true,
        markers: true
    }
})

Now with this what I thought would've happened is that by setting the target as the middle_div the first top at the start would have went at the top of the middle_div like this:image.png.d0c3510c598d87fadeadfb8de2221ed6.png

 

But instead what happened was that START went at the top of the body. I don't know how to really fix it, I used percentages instead of top and bottom to fix it a bit, but it would be really helpful if top would go at the top of the target like it always did for me. The only thing I can think of of why this is happening is because the canvas has a parent with absolute positioning, but that's really strange. Anyways thanks in advance for the help.

 

Link to comment
Share on other sites

  • Solution

Hi @aka_lux and welcome to the GSAP Forums!

 

Simple mistake, you're using the property target in your ScrollTrigger config. That doesn't exists is actually trigger,  so ScrollTrigger defaults the trigger to the body tag:

// Wrong
gsap.to(peeler_model.position, {
  y: 5,
  scrollTrigger: {
    target: middle_div, // I wanted to take the div as a reference point for the markers
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    markers: true
  }
})

// Right
gsap.to(peeler_model.position, {
  y: 5,
  scrollTrigger: {
    trigger: middle_div, // I wanted to take the div as a reference point for the markers
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    markers: true
  }
})

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#trigger

 

Hopefully this helps

Happy Tweening!

  • Thanks 1
Link to comment
Share on other sites

8 minutes ago, Rodrigo said:

Simple mistake, you're using the property target in your ScrollTrigger config. That doesn't exists is actually trigger,  so ScrollTrigger defaults the trigger to the body tag

And the fact that I also used it multiple times and didn't realize it was just a typing error...thank you very much!

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