Search the Community

Hey everyone, I am doing my first steps with GSAP right now. I am using it with Kirby and try to trigger some scroll events. I startet with the simple gsap.to(".box", { scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once) x: 500 }); Unfortunately, the animation is only triggered when I resize the browser window. How can I fix this? Any hint is appreciated?

I'm having several issues, but one I am focused on atm, is that something seems to be conflicting between the draggable.min.js file and my PHP. It messes up the div sizes, when I add <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/utils/Draggable.min.js"></script> to my php file. I'm sorry if this is a really dumb question. Thank you in advance for any help! warehouse.js EquipList.csv working10.php

Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative and #gsap-anim-text-1 <span> with position:relative and display:inline-block, for this jQuery script to work properly: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); And for TweenMax to be able to process jQuery's job with staggerFromTo method (everything like Crysto's manual says). II. WordPress integration It worked for me at Codepen test environment, also it worked at the next step - when I tried to integrate TweenMax text animation into WordPress theme: in header.php, when DOM is loaded, TweenMax.min.js (v1.18.2) and executing JQuery script placed and sequentialy initiated after wp_head() right before </header>. note: I updated WP 4.3.3 jquery core to v1.12.2, in order not to load jquery twice, neither through functions.php nor header.php, that's why I placed TweenMax.min.js and and executing jQuery script right after wp_head(), and yes jQuery v1.12.2 for older browser support. It worked when primary text and it's markup were created using standard WP post editor. It even worked when I added #gsap-anim-text-1, #gsap-anim-text-1 <span> and button properties to existing theme css (including # at the begining of a row in css, where required) and cept it the same in jQuery variables: var $demoText = $("#gsap-anim-text-1"); But, it all worked only as long as primary text and it's markup were manualy typed into text fields and saved (e.g. were static) III. Issues: To save time, and avoid typing css properties each time I write a post or create a wordpress page (but still get required output animation at pageload, and when in viewport or hovered)... I decided to add new variables into jQuery script, and css attributes (id's) of #post-title-text to post title, #gsap-anim-text-1 to post content and #gsap-anim-text-2 to post excerpt, with corresponding <span> attributes and different TweenMax effects. 3.1 On the one way, I decided manualy add attributes to certain page elements (php function generated text) by editing theme stylesheet, and adding coresponding variable #id's after existing classes in index.php, page.php, footer.php and content.php (the same way as I used to manipulate classes when using animate.css and hover.css). In that case, I got unexpected results: some page element animations just didn't work, others did, but with <span>'s being visible during TweenMax text animation. I tried to fix that by creating overspecified id's in stylesheet, like h1#gsap-anim-text-1 and h1#gsap-anim-text-1 <span> with required position and display attributes, but it didn't help... animation just stoped working. 3.2 On the other hand, I've been wondering if there is a way to omit theme stylesheet and get the job done jQuery way ? [because some WP themes do not add css markup to php_function_text generated by entire WP core, thus I can't manipulate it with theme stylesheet] Lets say: detect and predefine php function which generates text (or predefine a list of php functions we want to animate with a variable) e.g. : var $demoText = $(" <?php printf( __( 'Published by <a href="%2$s">%1$s</a> on <time>%3$s</time>', 'theme' ), get_the_author(), get_author_posts_url(get_the_author_meta( 'ID' )), get_the_time( get_option( 'date_format' ) ) ); ?>) "); wrap it into additional <div> with jQuery generated class and id (with attributes required for TweenMax animation to work), and then pull it to jQuery script from Crysto's manual for final TweenMax text animation to work with no <span>'s being visible, and with no calls to theme stylesheet. Well, on the way to this, I've found some code : var e = $('<div style="display:inline-block; position:relative"></div>'); $('#gsap-anim-text-1').append(e); e.attr('id', 'myid'); and some additional code: $(document).ready(function(){ $("div").each( function(i){ $(this).attr({ id: $(this).attr("id") + " num_" + ++i }); }) }); but... I have no idea how to put this all to work. P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).

