Jump to content
Search Community

Alexli

Members

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by Alexli

    3D transform of <image> element

    in GSAP

    Posted

    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.

     

    Cheers,

     

    Alex

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

    <script> in <svg> , TweenMax.staggerTo, failed in mobile devices

    in GSAP

    Posted

    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!

     

    Cheers,

     

    Alex

      

    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
document.body.appendChild(script);
    • Like 3

    <script> in <svg> , TweenMax.staggerTo, failed in mobile devices

    in GSAP

    Posted

    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);
  }
    ]]>

</script>

<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     "/>
    </g>

</g>

</svg>

     

    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;

     $('#container').append(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.

     

    Cheers,

     

    Alex

           
     

     

    Draggable not working in Chrome of Android (Solved, Thanks!)

    in GSAP

    Posted

    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.

     

    Cheers,

    Alex

     

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

    • Like 1

    Getting touchAction property to work with pan-x pan-y

    in GSAP

    Posted

    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.

     

    Cheers,

    Alex

×
×
  • Create New...