Pixi js two rotations to one element (how to add something like wrapper)

Question

how can i wrap sprite in something like container Something like in HTML:

<div class="wrapper">
  <div class="mysprite"></div>
</div>

I try to rotate one element twice, so i nedd something like wrapper:

console.clear()
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundAlpha: 0,
  view: document.querySelector("#app"),
  antialias: true,
  autoDensity: true
});

//https://picsum.photos/200/300
let texture = PIXI.Texture.from("https://picsum.photos/200/100")
let element = new PIXI.Sprite(texture);
element.anchor.set(0.5);
element.x = 200;
element.y =100;
app.stage.addChild(element)

tl = gsap.timeline({repeat: -1})
tl.to(element, {angle: 360, duration: 2})

// i need to add one more rotation animation to this element, but main rotaion does not need to stop

/**
This is does not working
let tl2 = gsap.timeline()
tl2.fromTo(element, {angle: -10}, {angle: 10})
**/

* {
  padding: 0;
  margin: 0;
}

#app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<script src="https://pixijs.download/release/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<canvas id="app"></canvas>

In HTML you can just add one rotation to element and secondone to wrapper (parent element), how can i do that in PIXI?

Answer 1

Use a PIXI.Container.

console.clear()
let app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundAlpha: 0,
  view: document.querySelector("#app"),
  antialias: true,
  autoDensity: true
});

let container = new Container();

//https://picsum.photos/200/300
let texture = PIXI.Texture.from("https://picsum.photos/200/100")
let element = new PIXI.Sprite(texture);
element.anchor.set(0.5);
element.x = 200;
element.y =100;

container.addChild(el

app.stage.addChild(container)

tl = gsap.timeline({repeat: -1})
tl.to(element, {angle: 360, duration: 2})

let tl2 = gsap.fromTo(container, {angle: -10}, {angle: 10})

* {
  padding: 0;
  margin: 0;
}

#app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<script src="https://pixijs.download/release/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<canvas id="app"></canvas>