Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Gary Griswold

  • Content Count

  • Joined

  • Last visited

Everything posted by Gary Griswold

  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}}); }
  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 });
  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:
  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
  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 th
  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 se
  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 _so
  15. I have found some code on SnorkleTV that performed a 3D Flip of a page, and I was trying to use it. But in my use of it the object is being rotated from the left margin, but what I need is for it to be rotated by the x axis center of the object. The following is the code that I am using for the first step in the Flip. var flipSpeed:Number = 0.5; var tl:TimelineMax = new TimelineMax({paused:true}); tl.append(TweenMax.to(currentView, flipSpeed, {rotationY:90, visible:false, ease:Linear.easeNone})) The example given on SnorkleTV was extraordinary. I hope to get it right. Gary
  16. I have just discovered a simple solution. Changing panels to visible=false when they are not on stage corrects the performance problem. Amazing. I had used the visible property before to make things appear or disappear, but also seems that the renderer is able to ignore those things that are not visible.
  17. The panel scrolling example works great and by comparing it to my code, I have been able to fix the problem that I had. Thanks very much. But, I am running into another problem using it and hope you have some advice on what would be the best solution. My panels are a mixture of text, images with some interactive objects. When I put three or more of them side by side, all of the performance degrades significantly. My panels are much too large to be cached as bitmap. Blitmask doesn't work well because there are too many interactive components whose change would require recreation of the
  18. Hello, The prior website contained an excellent example of horizontal panel scrolling (or dragging) with the panels going back to alignment with the edge of the display when released. I believe it was on the ThrowProps page, but this example did not use ThrowProps. I can't seem to find it in the new website. My modifications of the code seem to have messed it up somewhere along the line and I need to get back to the original. The JS Draggable looks extraordinary, and exactly the kind of thing I need. Is there any plan to get it running in ActionScript? Gary
  19. The ThrowPropsPlugin API page contained an example of using it for scrolling a page vertically, and the throw props web page contained an example for doing horizontal panel transitions that animate entire panel movements right and left. Both of these work extremely well. But when I combine them, I run into problems that both of them are acting on mouse up and mouse down events, which means neither is working as intended. Add some interactive objects to the scrolling page, and it only gets more complicated. I think the solution is to write a singleton class that interprets mouse down, m
  20. I notice that your examples of scrolling using ThrowProps pretty consistently listens for mouse events on mc.stage.add…. where mc is the container being scrolled. And I notice that listening on the stage makes the listeners very responsive. This works fine if the entire stage is being scrolled, but usually this is not the case. The performance of the scroller seems to be very much affected by how quickly the listener receives the event. Two possibilities of how to deal with this come to mind. One approach would be to find the display object that is the correct bounds and closest to the
  21. Your analysis of the problem is correct, but I am still puzzled about how to fix it. Consider the following: 1) Class A uses the Scroller class. 2) Class A contains its own mouse up and mouse down handlers to execute when the mouse has been clicked. 3) When Class A senses a mouse click, it calls scrollToY in the scroller class, which executes a tween to scroll. 4) The Scroller class gets the mouse up event immediately after Class A has finished the processing described above. 5) The mouse up event in the scroller executes the ThrowPropsPlugin, which appears to stop the other tween.
  22. I have written a scroller class that is very closely based upon the example given on the ThrowProps api doc page. One of the things that I have added is a scrollToY(num) function, which works fine. But it does not work if called as a result of a mouse click. The viewport being scrolled is a list of words, and when a word is clicked, I would like to scroll that word to the center of the viewport. But, TweenLite.to is not working unless I comment out the ThrowPropsPlugin.to call in the same class. It appears that the ThrowPropsPlugin is doing something with the mouse clicks that interfere