Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kodralex

ScrollTrigger rotating from a specific point

Recommended Posts

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

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',
  });

 

  • Like 2
Link to comment
Share on other sites

That works great. But the shape jumps at the start of the ScrollTrigger. Any idea why?

Link to comment
Share on other sites

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',
  });



 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×