truAscention Posted March 3, 2021 Share Posted March 3, 2021 Hi All, I've been working on a rotation slider based on gsap. I seem to have it down, however its not exactly hitting 0 on mobile. Any help would be awesome. Thanks guys. See the Pen XWNYeJp by stewart-martin (@stewart-martin) on CodePen Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted March 3, 2021 Solution Share Posted March 3, 2021 Hey truAscention. If you'd like our help debugging, please create a minimal demo of the issue with all irrelevant parts stripped out. Often times it's best to start from the ground up. Link to comment Share on other sites More sharing options...
truAscention Posted March 5, 2021 Author Share Posted March 5, 2021 Hi Zach, So after your suggestion and stripping everything out, I found that I was calculating everything based on window.outerWidth which is what was throwing the slider off in terms of width. I also found that through my CSS the height was not being set correctly and it was defaulting to zero. So for those who run into this same problem, if you have your slider within a container with overflow hidden. Use that containers width and height for your slides. Then calculate the transform using the container width/height. Remember that transform starts at the current position and then moves the item to your desired output. For example. If your slides slide in right to left and your starting postion is 100vw, calculate the negative position by -Math.abs(containerObj.width). Then to move it off the screen it will be -Math.abs(containerObj.width * 2) 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