I've been using XMLLoader to write XML files via a php script: private static function sendXML($xml:XML):void { // declaring var xmlcontents String. You should set this first. var xmlcontents:String = $xml.toString(); // declaring var SERVER_PATH String. This is the path for the saving-xml.php. var SERVER_PATH:String = TTConstants.SERVER_PATH + "/php/"; // declaring var foldername String. This is the folder container of the saved XML file var foldername:String = "../xml"; // declaring var dataPass URLVariables var dataPass:URLVariables = new URLVariables(); var previewRequest:URLRequest = new URLRequest(TTConstants.SERVER_PATH + "/php/ttwrite.php"); previewRequest.method = URLRequestMethod.POST; // setting dataPass variables to be passed to PHP dataPass.filename = USER_XML_FILENAME; dataPass.xmlcontents = xmlcontents; dataPass.foldername = foldername; // passing dataPass data PHP previewRequest.data = dataPass; var loader:XMLLoader = new XMLLoader(previewRequest, {onComplete:serverSendComplete,onIOError:onIOError,onSecurityError:onSecError,onError:onError}); // calling the PHP or loading the PHP loader.load(); } I want to call a PHP script to simply delete ("unlink") an xml file on the server. Can I use XMLLoader to do this as well (for ease of complete and error functions -- callbacks instead of adding/removing event listeners)? There's no XML loading involved, so I don't know if it's 'kosher' - var deleteRequest:URLRequest = new URLRequest("http://localhost/tt/php/ttdelete.php"); deleteRequest.method = URLRequestMethod.POST; var loader:XMLLoader = new XMLLoader(deleteRequest, {onComplete:serverDeleteComplete,onIOError:onIOError,onSecurityError:onSecError,onError:onError}); // calling the PHP or loading the PHP loader.load();

I'm creating this xml file using PHP. When I setup php to echo the follow. Her is my issue. This doesnt work: <data> <LoaderMax name="queue" prependURLs="Images/" childrenVars="width:700,height:630,scaleMode:proportionalInside" alpha="0" load="true"> <ImageLoader name="Company Logo" url="Bed_bath_and_Beyond.png" estimatedBytes="31641" width="750" height="275"/> <ImageLoader name="Image" url="T-shirt.jpg" estimatedBytes="8611" Item_Id="1" Title="Men T-Shirts" Quick_Desc="Starting at $14.99 each..." Savings_amt="65% off"/> <ImageLoader name="Image" url="T-shirt.jpg" estimatedBytes="8611" Item_Id="3" Title="Women T-Shirts" Quick_Desc="Starting at $30.11 each..." Savings_amt="20% off"/> </LoaderMax> </data> --- onChildComplete:imageCompleteHandler public function imageCompleteHandler(event:LoaderEvent):void { trace(event.target.content); var loadedImage:ContentDisplay = event.target.content as ContentDisplay; //you must manually add the loadedImage to the display list addChild(loadedImage); TweenLite.to(loadedImage, 1, {alpha:1}); } What is being traced: [object ContentDisplay] [object ContentDisplay] [object ContentDisplay] [object ContentDisplay],[object ContentDisplay],[object ContentDisplay] I only have 3 images so I understand this: [object ContentDisplay] [object ContentDisplay] [object ContentDisplay] Why am I getting this: [object ContentDisplay],[object ContentDisplay],[object ContentDisplay] This works: <data> <ImageLoader name="Company Logo" url="Images/Bed_bath_and_Beyond.png" estimatedBytes="31641" width="750" height="275" scaleMode="proportionalInside" alpha="0" load="true"/> <ImageLoader name="Image" url="Images/T-shirt.jpg" estimatedBytes="8611" Item_Id="1" Title="Men T-Shirts" Quick_Desc="Starting at $14.99 each..." Savings_amt="65% off" width="700" height="630" scaleMode="proportionalInside" alpha="0"load="true"/> <ImageLoader name="Image" url="Images/T-shirt.jpg" estimatedBytes="8611" Item_Id="3" Title="Women T-Shirts" Quick_Desc="Starting at $30.11 each..." Savings_amt="20% off" width="700" height="630" scaleMode="proportionalInside" alpha="0"load="true"/> </data> Everything loads fine when I do it this way. Any suggestions?

I'm another Flash guy getting into Javascript with GSAP. I'm making a photo gallery and can't seem to get GSAP tweens to read function parameters when I send them via PHP to my Javascript function. For example, I make a PHP call like this: $imageFile = glob("images/*.*"); echo '<img src="'.$imageFile[1].'" id="thumbPic" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />'; to my Javascript functions like this: function imageOver(object) { TweenMax.to(object, .5, {width:100, ease:Cubic.easeOut}); } function imageOut(object) { TweenMax.to(object, .5, {width:85, ease:Cubic.easeOut}); } When I manually call these functions with the "this" parameter from HTML, it works great. But when I write the same HTML via PHP, it doesn't tween. When I trace the "object" parameter I get the same "HTMLImageElement". I've tried calling the image ID directly by doing this: TweenMax.to("#thumbPic", .5, {width:85, ease:Cubic.easeOut}); But that doesn't work either. Any thoughts?

Hello everybody, I've found a bug i think. I was trying to do simple tweening using TweenMax Js, following simple tutorial on greensock and other site... impossible to make it work!!! I tryed many thing, put the js in the head, then at the end off the page, using different version of Jquery and also pure js... it never work. In my page i have simple <?php require 'mylogo.php'; ?> <?php require 'my menu.php'; ?> when i delete those 2 lines, it WORKS!!! Does anybody has experienced such a problem??

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