Alexli

it works! Thank you so much Mr. PointC ?

Dear Point C, Thank you so much for your reply. may I ask if there is something from gasp instead of can do this flipping besides 3D transform? Thank you and wish you have a happy weekend. cheers, alex

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: 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

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

and I apologize for my poor English.

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

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

Hi Carl and redcrayon and folks in here, My apologies for jumping in because I really want to know where my problem is. Below i have inserted my codepen. May I ask if you could help to take a quick look? Thank you very much and I really appreciate your help.

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