kmytor Posted July 6, 2020 Share Posted July 6, 2020 Hello, I would like to know how can I calculate half of an object and center it with respect to the window? I tried to make this code but I think I am a little lost .to('.content', { width: '100vw', x: "-100%" / 2, duration: 2, }, "<") Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 6, 2020 Share Posted July 6, 2020 Hey kmytor. I think you're looking to do something like this? It's hard to say without seeing a demo. // Center the content on page load gsap.set('.content', {xPercent: -50}); // ... // Some time later animate the width .to('.content', { width: '100vw', duration: 2, }, "<") Link to comment Share on other sites More sharing options...
kmytor Posted July 6, 2020 Author Share Posted July 6, 2020 Thanks I will try it, if I cannot upload the example, ]Thanks again Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 Or maybe you mean something like this?: gsap.set(".content", { position: "absolute", top: "50%", left: "50%", xPercent: -50, yPercent: -50 }); Like Zach said, though, some of this depends on the context so it's very difficult to know for sure without seeing a reduced test case in CodePen or something. Link to comment Share on other sites More sharing options...
kmytor Posted July 6, 2020 Author Share Posted July 6, 2020 Perfect, perfect if it works for me. I have an other question How can I increase the size of the scroll or how can I duplicate the scroll? try to do this but it doesn't work, multiply the body trigger: "body" * 2, my my idea is that the scroll goes slower since it goes very fast. is there a way to do this? ScrollTrigger.create({ trigger: "body" * 2, animation: photoOnly, start: '34% 35%', end: '45.8% 38%', scrub: true, markers: true, }) Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 I would recommend you read the docs and watch the video because it'll really help you understand how things work. You can just extend the "end" value to make it take longer to scroll. You can use a relative value to make it very simple: ScrollTrigger.create({ trigger: "body", animation: photoOnly, start: '34% 35%', end: '+=500', // scroll lasts for 500px scrub: true, markers: true }); Of course you'd need to make sure your page can scroll that far. You may need to adjust your CSS. If you still need help, please provide a reduced test case as a CodePen. 1 1 Link to comment Share on other sites More sharing options...
kmytor Posted July 6, 2020 Author Share Posted July 6, 2020 thanks if it's on that side, I will see the videos 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