aka_lux Posted September 9 Share Posted September 9 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 5 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: 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 More sharing options...
Solution Rodrigo Posted September 9 Solution Share Posted September 9 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! 1 Link to comment Share on other sites More sharing options...
aka_lux Posted September 9 Author Share Posted September 9 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now