problem to access element via class inside a lottie loaded svg

[mindthegap 2 Likes (Newbie)]

hi,

 

after using the GSAP Plugin over a year, 

 

<g id="lotti-player-coach" data-v-138106d0=""> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" preserveAspectRatio="xMidYMid meet" style="width:100%;height:100%;transform:translate3d(0px, 0px, 0px);content-visibility:visible"> <defs> <clipPath id="__lottie_element_221">
  <rect width="200" height="200" x="0" y="0"/> </clipPath> <clipPath id="__lottie_element_226"> <path d="M0,0 L200,0 L200,200 L0,200z"/> 
  </clipPath> 
</defs> 
<g clip-path="url(#__lottie_element_221)"> 
  <g class="transport" clip-path="url(#__lottie_element_226)" transform="matrix(1,0,0,1,0,0)" opacity="1" style="display:block">
    <g transform="matrix(1,0,0,1,80.08300018310547,115.66331481933594)" opacity="1" style="display:block"> <g opacity="1" transform="matrix(1,0,0,1,3.7950000762939453,13.991999626159668)"> 
  <path fill="rgb(140,104,79)" fill-opacity="1" d=" M1.2960000038146973,-10.196000099182129 C1.2960000038146973,-10.196000099182129 1.2960000038146973,10.196000099182129 1.2960000038146973,10.196000099182129 C1.2960000038146973,10.911999702453613 0.7149999737739563,11.491999626159668 -0.0010000000474974513,11.491999626159668 C-0.7160000205039978,11.491999626159668 -1.2960000038146973,10.911999702453613 -1.2960000038146973,10.196000099182129 C-1.2960000038146973,10.196000099182129 -1.2960000038146973,-10.196000099182129 -1.2960000038146973,-10.196000099182129 C-1.2960000038146973,-10.911999702453613 -0.7160000205039978,-11.491999626159668 -0.0010000000474974513,-11.491999626159668 C0.7149999737739563,-11.491999626159668 1.2960000038146973,-10.911999702453613 1.2960000038146973,-10.196000099182129z"/>

 

After I used the GSAP plugin with a lot of friends for a year and actually never had any major problems, I now have a little problem.

ok, i load different lottie files into an existing SVG element. works so far.

 

here's the svg code of inside the parent svg

 

<g id="lotti-target-coach"></g>

 

then I load

this.moveAnimations.push( lottieWeb.loadAnimation({

          container: document.getElementById('lotti-player-coach'),

          renderer: 'svg',

          loop: true,

          autoplay: true,

          path: './static/meeples/meeple_player_coach.json'

        }) )

 

for some i would like to transform individual elements.

unfortunately I can't get access to the elements in the injected svg.

How can I, for example, influence the rotation of the element with the transport class?

 

I tried different methods to access the .transport element but it didn't work.

 

     let q = gsap.utils.selector("#lotti-player-coach"); // or use selector text like ".class"

       console.log(q);

        // let boxes = q(".box"); // finds only elements with the class "box" that are INSIDE myElement

        // or plug directly into animations

        gsap.to(q(".transport"), {x: 100});

         gsap.set("#lotti-player-coach .transport", {rotate: "30deg", x: 300});

        gsap.set(".transport",  {transform:"rotate(45deg)"});

 

 

these are my error:

GSAP target  not found.

GSAP target #lotti-player-coach .transport not found. 

GSAP target .transport not found.

 

 

 

when I try to rotate the #lotti-target-couch with  

 gsap.set("#lotti-player-coach", {rotate: "30deg", x: 1000});

everything ist fine.

 

I think the problem ist the injected part?!?

 

it works, how can I manipulate the child with a class.

 

 

 

[OSUblake 18,337 Likes (Superhero)]

You probably need to wait for animation load before you can access elements inside of it. You can always verify that it's not a GSAP issue by logging out an element you are trying to select. If it's null, then that means the element has not been injected at the time you are trying to create your animations.

 

console.log(document.querySelector(".transport"));

 

 

[mindthegap 2 Likes (Newbie)]

thanks, I tested it directly after the start of the loading, now it plays fine.

thanks.