Rotate element on scroll in GSAP 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,
Rotate element on scroll
in GSAP
Posted
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:
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,