Rotation horizontal scrolling

[Charlyta]

Hi there!

I am developing a site that needs rotate an element while scrolling horizontally. The scrolling works fine, but I have no idea why these elements doesn´t rotate.. sure it´s an obvious thing I can´t see.

Any help or aproach will be appreciate it

See the Pen YzjEqyP by charlyta (@charlyta) on CodePen

[elegantseagulls]

This is because your rotation elements aren't part of your ScrollTrigger You'll want to either separate those into their own ScrollTriggers, or add this to your pin/scrub tween as a timeline like this:

 

gsap.timeline({
  scrollTrigger: {
    scroller: pageContainer, //locomotive-scroll
    scrub: true,
    trigger: "#sectionPin",
    pin: true,
    start: "top top",
    end: pinWrapWidth, 
    markers: true,
  },
  defaults: {
    ease: 'none'
  }
})
  .to(".pin-wrap", {  
    x: -horizontalScrollLength,
  })
  .to('.anuncio1', {	 
    rotation: 360*5,
  },0);

 

[elegantseagulls]

Also, Have you tried ScrollSmoother instead of Locomotive? It's designed to work with ScrollTrigger:

 

https://greensock.com/docs/v3/Plugins/ScrollSmoother

[Charlyta]

 

Thank you very much for responding so quickly. Sometimes four eyes see more than two. It was a silly oversight and with a very easy solution. This forum is the best.

I know ScrollSmoother it's better than  Locomotive but it's not free and I can't afford it.

Gsap has revolutionized the creation of websites. I remember when I got certified in Flash and Actionscript was the only creative solution, but Gsap is lighter and provides unique creativity. 

I think you provide greate resources and tutorials with a good documentation. There are things that webgl can do better, but are two different things.

Thanks!!