Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Alexli

  1. Dear All,


    I love Gsap and I am working on a website full of animations using Gsap. 


    Gsap is awesome!


    Recently I ran into a new problem, I am not able to do 3D transform for an <image> element in my SVG


    I have looked into many threads in here, and this one too: 

    See the Pen yzahJ by GreenSock (@GreenSock) on CodePen


    I am not sure what I have missed, but I am quite sure Gsap can do the 3D transform of it.


    Guys, please help me out. Thank you so much.


    Wish you All have a wonderful Friday.





    See the Pen jvdKoK by alexli2017 (@alexli2017) on CodePen

  2. Dear All,


    I really appreciate your quick response. Thank you Blake, Thank you Dipscom.


    I have just resolved the problem according to Blake's quoted page.


    I have taken the animation codes out from the svg file and saved it in an external js file using below plain script. Now the animation works on all devices I possess.


    Thank you again. Wish you Good Health and Good Luck!






    var script   = document.createElement("script");
    script.type  = "text/javascript";
    script.src   = "path/to/your/javascript.js";    // use this for linked script
    script.text  = "alert('voila!');"               // use this for inline script
    • Like 3
  3. Dear All,


    Hello. I have encountered a problem regarding to StaggerTo . My case is like this:


    1. I have a simple svg file stored in my firebase realtime Database as a node as below (i copied the whole file  as text as paste it as string node):


    (I know I should write my case in CodePen but I don't know where I should put my svg as an external file for CodePen to read from. I apologize for that.)

    <svg onload="init(evt)" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" id="slider1Svg" >
    <script type="application/ecmascript"> <![CDATA[
      function init(evt) {
         TweenMax.staggerTo($('.star'), 2, {scale:3.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true,  repeat:-1}, 0.2);
    <g id="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF">
          <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="72.574,123.936 71.155,123.877 70.302,125.014
            69.918,123.646 68.574,123.186 69.757,122.398 69.779,120.978 70.893,121.859 72.25,121.441 71.757,122.773     "/>
          <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,167.936 162.155,167.877 161.302,169.014
            160.918,167.646 159.574,167.186 160.757,166.398 160.779,164.978 161.893,165.859 163.25,165.441 162.757,166.773     "/>
          <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="206.574,167.936 205.155,167.877 204.302,169.014
            203.918,167.646 202.574,167.186 203.757,166.398 203.779,164.978 204.893,165.859 206.25,165.441 205.757,166.773     "/>
          <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,247.936 162.155,247.877 161.302,249.014
            160.918,247.646 159.574,247.186 160.757,246.398 160.779,244.978 161.893,245.859 163.25,245.441 162.757,246.773     "/>


    You can see I am using "onload" in the opening <svg> tag. 


    2. Then in my javascript file, I append the node to the div like this:

    firebase.database().ref('svgfile').once("value", function(data){
          var svg = data.val().svg;


    3. My Stars Twinkle in the below browsers (all up-to-date versions and cache cleared ):


    • Windows 10 -
      • chrome
      • edge
    • MacOs -
      • safari
      • firefox
    • Android - 
      • chorme
      • opera


    unfortunately the stars do not twinkle in the below browsers:

    • ipad pro 
      • chrome
      • safari
      • opera


    and I tested on my very old ipad mini with iOS version 9.35, safari, the stars also twinkle.


    May I ask if this is the problem caused by the OS? 


    My goal is to match a corresponding animation code with the svg file, so I don't need to put all the animation codes into the main.js , like below:


    1.svg use "code for 1.svg"

    2.svg use "code for 2.svg" etc.


    Beside writing the animation codes in the <script> in <svg> , may I ask if there is another way I can achieve this?


    Thank you very much for your help.







  4. Hi All,


    I am writing this thread because I want to show my appreciation to folks in this forum, they helped to resolve my problem in a very short time.


    Few days ago I jumped into a thread, I didn't read the rules, my bad. The original thread I jumped into: 


    Then  @Dipscom and  @GreenSock (Sorry I don't know why I couldn't mention you here) helped quickly. My problem was resolved by @Greensock helped to update the beta version of Draggable. Now my elements can be dragged in Chrome of Android devices.


    Thank you very much both of you. I wish you have Good Health and Good Luck.





    See the Pen gRmxOq by alexli2017 (@alexli2017) on CodePen

    • Like 1
  5. Dear All,


    Hello. My name is Alex and I am a newbie in SVG and even coding. I have been reading this forum recently and found it very very useful, people here are so helpful. That's the reason I choose to use GreenSock.


    I am having a similar problem with redcrayon. When I use the beta version, the drag is ok but cause another function to fail . Also, touch-action is not workable too. 


    I really like draggable, could you guys please help to fix this issue please?  Thank you so much.