Dennyno Posted November 3, 2021 Share Posted November 3, 2021 Hi guys, I've seen many tutorials and demos but still got issue while trying to make my codepen working. I may need to make my section horizontal scroll from right with scrub, but.... it simply stays there. I dont know if it's better to make the container to scroll, or it's inner columns. (guess the second) Btw none of'em works on my example. What am I missing? Thanks for any help. See the Pen zYdpqwM by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted November 3, 2021 Solution Share Posted November 3, 2021 Hello @Dennyno 1 hour ago, Dennyno said: Btw none of'em works on my example. You forgot to load ScrollTrigger in the first place. Then, when loaded and you take a look at the markers (e.g. in full-window mode) you will notice that they already passed their start and end so you will have to adjust those (start and end) and also how you target the elements. Right now you are doing a document.querySelector to populate your variable, but that will only get the first element with that class in the document flow. For targetting all of them, use document.querySelectorAll. Also one of your block-columns is missing a 'b' in the class-name in your mark-up. If you correct those things mentioned above, you will already see it working way better. See the Pen 1c292d62b61cb7629513a88d36ebf6f6 by akapowl (@akapowl) on CodePen 1 Link to comment Share on other sites More sharing options...
Dennyno Posted November 3, 2021 Author Share Posted November 3, 2021 My fault @akapowl ! Thanks for clarifying! I handled this way, which seems to work too: async function horizontal_snap(){ let hor_scroll = document.querySelector(".main-what-we-do-home"); gsap.fromTo(hor_scroll, {x:0}, { x: -300, scrollTrigger: { trigger: ".main-what-we-do-home", anticipatepin: 1, pin: true, stagger: .5, scrub: 1, start: "center center+=70", end: "bottom center+=500", markers: false, invalidateOnRefresh: true, } }); } horizontal_snap(); or is it wrong? Link to comment Share on other sites More sharing options...
akapowl Posted November 3, 2021 Share Posted November 3, 2021 As far as I can tell the only thing you changed is that now you are selecting and tweening on the container? Usually it is best to avoid tweening positioning of the elements that are set as your trigger as that can cause problems, but as you are only tweening on the x-axis there and the start and end are dependent on the vertical positioning, I don't think that should be a problem for now - but I'm also not saying that it couldn't become a problem later on, depending on where you are going with this 2 Link to comment Share on other sites More sharing options...
Dennyno Posted November 3, 2021 Author Share Posted November 3, 2021 Uhm, gonna try customizing your demo then! Thank you. ☺️ 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