Jump to content


  • Posts

  • Joined

  • Last visited

vsiege's Achievements


Newbie (1/14)



  1. Code The onCompleteParams isn't handling the Array correctly. Each character in the first index of the array is getting split into multiple indexes in the receiving function. I am using the latest version of the library. Dresden = function () { var _that = this; this.launch = function (dialogWindow2Launch) { switch (dialogWindow2Launch) { case ENUM.DIALOG: _id('dialogWindowImg').style.backgroundImage="url('assets/svg/gggeeee.svgz'')"; var twn = TweenMax.to(_id('dialogWindowImg'),1,{ backgroundPosition:'-3200px 0px', ease: SteppedEase.config(10), paused: true}); //twn.play(); var arr = [1]; TweenMax.to(_id('dialogWindow'),0.4,{ y:'200px', ease: Back.easeOut.config(1), onComplete:onLaunchComplete, onCompleteParams:['HELP'] }); break; } }; function onLaunchComplete(dialogWindow2Launch){ console.log('onLaunchComplete=',dialogWindow2Launch[0], dialogWindow2Launch.length);// OUTPUT = onLaunchComplete= H 4 switch (dialogWindow2Launch[0]) { case ENUM.DIALOG: console.log('dialogWindow2Launch=',dialogWindow2Launch, dialogWindow2Launch.length); //TweenMax.to(_id('dialogWindowImg'),1,{ backgroundPosition:'-3200px 0px', ease: SteppedEase.config(10)}); break; } } };
  2. Thanks for your help. I had to remove a lot of the animations for iOS 5 and not assign any z-index numbers. I hope this helps someone else out there. Also, at the end of some of the timelines, I added a function to re-tween the invisible elements to opacity 1. It should be noted this was also happening on Safari 5.x for desktop.
  3. I actually started this topic in another thread but decided it needed a more appropriate title and separate thread. It seems as though the animations are not working or displaying properly under iOS 5.X and Safari desktop 5.X. I'm currently using the latest GSAP files (from CDN). I've tried using this but to no avail: TweenLite.ticker.useRAF(false); I have no idea what to try next. You can see how I'm stringing together the timelines in Matchups.js build(). I can rip them out and put them in the post if that helps. Please let me know. Most of the view is blank under iOS 5.X and Safari desktop 5.X. Reference URL: http://capone-dev.to....com/#/matchups
  4. OK. So this is what I did to remedy the problem on Safari Version 6.0.5 (7536.30.1). I switched _view_tl_1.add(TweenLite.fromTo([_percentCellA_cont,_percentCellB_cont], 0.3, {opacity: 0}, {opacity: 1}), .4); to: _view_tl_1.add(TweenLite.fromTo([_percentCellA_cont,_percentCellB_cont], 0.3, {autoAlpha: 0}, {autoAlpha: 1}), .4); Remaining issue in line with what Im seeing here: Ipad 1 and 2 on Safari almost none of the timeline animations are even visible for the link above. Almost the entire Matchups view is completely not viewable. This is a critical bug for me. I have no idea what to change. Thanks for your help so far. Specifically: Safari iPad 2 - iOS 5.1.1
  5. I just updated to the latest build and posted it the build url above. In Safari: Version 6.0.5 (7536.30.1) 1. Click Matchups (do not move your cursor over the view) 2. Now, visually find the black rectangle with the red and white Vote buttons. Above them there is a percent that is not fading in unless the user moves the cursor over it. Any ideas? Thanks for looking into this.
  6. Im also seeing this issue in Safari 6 and 5. When the Matchups view first loads.... the percents arent visible until the user rolls over the black rectangle with red 'Vote Now' button. Any thoughts?
  7. I am currently working on a project that makes use of the TimelineLIte to sequence some animations together. While testing, I discovered that only in IE9 (havent tested in 10) that the timelines do not complete their transitions for 3 elements. If you haver over the elements, then you see them finish. Visit the URL below (please respect the fact that this is a dev link) and click on any number from 1-8 (on the bottom of the page).... in IE9, the Winner banner the percentage cells do not fully reach full opacity. I could really use some assistance working through this problem. Thank you in advance. Reference URL: http://capone-dev.toolofnadrive.com/#/matchups
  8. Is it possible to have two timelines referencing the same tween instances? I would like to reset each timeline back to duration 0 (and paused)], then play the appropriate timeline. It seems as though the first timeline to get played 'owns' the reference to the tween and the other timeline will simply not play what they have common. var tw1 = TweenLite.fromTo(dom('#challengerA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-500px'}}, {css: {autoAlpha: 1, marginLeft: '-50px'}}); var tw2 = TweenLite.fromTo(dom('#challengerB'), 0.4, {css: {autoAlpha: 0, right: '-400px'}}, {css: {autoAlpha: 1, right: '-50px'}}); var tw3 = TweenLite.fromTo(dom('#chall_mascotA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}}); var tw4 = TweenLite.fromTo(dom('#chall_mascotB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}}); var tw5 = TweenLite.fromTo(dom('#chall_schoolA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}}); var tw6 = TweenLite.fromTo(dom('#chall_schoolB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}}); var tw7 = TweenLite.fromTo([dom('#chall_percentageCellA'),dom('#chall_percentageCellB')], 0.3, {autoAlpha: 0}, {autoAlpha: 1}); _view_tl_0.add(tw1, 0); _view_tl_0.add(tw2, 0); _view_tl_0.add(tw3, .2); _view_tl_0.add(tw4, .2); _view_tl_0.add(tw5, .3); _view_tl_0.add(tw6, .3); _view_tl_0.add(tw7, .4); _view_tl_0.add(winnerBanner,.6); // _view_tl_0.add(tw8, .4); _view_tl_1.add(tw1, 0); _view_tl_1.add(tw2, 0); _view_tl_1.add(tw3, .2); _view_tl_1.add(tw4, .2); _view_tl_0.pause(0);_view_tl_1.pause(0);_view_tl_2.pause(0); switch (_viewStatus){ case 1: // alert('1111'+_viewStatus); _view_tl_1.play(0); break; case 2: // alert('2222'+_viewStatus); _view_tl_2.play(0); break; case 0: // alert('0000'+_viewStatus); _view_tl_0.play(0); break; default: // alert('default'+_viewStatus); _view_tl_0.play(0); }
  9. No problem. I will let you know when I have something. Thanks.
  10. Unfortunately it looks like I am still experiencing the same issue. If you swap between these two pages you can see that each triggers a different timeline but the same but it only works if you reload the page again. All libraries have been updated as per your request. http://dev-sundance.toolprototype.com http://dev-sundance.toolprototype.com?id=3
  11. Thank you. I wanted to post back as quick as possible as you have done the same sir. It looks like that has done the trick. If by chance tomorrow whenI test on another device, things break again, I will let you know. As always, thanks for the excellent work and support.
  12. I'm experiencing a problem only on ios, Safari and Dolphin. When the page first loads, the TimelineMax animation will not play. If I tap somewhere on the screen (not on a button) or reload page, everything plays. I cannot seem to figure this out and I have tired rearranging the order of the way the page loads and to no avail, nothing works unless I reload the page or tap on the screen in a random spot. I checked the console.log and no issues. I could really use a bit of help on this one. URL: Works on: DESKTOP: Safari, Chrome, FF and Opera Broken on: iOS: Safari and Dolphin
  13. I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second. Goals: 1. Duration of TimelineMax = 2 seconds 2. Specifically time the elements to start and finish there animations within the first second. 3. Loop timeline So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance. tl1.insertMultiple( [ TweenLite.fromTo( byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}} ), TweenLite.fromTo( byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}} ) ],0, "normal",.1 );
  14. I'm having a ton of trouble trying to use TimelineMax for JS. I cannot get it to work at all. I must be missing something (if not a few things). I am trying to use the appendMultiple and insertMultiple methods, but nothing seems to be happening. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tweening</title> <link type="text/css" href="exts_css/objects2Move.css" rel="stylesheet" /> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TweenLite.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TimelineMax.min.js"></script> <script> var r = document.getElementById("tiny"); function hello() { TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut}); } var tl = new TimelineMax(); tl.append(TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut})); function animateAll(){ tl.play(); } </script> </head> <body> <div id="tiny"> help </div> <a href="#" onclick="animateAll()" style="left:220px; position:absolute;">Press me</a> </body> </html>