jimeast
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by jimeast
-
Tried FromTop on all the froms(or was it most)but didn't work. Thanks so much, now I can go on to throw the holy hand grenade! I also liked retropunk's example I'm saving both examples for future reference.
-
It looks pretty clear to me it might have more to do with the hardware it's rendered on.
-
The word Three should appear 3 times, the last appearance of three should appear right after the last sentence that displays.
-
GSAP the book just came out but not in e format mine will arrive tomorrow.
-
A simple coding error is all it was. these lines were in error: var randomScale = (Math.random() * (maxScale - minScale)) + minScale; var randomRotation = (Math.random() * (maxRotation - minRotation))+ minRotation; var randomPosition = (Math.random() * (maxPosition - minPosition)) + minPosition; this is the fis: var randomScale = (Math.random() * (maxScale - minScale) + minScale); var randomRotation = (Math.random() * (maxRotation - minRotation) + minRotation); var randomPosition = (Math.random() * (maxPosition - minPosition) + minPosition);
-
could someone give a simple working example just how I would make something happen on completion of tween?
-
this is better: <script> var i; var menu = document.getElementsByClassName('box'); var btn = document.getElementsByClassName('toggle'); function move_box(e) { var j; var id = this.getAttribute("id"); j = id.substr(3,1); //get digit at end of id. if(this.innerHTML === 'Open') { TweenLite.to(menu[j], 2, {y: 100, ease:Power2.easeOut}); this.innerHTML = 'Close'; } else { TweenLite.to(menu[j], 2, {y: 0, ease:Power2.easeOut}); this.innerHTML = 'Open'; } } for ( i = 0; i < btn.length; i++ ) { btn[i].addEventListener("click", move_box, false); btn[i].setAttribute("id", "btn" + i); } </script>
-
I use the console. I found a solution but it isn't the elegant solution I was hoping for but it will do for now. If anyone sees a "elegant" solution for this please add it. Thanks! my solution: <script> var i; var menu = document.getElementsByClassName('box'); var btn = document.getElementsByClassName('toggle'); function move_box(e) { var j; var zzz = this.getAttribute("id"); if (zzz == "btn0"){j = 0;} else {j = 1;} if(this.innerHTML === 'Open') { TweenLite.to(menu[j], 2, {y: 100, ease:Power2.easeOut}); this.innerHTML = 'Close'; } else { TweenLite.to(menu[j], 2, {y: 0, ease:Power2.easeOut}); this.innerHTML = 'Open'; } } for ( i = 0; i < btn.length; i++ ) { btn[i].addEventListener("click", move_box, false); btn[i].setAttribute("id", "btn" + i); } </script>
-
The problem seems to be in my event handler "move_box". The event listeners were apparently added, if I manually replace the i in menu with a 0 or 1 in the move_box function clicking the buttons cause the boxes to move. I have this up on JSFIddle http://jsfiddle.net/jimeast123/F4WkU/1/ <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <style type="text/css"> .box { margin: 0px; height: 50px; width: 50px; background-color: blue; } li {list-style: none;} .inner {; display: block;} .inner li, .box {display: block;} #outer li { display: inline-block;} </style> </head> <body> <ul id="outer"> <li><button type="button" class="toggle" name="btn1">Open</button> <ul class="inner"> <li><div class="box"></div></li> </ul> </li><!-- end of outer li --> <li><button type="button" class="toggle" name="btn2">Open</button> <ul class="inner"> <li><div class="box"></div></li> </ul> </li> <!-- end of outer li --> </ul> <!-- end of outer --> <script> var menu = document.getElementsByClassName('box'); var btn = document.getElementsByClassName('toggle'); function move_box(e) { if(this.innerHTML === 'Open') { TweenLite.to(menu[i], 2, {y: 100, ease:Power2.easeOut}); this.innerHTML = 'Close'; } else { TweenLite.to(menu[i], 2, {y: 0, ease:Power2.easeOut}); this.innerHTML = 'Open'; } } for (var i = 0; i < btn.length; i++ ) { btn[i].addEventListener("click", move_box, false); } </script> </body>
-
When I view this in codepen the text in box1 and box2 does not display. I copied the code to my texteditor at home it ran fine but the the text doesn't display there either. I don't know how I would address that text to give it a higher z-index or what I should do. Thanks in advance for any help. <div class="box" id="box1">Drag and throw me</div>
-
That did it, thanks.
-
I'm at day one of learning this stuff so go easy on me. When I'm in the code pen environment Draggable works fine. When I copy the code to dreamweaver I notice there's no link to the jquery in the html so I add the link. I get the Uncaught ReferenceError: jQuery is not defined jquery.gsap.min.js:14 this is my code: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Draggable</title> <script src="bonus-all/HTML5/src/minified/jquery.gsap.min.js"></script> <script src="bonus-all/HTML5/src/minified/TweenMax.min.js"></script> <style> body { background:#000; font: 15px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #fff } h2 { font:bold 16px; text-align:center; } #draggable-element { position: relative; width: 600px; height:400px; margin:50px; background: #222; border: solid 1px #fff; } .child-element { width: 75px; height:75px; position: relative; background: #00f; border: solid 1px #f0f; } #logDiv { background:#444; padding:5px; border:solid 1px #fff; width:150px; } </style> </head> <body> <h2> Mouse Over Event on Draggable instance's Children </h2> <div id="draggable-element"> <div class="child-element" id="first-child">First Child</div> <div class="child-element" id="second-child">Second Child</div> <div class="child-element" id="third-child">Third Child</div> </div> <div id="logDiv"> </div> <script> var draggableParent = $("#draggable-element"), draggableChilds = $(".child-element"), logDiv = $("#logDiv"); Draggable.create(draggableParent, { type:'x,y' }); $.each(draggableChilds, function(i,e) { var childId = $(e).attr('id'); $(e).mouseover(function() { logDiv.html(childId); }); }); </script> </body> </html>
-
I finally got around to fixing the part about it not showing all the text on first run i just set segovia_mc.y = 0 before running anything.
-
That did it! thanks I only have one problem left that's that on the first run it doesn't display the last few lines of text. I'm pretty sure I can fix it but if you spot the problem right off and can show me the fix that would be appreciated as I am lazy.
-
I have a page I'm putting together that has a stf embedded in it. http://jimslounge.com/segovia/ I almost have it working the way I want. I have the stf code wrapped in a timer and things don't sync quite right. import com.greensock.*; import com.greensock.easing.*; import com.greensock.text.*; import com.greensock.text.SplitTextField; var segovia_stf:SplitTextField; var myTextLoader:URLLoader = new URLLoader(); myTextLoader.addEventListener(Event.COMPLETE, onLoaded); var myTimer:Timer = new Timer(9000); myTimer.addEventListener(TimerEvent.TIMER, timerListener); function timerListener (e:TimerEvent):void{ runText(); } myTimer.start(); function onLoaded(e:Event):void { segovia_mc.segovia_txt.text = e.target.data; segovia_stf = new SplitTextField(segovia_mc.segovia_txt); } function runText():void{ segovia_mc.y -=110; if(segovia_mc.y < -330){segovia_mc.y=0;} for (var i:int = segovia_stf.textFields.length - 1; i > -1; i--) { TweenMax.to(segovia_stf.textFields[i], 1, {blurFilter:{blurX:10, blurY:10}, x:Math.random() * 650 - 100, y:Math.random() * 350 - 100, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 360 - 180, autoAlpha:0, delay:Math.random() * 0.4, ease:Quad.easeIn, repeat:1, yoyo:true, repeatDelay:0.2}); } } myTextLoader.load(new URLRequest("myText.txt")); Any suggestions will be greatly appreciated.
-
anti-alias for animation was already set. would it help to cache as bitmap? Do you notice how the text bounces around while it's containing MovieClip moves smoothly. Maybe it's just the nature of the beast and I have to live with it.
-
I have a MovieClip named holder_mc that contains 5 MovieClips each of the five contains a text field. When I tween the text moves somewhat independently. I would like if the test didn't move independently. view here: http://mespinach.com code: import com.greensock.*; import com.greensock.easing.*; var buttons:Array = new Array(holder_mc.btn1,holder_mc.btn2,holder_mc.btn3,holder_mc.btn4,holder_mc.btn5); TweenMax.allFrom(buttons, 1, {y:93, alpha:0, scaleX:0, scaleY:0, ease:Back.easeOut}, .5); for (var i:int = 0; i < holder_mc.numChildren; i++) { if (holder_mc.getChildAt(i) is MovieClip) { this.mouseChildren=false; //this.buttonMode=true; } } I also can't seem to set both mouseChildren=false and buttonMode=true any hrlp would be greatly appreciated...thanks.
