aok Posted June 7, 2020 Share Posted June 7, 2020 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 More sharing options...
mikel Posted June 7, 2020 Share Posted June 7, 2020 Hey @aok, Nothing easier than that See the Pen OJMVama by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
aok Posted June 7, 2020 Author Share Posted June 7, 2020 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 More sharing options...
mikel Posted June 7, 2020 Share Posted June 7, 2020 Hey @aok, Please make a reduced CodePen with that case so that you can analyze why. 1 Link to comment Share on other sites More sharing options...
aok Posted June 7, 2020 Author Share Posted June 7, 2020 In my CodePen tests it works fine. I just can't understand why it would run automatically. Link to comment Share on other sites More sharing options...
aok Posted June 7, 2020 Author Share Posted June 7, 2020 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); 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 8, 2020 Share Posted June 8, 2020 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 More sharing options...
joaooliva Posted July 20, 2021 Share Posted July 20, 2021 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 More sharing options...
ZachSaucier Posted July 20, 2021 Share Posted July 20, 2021 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. 2 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