Jump to content

Gary Griswold

  • Posts

  • Joined

  • Last visited


4 Newbie

About Gary Griswold

Contact Methods

Profile Information

  • Gender
  • Location
    Cincinnati, OH
  • Interests
    Christianity, my grandchildren, App Software Development
  1. Thanks guys. The solution turned out to be easier than I imagined. My Tween needed autoKill: false. Reading your suggestions reminded me that I was using a plugin, and reading the plugin's documentation was what I needed. TweenMax.killTweensOf(window); TweenMax.to(window, 0.7, {scrollTo: { y: rect.top + window.scrollY - that.headerHeight, autoKill: false }}); I don't know if the .killTweensOf(window) is really needed. I will test that shortly.
  2. I am trying to animate scrolling of text, while the user is listening to the text being read, using the following JS with Greensock calls. document.body.addEventListener(BIBLE.SCROLL_TEXT, function(event) { var nodeId = event.detail.id; var verse = document.getElementById(nodeId); if (verse) { var rect = verse.getBoundingClientRect(); TweenMax.killTweensOf(window); TweenMax.to(window, 1.2, {scrollTo: { y: rect.top + window.scrollY - that.headerHeight}}); } }); This solution works some of the time. Actually it works almost all of the time if I change it to a TweenMax.set. The problem seems to be that text is dynamically added while scrolling occurs. Currently the program checks for the need for text to be added every 0.25 seconds. Even adding text at the end of the document is making the above animation not work. I tried to add a condition to the logic that adds text to prevent it from executing while scrolling was continuing. But, this did not improve the reliability of the animated scrolling. if (!TweenMax.isTweening(window)) { .... code that executes every 0.25 seconds, and sometimes adds text. var rootNode = document.createElement('div'); rootNode.setAttribute('id', 'top' + this.nodeId); rootNode.innerHTML = html; parent.appendChild(rootNode); } The text being added is chapters of the Bible, one chapter at a time, so it is not a small amount of text. Does anyone have any ideas? Given the complexity of the infinite scroll, and the fact that I read text from a sqlite database I don't know if I could produce a codepen. Thanks for any help.
  3. I am using TweenMax to animate the appearance and scaling of a Popup. It works fine in one view, but in another it occasionally does not appear until after the user starts to scroll the page beneath the Popup. The popup is just a div with three lines of text in three p elements. The animation of the popup is done as follows: var clickPos = String(event.detail.x) + 'px ' + String(event.detail.y) + 'px'; that.rootNode.appendChild(that.viewRoot); TweenMax.set(that.viewRoot, { scale: 0 }); TweenMax.to(that.viewRoot, 0.7, { scale: 1, transformOrigin: clickPos, immediateRender: true }); The css for the popup is as follows: #attribution { position: fixed; width: 80%; top: 10%; margin-top: 7%; margin-left: 7%; margin-right: 7%; padding: 3%; text-align: center; z-index: 200; background-color: rgba(255, 246, 233, 0.9); border-radius: 25px; border: solid; border-width: thin; box-shadow: 4px 4px 4px #777; -webkit-box-shadow: 4px 4px 4px #777; } Any ideas what could cause the delay in drawing, which sometimes occurs? When the program first starts, it will work fine, but after a while each popup does not appear unless one starts to scroll. Thanks for any help.
  4. Both of these solutions work great, but I do like using the function better, and I was able to move code that I had inside the onDrag function into the snap function. However, when I used the 'liveSnap' property as you show here, the toggle would snap instantly from one side to the other. But, when I used the 'snap' property it does glide gracefully. Thanks so much.
  5. Hi, I have written a toggle switch using draggable with the snap property set to the dimensions of the slider. For example: snap:[0,47] works just fine. But because I am developing for mobile I cannot use hardcoded dimensions. So, I have tried setting the snap after Draggable.create as follows: var drag0 = draggable[0]; drag0.snap = [drag0.minX, drag0.maxX]; But, this does not seem to work. Is there a way to make this work? P.S. This is my first code pen.
  6. Thanks Diaco. You really nailed it.
  7. Hello, I have been able to use Draggable to create a very nice slider control that controls font-size. There is one div, which is the slider bar, and another the thumb. My only problem is that I need to set a starting X position for the thumb, that is computed from the current fontSize. The math is working, except that I do not know how to get the this.minX and this.minY values before the slider is used. The documentation mentions translation.transform, but I have no idea how that would be used in my javascript code. The javascript is as follow: If needed, I will add a code pen: function startDraggable(fontSize, ptMin, ptMax) { var sampleNode = document.getElementById('sampleText'); var ptRange = ptMax - ptMin; var startPos = initialPosition(fontSize); TweenMax.set('#thumb', {x:startPos}); Draggable.create('#thumb', {type:'x', bounds:'#slider', onDrag:function() { console.log('x', this.x, this.minX, this.maxX); resizeText(this.x, this.minX, this.maxX); }}); function initialPosition(fontSize) { var slider = document.getElementById('slider'); console.log('local left', slider.offsetLeft); var bounds = slider.getBoundingClientRect(); var minX = bounds.left; var maxX = bounds.right; console.log('found bounds', minX, maxX); var x = (fontSize - ptMin) / ptRange * (maxX - minX) + minX; resizeText(x, minX, maxX); return(x); } function resizeText(x, min, max) { var size = (x - min) / (max - min) * ptRange + ptMin; sampleNode.style.fontSize = size + 'px'; } }
  8. Jonathan, Thanks so much for your input. The opacity and/or autoAlpha did help, and I also found scaleY to be better than height. The row shrinks nicely, but the rows below remain still until the row is removed, and then they jump up. The result is a little jarring. I guess the row removal looks better not animated. Thanks for the help.
  9. Thanks so much for fixing my silly error. My only excuse is that I am accustomed to strongly typed compiled languages. I still have a problem with the animation of the row being dropped. I am trying to animate the height of the one cell in the row to height: 0, and then delete the row, but the tween isn't working.
  10. I have a row (TR) in a table that contains only one cell (TD). I would like to animate change the height of the cell to zero, before removing the row. But I have not been able to get this to work. I would also do the corresponding animation when a new row is inserted. My apologies that the code-pen is not very good. It is my first try. I know this might be easier with divs, but I am using table in this application for rows and columns of data and I need the easy grouping capability that "rowspan" and "colspan" provide
  11. Hello, I am trying to get a small scrollable body of text (the table of contents) to appear starting from under the button that is clicked to present the table of contents. Then I want the table of contents to disappear by a reverse animation back under the button when the user has selected a place in the table of contents. I have a solution that partially works, but if the user has scrolled to the bottom half of the table of contents, the tween to remove the table of contents is happening twice. Or maybe it is starting, getting interrupted by something, and then finishing. This is a 'single page' mobile app. So pages of text are being removed from the DOM when the TOC is shown, and added to the DOM when the TOC is removed. I don't know if I could fit the essential ingredients into a codepen, but these are the two tween calls that I am using. Show: TweenMax.fromTo(this.rootNode, 0.7, { css: {scale:0} }, { css: {scale:1, transformOrigin:"left top"}, ease:Power4.easeOut}); Hide: TweenMax.fromTo(this.rootNode, 0.7, { css: {scale:1} }, { css: {scale:0}}); Thanks for any help you can provide.
  12. Jack, Thanks. The update() function call does help, and it seems that I need to do the Draggable create after I have added the starting content. But there is still a problem that is caused by a weakness in Cordova. It appears that Cordova is linked to the older (pre ios 8) UIWebView, not the new WKWebView. So, even using Draggable with Cordova I get the pre iOS 8 behavior of no Javascript updates and no screen painting while the view UIWebKit is scrolling. With this limitation in Cordova, I will not be able to add and remove content dynamically unless I wait till scrolling stops at the end of the viewport. The following link describes the problem with Cordova at the end of the writeup. Thanks for your help. http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/ Gary
  13. Hello, I am developing a cordova/phonegap application for iOS and Android, and I am trying to use Draggable for scrolling to overcome some problems with iOS native scrolling in cordova. I am not seeing any movement when pressing and dragging the screen even though the onPress and onDrag are firing. I have noticed in the documentation that height must be set somewhere, but please be specific about where and with what javascript (not jquery) functions. I can verify that offsetHeight has already been set on the div you added and the value looks correct. Is there something else to set? If that is not the problem, other things that might be a cause are that I am doing an infinite scroll of text, and since the user can jump around, the Draggable is created when there is no content, because the parts being presented in the scrolling viewport are frequently deleted and other pages added. Plus as the user scrolls forward or back new pages are added to the beginning or end. To date I am seeing Draggable work with my application running under Node/Webkit, but when I move the same code to a cordova (phonegap) application nothing moves. If Draggable scrolling is known to work with Cordova, please let me know and I will try to put together a test that could be presented in codepen. Gary
  14. Hi, I have written a very basic class using the VideoLoader for a mobile application in AS3 (not Flex), and it works very well when I run it in the emulator. But, when I run it on the device, it fails with a NetStream.Play.Failed error. I am pretty new to video, any idea what could be wrong. The code, and a log of errors follows. package lib.view.student { import com.greensock.events.LoaderEvent; import com.greensock.loading.VideoLoader; import flash.display.Sprite; import flash.events.Event; import flash.utils.getTimer; public class VideoPlayerGS extends Sprite { private var _sourceURL:String; private var _video:VideoLoader; public function VideoPlayerGS(sourceURL:String) { super(); _sourceURL = sourceURL; trace('VIDEO URL', _sourceURL); addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); } private function addedToStageHandler(event:Event) : void { _video = new VideoLoader(_sourceURL, {autoPlay: true, container: this, width: stage.fullScreenWidth, height: stage.fullScreenHeight, scaleMode: 'proportionalInside', hAlign: 'center', vAlign: 'center', bgColor: 0x000000, onOpen: onOpenHandler, onInit: onInitHandler, onProgress: onProgressHandler, onComplete: onCompleteHandler, onCancel: onCancelHandler, onError: onErrorHandler, onFail: onFailHandler, onIOError: onIOErrorHandler }); _video.load(); } private function onOpenHandler(event:LoaderEvent) : void { trace('LoaderEvent', event.type, event.text, getTimer()); } private function onInitHandler(event:Event) : void { trace('InitEvent', event.type, getTimer()); } private function onProgressHandler(event:LoaderEvent) : void { //trace('ProgressEvent', event.toString(), getTimer()); } private function onCompleteHandler(event:LoaderEvent) : void { trace('CompleteEvent', event.type, event.text, getTimer()); } private function onCancelHandler(event:LoaderEvent) : void { trace('CancelEvent', event.type, event.text, getTimer()); } private function onErrorHandler(event:LoaderEvent) : void { trace('ErrorEvent', event.type, event.text, getTimer()); } private function onFailHandler(event:LoaderEvent) : void { trace('FailEvent', event.type, event.text, getTimer()); } private function onIOErrorHandler(event:LoaderEvent) : void { trace('IOErrorEvent', event.type, event.text, getTimer()); } } } The console output is as follows: [trace] VIDEO URL http://s3.amazonaws.com/ecs.media.us/Vickie_Weaving_sm.f4v [trace] LoaderEvent open 2514 [trace] InitEvent init 2952 [trace] ---- [trace] Error on VideoLoader 'loader0' (http://s3.amazonaws.com/ecs.media.us/Vickie_Weaving_sm.f4v): NetStream.Play.Failed [trace] ---- [trace] ErrorEvent error VideoLoader 'loader0' (http://s3.amazonaws.com/ecs.media.us/Vickie_Weaving_sm.f4v) > NetStream.Play.Failed 2979 [trace] FailEvent fail VideoLoader 'loader0' (http://s3.amazonaws.com/ecs.media.us/Vickie_Weaving_sm.f4v) > NetStream.Play.Failed 2980 [trace] CancelEvent cancel 2980