Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sali and the kat

External SVG TweenMax.set rotate (on load)

Recommended Posts

Hi everyone, 

 

Im trying to load an external svg and setting new width, position and rotation with GSAP using TweenMax.set. Is it possible? Done many tests and no succes so i am wondering if its possible to set initial transforms to and external SVG with GSAP. Any help super appreciated. 

 

here is the code: 

 


         var squares= s.select("#squares");

       

         var tl = new TimelineMax();

         tl.set(squares,{transformOrigin:"50% 50%", rotation:45, x:200, width:30});

        

And the SVG

 

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="squares" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100"  xml:space="preserve">
<rect id="orange" x="0.018" y="-0.115" style="fill:#E7B142;" width="100" height="100"/>
<g id="grupo">
    <rect id="red" x="10.018" y="9.885" style="fill:#C7362F;" width="80" height="80"/>
    <rect id="green" x="25.018" y="24.885" style="fill:#6AA842;" width="50" height="50"/>
</g>
</svg>

 

 

Thanks very much in advance!

Link to comment
Share on other sites

Please see discussion and solutions here 

 

 

  • Like 2
Link to comment
Share on other sites

Sounds like a loading problem. You said external SVG. Are you injecting it into the DOM? You may want to take a look at this thread.

 

Hopefully that helps. Happy tweening.

 

  • Like 2
Link to comment
Share on other sites

thanks a lot for your rapid help. Didnt paste more code to not bore you. 

Maybe it is a loading proble? that there must be a function to check if tis all loaded befor applying the transforms?

 

here is the rest of the code: (im using openseadragon and snap)

 

 <script type="text/javascript">

 

 window.onload=function(){



   var s = Snap(overlay.node());
    var fragList = new Array, fragLoadedCount = 0;

    function loadMulti( list ) {
        var image, fragLoadedCount = 0, listLength = list.length;

        for( var count = 0; count < listLength; count++ ) {
            (function() {
                var whichEl = count;
                image = Snap.load( list[ whichEl ], function ( loadedFragment ) { 
                                fragLoadedCount++;
                                fragList[ whichEl ] = loadedFragment;
                                if( fragLoadedCount >= listLength ) {
                                    addLoadedFrags( fragList );
                                }
                                                } );  
            })();

        }
    }
    
    function addLoadedFrags( list ) {
        for( var count = 0; count < list.length; count++ ) {
            s.append( fragList[ count ] );
        }
         var squares= s.select("#squares");

        var tl = new TimelineLite({onComplete:yourFunction});
        tl.set( squares, {x:500})
          .set( squares, {y:0})
          .set( squares, {rotation:30});
        
        function yourFunction() {
            console.log("this gets called when the set has finished, which is typically immediately");
        }
    }
    
    

var myLoadList = [ "images/cuadrados.svg" ];
    loadMulti( myLoadList );

            
 
     }/*end of windows.on load*/
    
    </script>

            

 

 

Now Ill take a look at the documents you have suggested. Thanks so much!

Link to comment
Share on other sites

HI, 

I managed to load the svg in the given position and width, but rotation doesnt work. What can it be?

 

 

Can it be because "squares" is the ID of the SVG (and not of elements inside)?

I have to load , position and manipulate multiple svg on the stage before any animation begins. Thats why I would like to be able to manipulate each external svg once they are loaded, setting their size, position and rotation. 

 i dont know if its the right approach.

 

thanks so much

 

var squares= s.select("#squares");
     
                //GSAP ANIMATIONS
                var tl = new TimelineMax();
                TweenMax.set (squares, {attr:{ x: 200, width: 10,opacity:1,rotate:45}});
 
                
 

Link to comment
Share on other sites

Hi @sali and the kat,

 

I'm not sure what your problem is.
A small case (CodePen) would be great.

 

Just like here:

 

See the Pen vaLMqq by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

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.
×