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

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>