Div wrong position Anchor problem ScrollTo + ScrollTrigger problem with anchor

[thecoello]

Hi! I'm working in this web and i'm using the ScrollTrigger for the horizontal scroll and also I'm using the ScrollTo for the anchors but the problem is that when I clicked in an anchor the div moves to the right anchor but in a wrong position. When the anchor it's clicked then is set the value of the offsetLeft of that div... I'm printing the correct value in the console but the ScrollTo it's setting this value wrong. for example( if the value is 2560 then ScrolTo sets the value to 3000 or something like that... I don't know if i'm doing something wrong. 

 

Thanks  

See the Pen LYWgaXz by manuel-alejandro-guerra-coello (@manuel-alejandro-guerra-coello) on CodePen

[GreenSock]

I don't have time to dig through all that code right now (a minimal demo is always best - please strip out as much as possible), but I did notice a few things right away: 

1. You're loading a REALLY old version of TweenMax AND you're loading the latest version of GSAP. Definitely don't do that. Dump that old TweenMax.min.js file. 
2. You're linking to a bunch of missing resources, like with relative links. That makes troubleshooting difficult. 
3. You're using the very old syntax for some of your code, like the mouse follower. And you don't need a css:{} wrapper.  I'd strongly recommend updating your code to the modern syntax. See 
4. I don't think your logic is correct - "offsetLeft" is not at all the same thing as "scrollTo". The scrollTo value describes how many pixels to scroll whereas offsetLeft describes how many pixels its left edge is from its offsetParent.
5. By default, scrollTo uses the "y" direction, but it sounds like you want "x". So scrollTo: {x: yourValue} is what you should use. 

Hopefully that gets you going in the right direction. If you still need help, please provide a more minimal demo that only has the absolutely essential code to reproduce the issue. 

 

Happy tweening!

[akapowl]

1 hour ago, GreenSock said:

• I don't think your logic is correct - "offsetLeft" is not at all the same thing as "scrollTo". The scrollTo value describes how many pixels to scroll whereas offsetLeft describes how many pixels its left edge is from its offsetParent.
• By default, scrollTo uses the "y" direction, but it sounds like you want "x". So scrollTo: {x: yourValue} is what you should use. 

 

I actually think your logic is right to some point here and you're on the right path using "y" for the scrollTo, as you are scrolling vertically but only faking the horizontal scroll.

 

But there really is a whole lot going in in your demo and I also don't have the time to take a too detailed look.

 

It looks though, like

 

1) you did not set ease: 'none' on your fake horizontal tween so it will use the default ease that GSAP applies to tweens, which is "power1.out" - so that is the first thing that is throwing off your calculations

 

and 2) the amount of scroll (the distance between start and end of your fake-horizontal ScrollTrigger) and the amount of x-translation of the container are not the same ( which often is the case with fake-horizontal-scrolls ) so I am pretty sure that you will have to incorporate the 'offset' / discrepancy between those into your calculations, as is described and explained in detail in this thread here (although there it is explained for triggering animations when certain sections reach certain points - but the gist applies for you too here)...

 

 

 

 

That should do the trick, I think. Give it a try and see if it helps.

 

If you don't get it running properly, it would really help us help you if you'd reduce your demo to an absoulte minimum to showcase your issue with everything else removed, so we can easily dive in.

 

Good luck and happy scrolling  

 

[thecoello]

Hi! first of all, thank you for the respond. I have been trying all day to solve the problem but I can't find the solution. the problem is still happening...

 

I followed all your recommendations and still nothing, also, i used the code from the example that @akapowl give me and nothing.

 

I don't know if it's a problem doing the calculation for the scroll or I don't know (I'm new with gsap).

 

btw, so sorry that I pasted all the whole code, you guys are right, it wasn't easier to find a solution with all the whole code... I updated the code, the html and css as well in the same Code pen project: Code Pen DEMO Tasman

 

Thank you so much.

 

[akapowl]

 

46 minutes ago, thecoello said:

I followed all your recommendations and still nothing, also, i used the code from the example that @akapowl give me and nothing.

 

I see that you included this in your pen, but this is not the part I was referring to.

 

    sections.forEach((sct, i) => {

        ScrollTrigger.create({
            ease: "none",
            trigger: sct,
            start: 'top top-=' + (sct.offsetLeft - window.innerWidth / 2),
            end: '+=' + sct.offsetWidth,
            toggleClass: { targets: sct, className: "active" },
        })

    });

 

That is the part from the demos in the other thread that makes animations on seperate sections trigger when they reach a certain point - and you also did not include the offset in the calculations there btw.

 

What I'm referring to with the offset (which you would have to include with the scrollTo part of your code of course) is this:

 

Quote

 

The offset occuring translates to the 'duration' of that fake-horizontal-ScrollTrigger devided by the distance you are tweening on the x-Axis. Basically you'd have to multiply the intital value[s] [you get for the position to scroll to] with that offset/quotient and things would work as expected.

 

 

So in your case it would look like this

(document.getElementById(div).offsetLeft * (container.offsetWidth / (container.offsetWidth - window.innerWidth)))

 

I also exchanged your ...

document.getElementsByClassName("container") 

 

... for getting the container with ...

document.querySelector(".container") 

 

Does that work better?

 

See the Pen e2c06467844d80f1a9853ffa4067e2ff by akapowl (@akapowl) on CodePen

 

 

[thecoello]

@akapowl Thank you so much for helping me. Now works perfectly