Pin + rotation issue scrolltrigger

[jeskoo]

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..

[mvaneijgen]

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