Jump to content
Search Community

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

Alexli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

       
 

 

Link to comment
Share on other sites

Hi @Alexli,

 

Welcome to the forums!

 

Although I do not know for sure, I would suspect it is a case of browser divaness and a reduced case scenario would be the only way to figure it out - or if someone else happens to be doing the same thing as you.

 

You can get data from a firebase in CodePen. If you would be so kind to try to get a simple pen together it would be great.

 

Here's a some pens tagged with firebase in CodePen - maybe you can work it out by looking at some examples: https://codepen.io/tag/firebase/

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

It's a security issue when inserting JavaScript like that. Don't know how jQuery does it, but if it uses innerHTML, it's not supposed to execute.

 

Or it could be a closing script tag issue.

https://stackoverflow.com/questions/610995/cant-append-script-element

https://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write/

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

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
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.
×
×
  • Create New...