Jump to content
Search Community

Pin + rotation issue scrolltrigger

jeskoo test
Moderator Tag

Recommended Posts

gsap.fromTo(".text1", { 
  opacity: 0,
  rotation: -18
   
}, 
{ opacity: 1, 
  rotation: -18,
  scrollTrigger: {
    trigger: '.beyond',
    start: 'bottom center',
    end: '+=80%',
    scrub: true,
    markers: false,
    pin: true
  }
});

Here is my code, please help. I want the text to be rotated, when I rotate the text with css, the rotation resets as soon I add the "pin: true" and when I try to rotate the text with gsap, it doesnt work at all..

Link to comment
Share on other sites

Hi @jeskoo welcome to the forum!

 

Please read our forum guidelines! We ask for a minimal demo, because then we can dive directly in to the code and help you find a fix for your issue. I had some time to spare and seen that you're new here I've created a demo for you, but please include a demo next time, saves everyone a lot of time and you get a better chance of getting help on these forums.

 

Your current code doesn't rotate the text, it will animate .from() rotation: -18 .to() rotation: -18, which is the same value, so nothing will really happen. I've changed your to tween to -180, so that there is a change between values and then everything works. If you need more help, please modify the pen below and share a fork of what changes you've made. Please also including a clear description of what you think should happen and what is happening right now. 

 

Hope it helps and happy tweening! 

 

See the Pen abXMbVX?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

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