Search the Community
Showing results for tags 'data'.
Found 6 results
-
How to stagger elements after fetching data from api?
-
I'm new to GS, so apologies for any poorly described things...I'm facing two issues. I'm trying to have circles move according to specific data I have for each circle, and I first tried to move an svg along a path like in this codepen by Sarah Drasner https://codepen.io/sdras/pen/aOZOwj, but there are instances where the circles should appear to stop momentarily but even when the data roughly repeats itself multiple times (they'll be different by 1-2), it doesn't seem to have any effect. (I'm not sure if it's visible from my codepen, but even when I tried manipulating the path points in Drasner's codepen, I wasnt able to create a pause). Consider that each data point represents an evenly spaced moment in time (like frames of a video), and I want the circle to hover for the equivalent amount of time that the data represents out of the total. eg one frame is 40 ms apart, so 10 frames of repeated data should mean that the circle is stationary/"moving to the same place" for 400 ms. I gave up on this method to try and tried the method in this example where I specify the duration/location of the movement for each data point, but cannot get it to work move at all. I'm not sure if it's because the sample rate is too fast, but I can't find anything about max/min durations for the .to. In both scenarios, I get this error Uncaught TypeError: Cannot assign to read only property 'cy' of object '#<SVGCircleElement>', but using the bezier method still works, so I just ignored it, but with the new method, it doesn't work and I haven't found anything anywhere about what this error means because I'm selecting the circle... In my codepen, I have a button for each method where you can see the error in the browser console but not the codepen console. https://codepen.io/azhao/full/bJVJxZ -
How i can select a data-category for show only it ? I know my code is not finish but i don't found how to make this in gsap. Thanks for your help
-
Hey, GSAP forum. Over the past few months I've been having a blast getting to grips with GSAP, as I've transitioned my entire workflow from CSS3 to GSAP. It's had its challenges, but nobody could say this site doesn't provide enough resources to get up to speed with the library, so thanks to everyone on the team for all the great work that's done here. So my problem likely betrays a gap in my general javascript knowledge as much as anything else, but it is however intricately linked to something I want to do with GSAP. Basically I want to tween a group of elements to the value contained in their relevant data- attributes. I've put together a simple code pen to show what I'm after as you can see in the foot of this post. So it should be pretty self explanatory. I click the start button and the tweens should grow to the percentage value contained in data-width and the pixel value of data-height. I've been able to set tweens with fixed variables in the past, but this goes beyond me right now. Thanks for any and all assistance.
-
Hi, I'm developing a site that is getting results from twitter and showing one tweet at a time, it loads an iFrame of the tweet rendered by twitter via oEmbed. The tweet drops in to the center from 0 opacity to 1 then after a moment drops down out of the window fading out. The app is performing great with a few items but it seems to be chugging a little as that number grows. I know I could remove the older tweet items after they finish their tweens however the client wants to have this timeline running at a conference lasting 30 mins for each speaker, still not an issue til the request to be able to replay the 30 min timeline at a faster speed with timeScale so the speaker can view the audience reaction(it's also tweening a css gradient BG and playing sounds based on the hashtags(variety of feelings) of the active tweet being tweened). If I remove the items I'm a little concerned about playing back in this fast forward mode and being able to load the tweet iFrames again fast enough. Any ideas?
-
I can't figure something out. I am trying to: Simply stated, I have loaded an XML doc. Changed it within Flash. I then want to update the XML doc on the server. Then reload the XML back into Flash. I have one main .xml document - "StudentXML.xml" (This is the file I want to overwrite with new info - it is also the file I read from with the application begins.) And one main .php document - "index.php" (sorry for my crappy naming standards..) Here is the PHP code I found (hoping it would do what I wanted) located in "index.php": <?php $filename = "StudentXML.xml"; $raw_xml = file_get_contents("php://input"); print $raw_xml; $fp = fopen($filename, "w"); fwrite($fp, $raw_xml); fclose($fp); ?> Here is my data I want to change and see transfered to the server to overwrite the current XML Document. At this point, I have already loaded, accessed, and read my StudentXML.xml within Flash. var newLogin:XML = <badge>eStudioLogin</badge>; studentXML.id.(@number == studentID.toString()).allBadgeNames.prependChild(newLogin); studentXML.id.(@number == studentID.toString()).badgesEarned = int(studentXML.id.(@number == studentID.toString()).badgesEarned) + 1; So far, and this is not working, I have pieced together this lovely bit of code: var requested:URLRequest = new URLRequest("www.mysite.com/index.php"); requested.data = studentXML; // This does trace the entire [i]edited[/i] XML document that is in Flash requested.method = URLRequestMethod.POST; var loader:XMLLoader = new XMLLoader(requested,{name:"StudentXML",onProgress:showProgress}); loader.load(); I know I am being dumb. It can't be this hard to transfer data and overwrite an existing xml document. Any help would truly be appreciated. Thanks, Adam
