Jump to content
GreenSock

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

Rotate element on scroll

Recommended Posts

Hi folks,

 

Is it possible, using scrollTrigger, to rotate an element on scroll (positive or negative whether scrolling up or down) something similar to this:  but for only one element?

 

Thanks!

See the Pen pgzeor by dudleystorey (@dudleystorey) on CodePen

Link to comment
Share on other sites

Thanks so much, @mikel

 

I added my code to pen and it works great (

See the Pen ZEQGmge by richardcool (@richardcool) on CodePen

) but on the site I'm building it runs the rotation on load (goes from 0 to 1800deg in one go).

 

Do you know why this would happen?

Link to comment
Share on other sites

 

Hey @aok,

 

Please make a reduced CodePen with that case so that you can analyze why.

  • Like 1
Link to comment
Share on other sites

In my CodePen tests it works fine. I just can't understand why it would run automatically.

Link to comment
Share on other sites

Turns out I hadn't added `gsap.registerPlugin(ScrollTrigger);`

 

Your example didn't BUT I guess that's because it wasn't an import?

 

import { gsap, Power2, Bounce } from 'gsap';

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

 

  • Like 2
Link to comment
Share on other sites

19 hours ago, aok said:

Your example didn't BUT I guess that's because it wasn't an import?

Correct. If you are loading via a script tag the .registerPlugin() is not required (it registers itself). 

 

Side note: you don't need Power2 or Bounce. We recommend the condensed string form of eases in GSAP 3, such as "power2.inOut" or "bounce". See this post for more info:

 

Link to comment
Share on other sites

  • 1 year later...

Hey guys!

I'm also trying to apply @mikel 's formula on my project but I can't seem to get it right.
Here is a snippet of the code I'm currently using:

gsap.registerPlugin(ScrollTrigger);

gsap.set('.quote__letters-wrapper', {xPercent:-50});

var rotate = gsap.timeline({
  scrollTrigger:{
    trigger: "#locomotive",
    pin: true,
    scrub:0.2,
    start: 'top top',
    end:'bottom bottom',
  }
})
.to('.quote__letters-wrapper', {
  rotation:360*5,
  duration:1, ease:'none',
})

And here is the "final" result I'm achieving: https://specialistceramics-1a9f0e597ab72ec94daa.webflow.io/projects
(the element to rotate is the "get a quote" circle on the bottom right corner)

I don't know if you are familiar with webflow but I'm sharing the read-only link here anyways:
https://preview.webflow.com/preview/specialistceramics-1a9f0e597ab72ec94daa?utm_medium=preview_link&utm_source=designer&utm_content=specialistceramics-1a9f0e597ab72ec94daa&preview=5c5cffaae41b5f44d178ce39c0942c3d&pageId=60f18c7d33ec9a317b7c5b2a&workflow=preview

I would appreciate any help! :)

Cheers,

 

Link to comment
Share on other sites

Hey joaooliva and welcome to the GreenSock forums.

 

Have you gotten what you wanted working in a minimal form first? If so, then the issue is just converting it to Webflow. If not, please try to make a minimal demo first :) If you still have a question let us know.

  • Like 2
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.
×