Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mindthegap

problem to access element via class inside a lottie loaded svg

Go to solution Solved by OSUblake,

Recommended Posts

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.

 

 

 

Link to comment
Share on other sites

  • Solution

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"));

 

 

Link to comment
Share on other sites

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

thanks.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×