Jump to content
GreenSock

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. I've been using the 'scrollTo' plugin to scroll my divs, but now I need to implement that same functionality to affect an iframe. Is this possible?
  2. Hello! I'm creating a banner using Flash CC HTML5 canvas. What I do is adding animation code to each frame. After it completes I want the next frame to be played. I included two libs into the HTML file: EasePack.min.js TweenLite.min.js So at the current frame I am writing the following code (source file: test7.zip ): this.stop(); TweenLite.to(this.target, 1.35, {delay: 0.1, y: 180, ease:Elastic.easeInOut, onComplete: pplay } ); function pplay(){ this.play(); window.alert('123'); }; The frame is animated but it stops at the end instead of going to next frame. At this time the alert works, but I can not skip it - it's like a loop function. How can I get to the next frame? P.S. Previously I worked with greensock AS2 at Flash CS 6 - everything worked perfect. Best regards, Vital
  3. Hi everyone ! Hope you are fine. I come to you because I am trying to make a carousel with images fading in / out. I decided to use opacity (maybe it's not the best way to do it) and JS. I succeed to do something with JQuery but the performance were a disaster. Made my browser (chrome) crash. Then I decided to make it with javascript and tried to realise something as light as possible (hard task). But, when I thought my algorithm was good I was in front of 2 problems : 1) I don't succeed to make it infinite (not too hard to do) 2) I have an error during a loop : Cannot tween a null target. I put some console.log everywhere at every stage but impossible to localise the moment where I am sending a null object to TweenLite. Dafuq So, as you will see in my (short) codepen, am I missing something ? I deeply thank you in advance for the time spend on my request.
  4. Dear All, I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox: ReferenceError: TweenMax is not defined In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work: wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true ); //LAURAN BEGIN//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //wp_deregister_script( 'TweenMaxMin' ); wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'TweenMaxMin' ); //wp_deregister_script( 'ScrollMagic' ); wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'ScrollMagic' ); //wp_deregister_script( 'animationGsap' ); wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'animationGsap' ); //wp_deregister_script( 'debugAddIndicators' ); wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'debugAddIndicators' ); //wp_deregister_script( 'lauranScrollMagic' ); wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'lauranScrollMagic' ); //LAURAN EINDE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// And this is my script: //jQuery(document).ready(function($){ jQuery(document).ready(function(){ // place custom JS here console.log("DOM ready"); // window, links, and other assets loaded jQuery(window).on("load", function(){ // or place custom JS here to make sure DOM is ready and the window is loaded console.log("window, links, and other assets loaded"); var images = [ "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png" ]; // TweenMax can tween any property of any object. We use this object to cycle through the array var obj = {curImg: 0}; // init controller // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, // animate propery curImg to number of images roundProps: "curImg", // only integers so it can be used as an array index repeat: 3, // repeat 3 times immediateRender: true, // load first image automatically ease: Linear.easeNone, // show every image the same ammount of time onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); // set the image source } } ); var controller = new ScrollMagic.Controller({loglevel: 3}); // build scene var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220}) .setTween(tween) .addIndicators() // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"}) .setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300}) .setPin('#blockLauran') .addIndicators() .addTo(controller); var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200}) .setPin('#blockLauran2') .addIndicators() .addTo(controller); }); }); All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme. Can someone help me out? It looks like if I am almost there... Thanks! Lauran
  5. I just give my first try to JS gsap & html Jumped from actionscript Animating is nice and fun and work perfect here topic. When I upload to my server, I realise a problem. It first load all images and text and then ...starting the animation. Is there any method to load first and then start the animation? *All scripts are loaded inside head tag Thanks
  6. So on this website, I use Timeline to set up and intro animation on the home page. When I host it, I'll set a cookie script so it'll only happen the first time you hit the home page, but for now, it's part of the problem. I have CSS statements and media queries interacting with my script and it just occurred to me that I have queries in my script for the different values and dimensions of the animations based on screen size. It's hard to explain, but as I'm new to GSAP, I cannot think for the life of me how to make them now conflict. I've attached the files needed. Any help would be greatly appreciated. Maybe you can see what I'm going for. Sorry if it's a cluster****. It's been a messier process than usual. website.zip
  7. I've seen a lot of posts about media queries and running animations on screen size, but I haven't seen any that I can use for my problem. My problem is that between the mobile/tablet and desktop versions, the original logo is a different percentage size and is scaled down to a different size. Forgive my code. It's a little sloppy at the moment. But as you can see, on the desktop version, the original img width is 50%, and on mobile/tablet, it's 90%, so the post-animation sizes will be different as well. Can anyone help with this? Thank you.
  8. Actually I am making a web app which part of it contains a touch swipe action in order to browse between different parts of a section in mobile devices of course, the elements which move after the user swipes will be dynamically added or removed; I have made a static version of this so far but I need to make sure it is capable of being dynamic, I have used hammer js for controlling swipe action and tweenmax js for handling the animation. My problem is that I do not know how to recognize which .chanel element is in sight so I can figure out which is the next one and which is the previous one (how to Pass that element to my timeline instead of writing too many timelines), Also I have to dynamically change my Timeline in a way that it sets the .chanel element left to -offset if its the previous one and sets to offset if its the next one for example. I hope I could describe my problem well. Thanks in advance.
  9. Hi all, Fairly new to the whole javascript tweening animation business. I've included a fairly complex svg file in a website I'm working on via an <object> tag and am using GSAP to animate it. //GSAP tweening/animation STUFF $(document).ready(function(){ var svg = document.getElementById("homeAnimation"); var svgDoc = svg.contentDocument; var homeSwitch = svgDoc.getElementById("homeSwitch"), homeSmallGear = svgDoc.getElementById('homeSmallGear'), homeBigCog = svgDoc.getElementById('homeBigCog'), homePipeBall1 = svgDoc.getElementById('homePipeBall1'), homePipeBall2 = svgDoc.getElementById('homePipeBall2'), homePipeBall3 = svgDoc.getElementById('homePipeBall3'), homePipeBall4 = svgDoc.getElementById('homePipeBall4'), homeBeltGearLeft = svgDoc.getElementById('homeBeltGearLeft'), homeBeltGearRight = svgDoc.getElementById('homeBeltGearRight'), homeChart = svgDoc.getElementById('homeChart'), phoneChart = svgDoc.getElementById('phoneChart'), phonePie = svgDoc.getElementById('phonePie'); var tmax_home_switch = new TimelineMax(); //Switch has separate timeline so it can pause the animation but still move. var tmax_home_chart = new TimelineMax({repeat:-1}); //Chart has separate timeline so it can repeat. var tmax_options = { }; //options config goes here var tmax_home_tl = new TimelineMax(tmax_options); //timeline takes options input and is declared var tmax_repeat_options = { }; //options config goes here var tmax_home_t2 = new TimelineMax( tmax_repeat_options); //timeline takes options input and is declared //Clear the stage tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0}); tmax_home_tl.set(homeChart, {x:-20}); tmax_home_tl.set(phoneChart, {scale:0, transformOrigin: "center center"}); tmax_home_tl.set(phonePie, {scale:0, transformOrigin: "center center"}); //starts off paused tmax_home_tl.pause(); tmax_home_t2.pause(); tmax_home_chart.pause(); // mouseover cursor change. homeSwitch.addEventListener("mouseover", funcover, false); function funcover() { homeSwitch.style.cursor = "pointer"; } homeSwitch.addEventListener("click", function() { tmax_home_switch.to(homeSwitch, 0.2, { rotation: 60, repeat:0, delay:0.2, transformOrigin: "center center"}) .to(homeSwitch, 0.1, { rotation: 0, repeat:0, delay:0, transformOrigin: "center center"}); tmax_home_tl.paused(!tmax_home_tl.paused()); tmax_home_t2.paused(!tmax_home_t2.paused()); tmax_home_chart.paused(!tmax_home_chart.paused()); if(tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:1})) { TweenMax.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0}); } }); tmax_home_chart.to(homeChart, 0.25, { x:50, transformOrigin: "center center"}, 8) .to(homeChart, 0.5, { y:26, transformOrigin: "center center"}) .to(homeChart, 20, { x:500, transformOrigin: "center center"}); tmax_home_tl.staggerTo([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], 0.5, { opacity:1 }, 3.4) .staggerTo([phoneChart, phonePie], 0.5, { scale:1, transformOrigin: "center center"}, 0.5); tmax_home_t2.to(homeSmallGear, 4, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs") .to(homeBigCog, 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs") .to([homeBeltGearLeft, homeBeltGearRight], 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs+=4"); }); There is the code all the elements being selected are definitely in the SVG file that is being imported. It seems to randomly work and other times not. Any suggestions? I'm getting a "Uncaught Cannot tween a null target." in Chrome but it works fine in Firefox and sometimes IE. Here is the bones of the site: http://www.mulrooneydesign.com/apps/infov4/ I'm guessing that the GSAP code is firing before the SVG DOM is instantiated any way to avoid this happening? Also any critique of my code generally is more than welcome. B
  10. Hello everyone, I am new to GSAP and I need your help to convert a CSS keyframe animation in a javascript one with GSAP. @keyframes elliptical-anim { 0% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,0deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,0deg) scale3d(.1,.1,1); } 20% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-72deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,72deg) scale3d(1,1,1); } 96% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(1,1,1); } 100% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(.3,.3,1); } } I'm using the 3D version of the animations in order to force the hardware acceleration. Thanks in advance for your help !
  11. My group of coders build/deploy flash games to several different sites, and it's usually fairly straightforward. One of these sites used to have a flash-based container that would load in our games, and it worked fine. But the people on that team who knew AS3 left, so they made a new container that is primarily javascript, with a thin AS3 shim to load in the games. This works fine for debug builds, but things slow down to a crawl when we try release builds (load times go from 30 seconds or so to over ten minutes). Their old container doesn't have an issue with release builds. This week was our company's hackathon, so I decided to delve into this and see what I could find. We do our game asset loading using XMLLoader to load in a couple xmls (one at a time) that have MP3Loaders and SWFLoaders in them. The behavior I was seeing in the release builds was that it would load the xml, wait about 90 seconds, then audit the child loaders for size, wait another 90 seconds or so, then load in the children, sometimes taking breaks between children. Prior to this week, none of them had estimatedBytes vars in the loader definitions in the xml. So, I added estimatedBytes to the first file that just had a MP3Loader wrapped in a LoaderMax block, and it zipped right along, leading me to believe that I'd found at least a way to fix things. But adding estimatedBytes to the second xml where all the children were individual SWFLoaders didn't reduce the lag with the second file at all. I tried updating the greensock swc on the games side (we had a version from late 2013), and besides requiring some very minimal refactoring based on changes in the api, that didn't appear to help the issue either. I also tried upping the maxConnections for the second XMLLoader, grouping all the SWFLoaders into a single LoaderMax bundle, and turning off the integrateProcess flag for the SWFLoaders (though this may or may not have been done in the right place, will probably try adding this to the xml lines next), but all to no avail. As these are very large projects, copying and pasting snippets seems unproductive, but I'm just wondering if you have any other ideas I should be trying. I know the JS layer is using greensock for something, but after sifting through the codebase for it, nothing jumped out at me as even remotely related. Any of this sound even remotely familiar to something you've run across?
  12. I was bidding on a project today and requested to use GSAP as my Javascript animation engine (they had originally said CSS transitions). The one question they had was 'how far back' GSAP goes — that is, will it work in IE9, IE8, and other older browsers? I had never thought of this and didn't know the answer. Also they wanted to know if GSAP 'degraded gracefully'. If GSAP doesn't work on all older browsers, how do I handle that? I know Modernizr can be used (or could be used) to provide fallbacks, but I don't know that it has a test for Greensock. What would I test for? Are there polyfills? Thanks for any info!
  13. [sEE CODEPEN] I'm trying to make an easy way to implement multiple views on a single webpage using HTML5 GSAP animation. So I declare an object constructor "pageElement." Inside I have a method that triggers an animation based on object properties declared earlier in the constructor given if I want the object on or off screen. The code throws an error [sEE ATTACHMENT.] Essentially what the error tells me, is that within the GSAP declaration, it does not accept methods within methods (method-ception). I hope there's some error in my code... This would be awesome. Anyway, thanks for taking a look, and have an awesome day Jacob Alford @jacob_alford
  14. Hello All, In my attached file, I have tried to modify a simple slider as per my requirement. But, when I slide the slider, the target image gets displayed only after slide animation is finished. Can someone help? Also on mobile, it is sliding very slowly. Please help. I have attached my file for your reference. index.html
  15. So I have 2 problems here, 1. For some reason, the rotation seems to reverse its direction for one of the increment upon completing a full circle. Currently I intend to have the circular blob move through every 30 angles on clicking the button. 2. When I click the button again during the transition, it resets the transition instead of chaining it. I was trying to find ways in which I can chain the animation so that it doesn't reset but allow the user to continue onto the next item. Thanks for any help in advance.
  16. Hey, I've been using the scrollTo plugin extensively throughout my web app and up until now its been running great. I just came across a use case that requires an event to fire when the user manually scroll's while the scrollTo plugin is auto scrolling. Does scrollTo have a callback that fires when the scroll is killed by a manual scroll? I've tried onComplete but that only fires if the whole auto scroll finishes before any manual scroll event. Thanks Josh
  17. Has anyone created a Durandal transition using Greensock? They have some basic instructions (http://durandaljs.com/documentation/Creating-A-Transition.html) and a very complicated sample (https://github.com/BlueSpire/Durandal/blob/master/src/transitions/js/entrance.js) but I don't know how to translate this to the GSAP world. For one thing, the transition module must return a promise. I have a pretty good idea of what a promise is but am, again, unsure of the GSAP code to make this happen. If anyone has any example code that would be most helpful — or some pointers. Thanks!
  18. Flash was once a passion. It still feels more advanced than HTML/Javascript for interactive projects due to years of developments added to it. Lately though I've become very interested in the possibilities of JavaScript combined with advancements in libraries like GreensockJS. So this is an experiment, and a source of inspiration of sorts. Also I thought it would be great to have a single topic where everyone can share your examples! I know some of you have a lot of things you've created lately or are in the works. There's probably some really cool things out there! I'd personally like to see what things GreensockJS is capable of reproducing from what we were used to seeing in Flash advertisements, and other animated/interactive Web "creations". Needless to say my GreensockJS samples aren't quite the best yet. I've just been experimenting enough lately to see just what it can do. Though still, I'll start by sharing a few basic ad banner samples made with Greensock JS TweenLite. So check it out here. Everything on the page is HTML/JavaScript/CSS/GreensockJS. Note it might be a little slow loading (not due to Greensock in any way). Just refresh to see the full animations again. So again if you've made something original and creative in Greensock JS, share it here for others to see. Enlighten us all on the possibilities of Greensock JS!
  19. Hi, After image is drop into container , I want to move copy of the original image to be move when original image dragend within container. I tried but it display copy image each time when original image dragend. can anyone help me? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <style> body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } #toolbar{ width:350px; height:35px; border:solid 1px blue; } </style> <script> $(function(){ var $house=$("#house"); $house.hide(); var $stageContainer=$("#container"); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); var image1=new Image(); image1.onload=function(){ $house.show(); } image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"; $house.draggable({ helper:'clone', }); $house.data("url","house.png"); // key-value pair $house.data("width","32"); // key-value pair $house.data("height","33"); // key-value pair $house.data("image",image1); // key-value pair $stageContainer.droppable({ drop:dragDrop, }); function dragDrop(e,ui){ var x=parseInt(ui.offset.left-offsetX); var y=parseInt(ui.offset.top-offsetY); var element=ui.draggable; var data=element.data("url"); var theImage=element.data("image"); var image = new Kinetic.Image({ name:data, x:x, y:y, image:theImage, draggable: true, dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); image.on("dragend", function(e) { var points = image.getPosition(); var image1 = new Kinetic.Image({ name: data, id: "imageantry", x: points.x+65, y: points.y, image: theImage, draggable: false }); layer.add(image1); layer.draw(); }); image.on('dblclick', function() { image.remove(); layer.draw(); }); layer.add(image); layer.draw(); } }); // end $(function(){}); </script> </head> <body> <div id="toolbar"> <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br> </div> <div id="container"></div> </body> </html>
  20. Hi all, This is my first time posting on these forums. I'm a regular browser but have yet to post! First off - love Greensock. It has transformed how I go about building and designing websites and applications due to the power of it. It really is awesome! My question today is quite broad, but if possible i'd love somebody to point me in the right direction as to how to complete it. I was wondering what's the best method to use a hover state to navigate around a div, both horizontally and vertically through CSS transforms. Would you have to give the div a strict width and height then navigate around that? The effect I'm looking to replicate is used here - http://www.jakobdeboer.com/gallery/series/ which i've noticed uses tweenmax to scroll through the div. I know this isn't a very specific question, but if somebody could point me in the right direction I'd be very grateful. Thanks, Oliver
  21. Hiya - this is my first question, and I hope it's not too dumb. I stumbled across Greensock while fiddling with Edge Animate. However, I'd like to hand-code some of this stuff. Unfortunately, I have virtually zero experience with Javascript. (I did take a class about then years ago, and I vaguely remember some concepts, but that's about it.) My familiarity is with plain-old HTML & CSS. My goal is to try and reverse an animation. Nothing spectacular. However, I don't even know where to start. I'm sure I can cut & paste and tweak, but I'd like a more solid basis. Am I in the wrong place? Thanks! J.
  22. Love the product, first time posting. I couldn't find in the docs if there was a method to detect if the draggable object moved left or right (or up or down). I was calculating using onDragEnd document.getElementById('draggableobject').offsetLeft - this.pointerX In some cases I had moved the element to the right just a teeny bit but received a negative number from the calculation above. Any advice would be appreciated.
  23. I am wondering if there is a way to tween essentially the same way as you would using the DynamicPropsPlugin in As3. something like this from your documentation but in javascript. TweenLite.to(myDiv, 3, {dynamicProps:{x:getMouseX, y:getMouseY}}); Secondly would it then be possible (without using a function like above) to reference a dynamic value of another element. I would want the Tween to update if "anotherdiv.width" changed during the course of the animation. Maybe the only solution is using whatever answer there is for my first question? TweenLite.to(div, 1.5, {width:anotherdiv.width}); thanks -ross
  24. Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!
  25. Hey guys. I'm doing a simple tween on a score bar which tweens the width of a div from 0% to 0-100% depending on the users score in a game. I want to play a sound when the bar animates and passes various points. I'm struggling to get the % value back out of my tween instance during the onUpdate callback. tween.target is an array containing my div. I can call: onUpdate: function() { # get a numeric percentage value val = parseFloat(this.target[0].style.width) if(val > 0 && !played_one) { soundManager.play('sfx','score_1'); played_one = true; } else if(val > 50&& !played_two) { soundManager.play('sfx','score_2'); played_two = true; } else if(val > 90 && !played_three) { soundManager.play('sfx','score_3') played_three = true; } } This solution isn't the most elegant I know. But something really doesn't feel right about "this.target[0].style.width" I'm not 100% that this is going to give me the current percentage value correctly in all browsers. I thought there might be a GSAP to give me this value reliably.
×