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