ScrollTrigger

[Vitaliy3301]

hello, friends. Faced with the problem, I have the animation of the circle , I need the circles to rotate around the main circle and the text inside (in my case the picture in the real project) to stay straight and not animate stood exactly , ask for your help )

See the Pen QWgBKmG by foka6996 (@foka6996) on CodePen

[elegantseagulls]

Hi @Vitaliy3301,

 

You just need to counter rotate the text icons:

 

const rotate = gsap.timeline({
  scrollTrigger:{
    trigger: ".container",
    pin: true,
    scrub:0.2,
    start: 'top top',
    end:'+=10000',
  }
})
  .add('sync')
  .to('.circle', {
    rotation:360,
    duration:1,
    ease:'none',
  }, 'sync')
  .to('.circle__icon', {
    rotation: -360,
    duration:1,
    ease:'none',
  }, 'sync')

 

[Vitaliy3301]

Can I get more details?

[PointC]

Since each of your .circle_icon divs are children of the parent circle they will rotate along with the parent. By using a tween targeting only the icon rotation in the opposite direction, you give the appearance of the icons/text remaining upright. It just needs to be the opposite of the parent. If the parent circle is rotating 720 then you'd need to rotate the icons -720 over the same duration.

 

Make sense?

 

[Vitaliy3301]

@elegantseagulls thank you