Jump to content
Search Community

Rotate element on scroll

aok test
Moderator Tag

Recommended Posts

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

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.
×
×
  • Create New...