kodralex Posted November 23, 2021 Share Posted November 23, 2021 Hi, I'm doing a basic shape rotating using ScrollTrigger, and I've got the fundamentals working fine. Rather than the shape rotating from the centre point, is it possible to specify a particular corner from which the rotating will axis (example, bottom right corner)? Also, is there a way to determine how many rotations are to be made rather than using duration? Apologises if this is in the documentation and I've completely missed it. Thanks See the Pen abyrYwa by alexkodr (@alexkodr) on CodePen Link to comment Share on other sites More sharing options...
Jo Mourad Posted November 23, 2021 Share Posted November 23, 2021 Hey kodralex, Did you try using transformOrigin ? var rotate = gsap .timeline({ scrollTrigger: { trigger: '.wrapper', scrub: 0.2, start: '-50px', end: '0px', markers: true, }, }) .to('.square', { rotation: 199, transformOrigin: "100% 100%", duration: 2, ease: 'none', }); 2 Link to comment Share on other sites More sharing options...
kodralex Posted November 23, 2021 Author Share Posted November 23, 2021 That works great. But the shape jumps at the start of the ScrollTrigger. Any idea why? Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 Thanks @Jo Mourad, also for the rotation you can add any number as a value - or even use functional values like so to avoid doing the math yourself. let numOfRotations = 20 tl.to('.square', { rotation: () => 360 * numOfRotations, transformOrigin: "100% 100%", duration: 2, ease: 'none', }); 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 23, 2021 Share Posted November 23, 2021 You can set the center of origin first to avoid the jump ✨ See the Pen ZEJNjEy?editors=0011 by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
kodralex Posted November 23, 2021 Author Share Posted November 23, 2021 Excellent. Thank you so much @Jo Mourad & @Cassie 👍 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