Jump to content

Search the Community

Showing results for tags 'scrolling'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. I'm trying to make an element appear as if it's drawing a path as you scroll down the page. I have it mostly working fine, but the the object doing the following slowly drafts away from the intended path the further into the animation it gets. Unsure why this is. There's an additional problem where it completely misses the path data for the last "hump" too, you'll see what I mean towards the very end of the line (maybe this is related?) To draw the path I'm revealing the line by animating a duplicate path with a white stroke above it. The pathDataToBezier function is fed the original path data though. Open to alternative ways of doing it if I can't find a solution. You may have to maximise the preview window to see it draw properly. Thank you
  2. So I'm using scrollmagic for an infographic, and I have a smooth scroll plugin that I was trying to use that hasn't been updated in a while (last used in January), but TweenMax has! The script is throwing all sorts of errors and completely breaking the animation. I'm getting the error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present." Anyone know how to update this script? It's at the bottom of the js on my codepen.
  3. Hello, I have created a very simple animation that animates HTML sections onto the page when the page is scrolled. When I scroll I notice some glitching on the animation. I have tried CSS animation and it works fine, but want to understand why I'm having this issue with GSAP. I have attached the codepen I have created and when you scroll a little faster on the page you will notice the issue. Thank you, Todd
  4. Hey Guys, i am wondering if i could achieve this effects with GSAP (Draggable, TweenMax etc.). Basically i would like to smoothly blend over the background image of a DIV (the regular image and the blurred image) and scale the image while i am scrolling another DIV up and down like shown in this small movie example: https://dl.dropboxusercontent.com/u/75478515/test.mov Mobile compatibility is crucial since it has to run smoothly in a Cordova app... A simple little Codepen would be highly appreciated Thanks, Sandor
  5. Is there a feature in GreenSock that is similar to ScrollFire or Waypoint? I'm looking to add/remove classes to an element on scroll, and then animate children of that element based on new class assignment. I'm currently using the ScrollToPlugin.
  6. 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
  7. I read a lot of articles after I decided to make my own scrollable DisplayContainer in mobileStyle. There are a lot of people who had problems with clickable Items they want to scroll and here is my solution after coding a bit around to find a solution. The Class isn't optimized yet but for those who wants to start with a similar project it could help. Feedback or optimisations are really welcome. Cheers package ui.components { import flash.display.Sprite; import flash.display.DisplayObject; import com.greensock.BlitMask; import flash.events.Event; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.ThrowPropsPlugin; import flash.ui.Multitouch; import flash.ui.MultitouchInputMode; import flash.events.GestureEvent; import flash.events.TransformGestureEvent; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Elastic; import fl.transitions.TweenEvent; public class ScrollableDisplayContainer extends Sprite { Multitouch.inputMode = MultitouchInputMode.GESTURE; TweenPlugin.activate([ThrowPropsPlugin]); protected const MIN_WIDTH:Number = 20; protected const MIN_HEIGHT:Number = 20; private var _width:Number; private var _height:Number; private var _mask:BlitMask; private var _maskHolder:Sprite; private var _maskContent:DisplayObject; private var _maskContentHolder:Sprite; private var hScroll:Boolean = false; private var vScroll:Boolean = false; private var scrollBarV:Sprite; private var scrollBarH:Sprite; private var enableScrolling:Boolean = false; private var allowScrolling:Boolean = false; private var startingPointX:Number; private var startingPointY:Number; private var scrollContentPadding:Number = 50; private var bounceAnimation:Tween; public function ScrollableDisplayContainer(width:Number, height:Number, content:DisplayObject, name:String = "content") { super(); this._width = width; this._height = height; this._maskContent = content; this._maskContent.name = name; if(!Multitouch.supportsGestureEvents) { throw new Error("This Device doesn't support GestureEvents, please go home ... nothing to see here"); } this.addEventListener(Event.ADDED_TO_STAGE, added); } public function changeContent(content:DisplayObject, name:String = "content"):void { _maskContentHolder.removeChild(_maskContent); _maskContent = content; _maskContentHolder.addChild(_maskContent) } private function added(e:Event):void { this.removeEventListener(Event.REMOVED, removed); init(); } private function removed(e:Event):void { this.removeEventListener(Event.REMOVED, removed); _mask.dispose(); _mask = null; if (enableScrolling) { this.removeEventListener(TransformGestureEvent.GESTURE_SWIPE, scrollFast); this.removeEventListener(MouseEvent.MOUSE_DOWN, scroll); allowScrolling = true; } } private function init():void { _maskHolder = new Sprite(); this.addChild(_maskHolder); _maskContentHolder = new Sprite(); _maskHolder.addChild(_maskContentHolder); _maskContentHolder.addChild(_maskContent); _mask = new BlitMask(_maskContentHolder); _mask.x = 0; _mask.y = 0; _mask.width = this._width; _mask.height = this._height; _mask.bitmapMode = false; _mask.autoUpdate = true; setScroller(); } private function setScroller():void { _maskContent.width > _mask.width ? drawScrollBarH() : 0; _maskContent.height > _mask.height ? drawScrollBarV() : 0; if (enableScrolling) { allowScrolling = true; this.addEventListener(TransformGestureEvent.GESTURE_SWIPE, scrollFast); this.addEventListener(MouseEvent.MOUSE_DOWN, scroll); } } private function drawScrollBarH():void { enableScrolling = true; hScroll = true; var barWidth:Number = _mask.width/(_maskContentHolder.width/_mask.width); scrollBarH = new Sprite; scrollBarH.graphics.lineStyle(0, 0x333333); scrollBarH.graphics.beginFill(0x333333, 1); scrollBarH.graphics.drawRoundRect(0, 0, barWidth, 4, 3, 3); scrollBarH.graphics.endFill(); this.addChild(scrollBarH); scrollBarH.alpha = 0; scrollBarH.x = 1; scrollBarH.y = _mask.height - scrollBarH.height-1; } private function drawScrollBarV():void { enableScrolling = true; vScroll = true; var barHeight:Number = _mask.height/(_maskContentHolder.height/_mask.height); scrollBarV = new Sprite; scrollBarV.graphics.lineStyle(0, 0x333333); scrollBarV.graphics.beginFill(0x333333, 1); scrollBarV.graphics.drawRoundRect(0, 0, 4, barHeight, 3, 3); scrollBarV.graphics.endFill(); this.addChild(scrollBarV); scrollBarV.alpha = 0; scrollBarV.x = _mask.width - scrollBarV.width-1; scrollBarV.y = 1; } private function scrollFast(t:TransformGestureEvent):void { t.offsetX == -1 && hScroll && allowScrolling ? scrollFastToLeft() : 0; t.offsetX == 1 && hScroll && allowScrolling ? scrollFastToRight() : 0; t.offsetY == 1 && vScroll && allowScrolling ? scrollFastDown() : 0; t.offsetY == -1 && vScroll && allowScrolling ? scrollFastUp() : 0; } private function scrollFastToLeft():void { hScroll ? scrollBarH.alpha = 0.3 : 0; _maskContentHolder.x = Math.max( _maskContentHolder.x - (_maskContentHolder.width/3), (_maskContentHolder.width-_mask.width)*-1 ); if (_maskContentHolder.x < (_maskContentHolder.width-_mask.width)*-1) { _maskContentHolder.x = (_maskContentHolder.width-_mask.width)*-1; } scrollBarH.x = calcScrollBarXaxis(); checkFinish(); } private function scrollFastToRight():void { hScroll ? scrollBarH.alpha = 0.3 : 0; _maskContentHolder.x = Math.min(_maskContentHolder.x + (_maskContentHolder.width/3), 0); if (_maskContentHolder.x > 0) { _maskContentHolder.x = 0; } scrollBarH.x = calcScrollBarXaxis(); checkFinish(); } private function scrollFastDown():void { vScroll ? scrollBarV.alpha = 0.3 : 0; _maskContentHolder.y = _maskContentHolder.y + (_maskContentHolder.height/3); if (_maskContentHolder.y > scrollContentPadding) { _maskContentHolder.y = scrollContentPadding; } scrollBarV.y = calcScrollBarYaxis(); checkFinish(); } private function scrollFastUp():void { vScroll ? scrollBarV.alpha = 0.3 : 0; _maskContentHolder.y = _maskContentHolder.y - (_maskContentHolder.height/3); if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1) { _maskContentHolder.y = (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1; } scrollBarV.y = calcScrollBarYaxis(); checkFinish(); } private function scroll(m:MouseEvent):void { if (allowScrolling) { allowScrolling = false; startingPointX = m.stageX; startingPointY = m.stageY; this.addEventListener(MouseEvent.MOUSE_UP, endScrolling); this.addEventListener(MouseEvent.MOUSE_MOVE, scrollToDirection); } } private function endScrolling(m:MouseEvent):void { this.removeEventListener(MouseEvent.MOUSE_UP, endScrolling); this.removeEventListener(MouseEvent.MOUSE_MOVE, scrollToDirection); checkFinish(); _mask.bitmapMode = false; } private function checkFinish():void { hScroll ? scrollBarH.alpha = 0 : 0; vScroll ? scrollBarV.alpha = 0 : 0; if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height)*-1) { startAnimation("y", _maskContentHolder.y, (_maskContentHolder.height-_mask.height)*-1); } else if (_maskContentHolder.y > 0) { startAnimation("y", _maskContentHolder.y, 0); } else { allowScrolling = true; } } private function startAnimation(axis:String, start:Number, end:Number):void { bounceAnimation = new Tween(_maskContentHolder, axis, Elastic.easeOut, start, end, 1, true); bounceAnimation.addEventListener(TweenEvent.MOTION_FINISH, animationFinished); } private function animationFinished(t:TweenEvent):void { bounceAnimation.removeEventListener(TweenEvent.MOTION_FINISH, animationFinished); allowScrolling = true; } private function scrollToDirection(m:MouseEvent):void { m.stageX < startingPointX ? scrollLeft(m.stageX, m.stageY) : 0; m.stageX > startingPointX ? scrollRight(m.stageX, m.stageY) : 0; m.stageY < startingPointY ? scrollUp(m.stageX, m.stageY) : 0; m.stageY > startingPointY ? scrollDown(m.stageX, m.stageY) : 0; } private function setNewStartingCoordinates(xPos:Number, yPos:Number):void { startingPointX = xPos; startingPointY = yPos; } private function calcScrollBarXaxis():Number { var cont:Number = (_maskContentHolder.width+_maskContentHolder.x)-_mask.width; var base:Number = _maskContentHolder.width-_mask.width; var max:Number = _mask.width - scrollBarH.width; var act:Number = cont*max/base; return Math.floor(max - act); } private function calcScrollBarYaxis():Number { var cont:Number = (_maskContentHolder.height+_maskContentHolder.y)-_mask.height; var base:Number = _maskContentHolder.height-_mask.height; var max:Number = _mask.height - scrollBarV.height; var act:Number = cont*max/base; var ret:Number = Math.floor(max - act); ret < 0 ? ret = 0 : 0; ret > max ? ret = max : 0; return ret; } private function scrollLeft(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; hScroll ? scrollBarH.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.x = _maskContentHolder.x -3; if (_maskContentHolder.x < (_maskContentHolder.width-_mask.width)*-1) { _maskContentHolder.x = (_maskContentHolder.width-_mask.width)*-1; } scrollBarH.x = calcScrollBarXaxis(); } private function scrollRight(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; hScroll ? scrollBarH.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.x = _maskContentHolder.x +3; if (_maskContentHolder.x > 0) { _maskContentHolder.x = 0; } scrollBarH.x = calcScrollBarXaxis(); } private function scrollUp(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; vScroll ? scrollBarV.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.y = _maskContentHolder.y -3; if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1) { _maskContentHolder.y = (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1; } scrollBarV.y = calcScrollBarYaxis(); } private function scrollDown(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; vScroll ? scrollBarV.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.y = _maskContentHolder.y +3; if (_maskContentHolder.y > scrollContentPadding) { _maskContentHolder.y = scrollContentPadding; } scrollBarV.y = calcScrollBarYaxis(); } } } Usage: import flash.display.Sprite; import ui.components.ScrollableDisplayContainer; import flash.events.MouseEvent; var a:Sprite = new Sprite(); a.graphics.lineStyle(0, 0xFF0000); a.graphics.beginFill(0xFF0000, 1); a.graphics.drawRect(0, 0, 1000, 800); a.graphics.endFill(); var aa:Sprite = new Sprite(); aa.graphics.lineStyle(0, 0xFF0000); aa.graphics.beginFill(0x00FF00, 1); aa.graphics.drawRect(0, 0, 1000, 500); aa.graphics.endFill(); aa.buttonMode=true; aa.addEventListener(MouseEvent.CLICK, clicked); function clicked(m:MouseEvent):void { trace ('clicked: '+m.target); } var c:Sprite = new Sprite(); c.addChild(a); a.x = 0; a.y = 0; c.addChild(aa); aa.x = 0; aa.y = 200; var b:ScrollableDisplayContainer; b = new ScrollableDisplayContainer(600, 560, c); addChild(;
  8. I touched on this in a previous posts but am still to find the perfect solution for mixing Draggable dragging/scrolling with native browser scrolling. 1. Open the attached Codepen 2. Emulate touch events - open Chrome inspector and emulate a device such as a Nexus 5 3. Alternatively view the Codepen on a device 4. Alternatively view the screen cap below Basically, you will see that it isn't possible to scroll the page vertically when the drag starts on the Draggable carousel (blue blocks). I've examined Draggable.js source code but I can't figure out where you the relevant scroll / touch event are being intercepted. Could you point me in the right direction? I know one work around is to use a second Draggable to control vertical scrolling but this isn't an option for us, we need native browser scrolling when scrolling vertically.
  9. Hi, I'm new in gsap and need a little help. I have an animation that triggers on each scroll event and sometimes the animation stutters badly. The fps meter shows values from 9 to 55. (I'm trying to animate divs with png background). Rough version of my code: var scrollPosition = 0, lastScrollTop = 0; $(window).scroll(function(){ scrollPosition = $myWindow.scrollTop(); if (scrollPosition > lastScrollTop){ // --- scroll down TweenLite.to($('.boxes'), 2.5, {top: "+=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } else { // --- scroll up TweenLite.to($('.boxes'), 2.5, {top: "-=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } // --- update last scroll lastScrollTop = scrollPosition; }); Is there something that I could optimize, must I use timelines etc.? Any help would be greatly appreciated p.s. sorry for my bad English
  10. this sample download and document form work : http://blog.bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax but but but iframe not work scroll <iframe id="ifrmView" border="0" class="brNon wFull" scrolling="yes"></iframe> And Source : $('#lstExplorer li').live('click', function (e) { var URL=$this.data("path"); var Type=$this.data("type"); $("#ifrmView").attr("src","PanelView.php?URL="+URL+"&Type=" + Type).load(function(){ this.contentWindow.setLoadInit(); //setScrollAnimation($(this.contentWindow)); }); }); in content iframe : <script src="JavaScript/GSAP/TweenMax.min.js" type="text/javascript"></script> <script src="JavaScript/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"> function setLoadInit() { setScrollAnimation($(window)); } </script> <div> ....
  11. Does Green Sock have a solution for scrolling text? For example, lets say I have a text box (in a movieClip) with text that has a few paragraphs that are below the stage. I would like for the user to be able to swipe up and down to scroll through text. I checked out the blit mask solution but I'm not sure if this is the same thing I'm looking for (https://greensock.com/blitmask). If this is possible can some please provide a reference.
  12. Does GSAP have built in scroll functionality to trigger animations or do I need to use another library such as ScrollMagic or Skrollr?
  13. 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
  14. Hi All, I could do with some help! I'm using the draggable plugin to build a custom scrollbar for a horizontally scrolling element. It works great when dragging the scrollbar, but I also need to update the scrollbar if they scroll using a mouse or swipe with a finger. I'm attempting to access a few variables stored within the draggable instance, but I'm always returned undefined. Here's a simplified version of my code: var scrollbar = Draggable .create($scrollbar.grip, { type: 'x', bounds: $scrollbar.track, cursor: 'ew-resize', onDrag: scrollContent, onThrowUpdate: scrollContent }); This is where I'm getting lost. If I access scrollbar I can see some information stored, but not the three bits I need: max x min x current x (I can work all these values out myself, but as the work has already been done, and I just don't know how to access it, I'd rather not duplicate it and instead learn the right way.) $content .on('mousewheel', function(e){ $content[0].scrollLeft += e.deltaX; console.log(scrollbar.maxX); // This is undefined e.preventDefault(); }); Any ideas? Thanks, Will
  15. Hi, thank you team greensock for the terrific work you're doing! I'm a big fan of your engine and your support! In my project I'd like to go forth and back on the timeline of a movieclip (which has a bitmap on each frame) while scrolling with my mouse wheel. For that I am creating a frames-based tweenMax and adding it to an also frames-based timelineMax. Then I am using the "tweenTo" method to go forwards or backwards on the timelineMax according to the values I create while scrolling. Tweening forwards seems to work, but it wouldn't tween back when the value decreases again. I attached a demo file with a simple rectangle moving to the side, instead of the bitmaps, on each frame. As you might have noticed I am quite new to actionscript, so I am really happy if anyone would like to give me a hint. Greetings from Germany elsa DEMO.zip
  16. Ok I am using bootstrap 3, and the modal feature for my portfolio. I have it set up fine and everything works, but when I add my smooth scrolling javascript the mouse wheels scrolls in the background when you have the modal opened. I used this tutorial. Which helped me get smooth scrolling working with TweenMax and ScrollToPlugin. Here is my js for the smooth scrolling: $(function(){ var $window = $(window); var scrollTime = 1.2; var scrollDistance = 170; $window.on("mousewheel DOMMouseScroll", function(event){ event.preventDefault(); var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta*scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill:true }, ease: Power1.easeOut, overwrite: 5 }); }); }); You can see my site without the above javascript here: Correct modal scrolling With the above javascript: Error modal scrolling jsfiddle, for some reason the remote content does not display in the modal (on localhost as well) so you cant see it scroll, but you can play with the js here. I attempted to make a jsfiddle but the way I am displaying the contents in the modal doesn't work in jsfiddle for some reason (this was mentioned after I did some research) anyway just scroll to the 3rd section (portfolio) and click an image to see what I am talking about. My modal code is just the stock bootstrap moal and I also tried this with bootbox.js and the same issue happened, so I don't think that is the issue. I have been trying to figure this out for a week now with no success if someone could take a look would be greatly appreciated.
  17. I'm trying to build a site that has a few requirements which include dragging 'cards' vertically and also scrolling them horizontally. Please see here: http://codepen.io/markmacumber/pen/Dlmzn The demo works by adding cards to a bottom aligned panel, that gradually push them out of screen to the right (this site will work on mobile and desktop browsers), I had to use css tables to get it to work with bottom alignment since my width/height variables are very random (since it will be seen on mobile devices of all shapes and sizes) and I cannot hard code div positions using absolute values. As you can see from the demo, this mostly works. I just need to be able to enable horizontal scrolling when the elements get too far outside the viewport. As you can see by the demo, I have tried to create a draggable element, but it screws up the layout... scroller = new Draggable(".cardCollection", { type: "scrollLeft", edgeResistance: 0.75 }); Can anyone please help me get this to work? I simpy want to be able to freely scroll the cards horizontally without sacrificing the layout. Perhaps I have fundamentally setup the page wrong? Thanks for any help you can give
  18. I am getting this weird error trying to use BlitMask when debugging on my android device: Error #2030: End of file was encountered. And it is coming from this part of the BlitMask code, on TOUCH_BEGIN event (when i put my finger down on the BlitMasked object): /** @private **/ protected function _mouseEventPassthrough(event:Event):void { if (this.mouseEnabled && (!_bitmapMode || (event is MouseEvent && this.hitTestPoint(MouseEvent(event).stageX, MouseEvent(event).stageY, false)))) { dispatchEvent(event); } } When debugging in emulator, the error does not happen, only when debugging on device. Does anyone know how to fix this issue?
  19. I am using a jQuery Ui slider to control my animation, but when the animation is playing the slider handle is very jumpy, it seems to momentarily pause at the start of each animation. I have tried all kinds of things, from simplifying my timeline, removing delays, removing lables, changing easing, adding the jQuery Easing plugin, but nothing seems to work. So I am wondering if anyone has a solution for this, or can suggest an alternative. I have looked at other slider tools out there such as NoUiSlider, but I don't know how to set them up so that they can control the animation (and update with the animation). Or perhaps a way of doing this solely with Greensock. Here is my code: var tl = new TimelineMax({onUpdate:updateUI}) tl .fromTo("#route1", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .fromTo("#route2", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .fromTo("#route3", .8, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}) .staggerFrom([oh1, oh2, oh3, oh4, oh5], 1, {opacity:0}) .to({}, 5, {}) .set("#mainRoute", {visibility:"visible"}) .to("#route1a, #route1b", 0.5, {strokeWidth:"16", stroke:"#5dc3f0", ease:Power2.easeInOut}) .to("#route1-text", 0.5, {fill: "#5dc3f0", ease:Power2.easeInOut}, "-=0.9") .to("#route1a, #route1b", 0.5, {strokeWidth:"6", stroke:"#ffffff", ease:Power2.easeInOut}) .fromTo(alt, 0.5, {autoAlpha:1, ease:Expo.easeIn}, {autoAlpha:0, ease:Expo.easeIn}) .fromTo(main, 0.5, {autoAlpha:0, ease:Expo.easeIn}, {autoAlpha:1, ease:Power2.easeIn}, "-=1.0") .to({}, 5, {}) .to(".id1, .id1a, .id2a, .id4, .id4a, .id5a, .id6, .id6a, .id6b", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut}) .set("#rowLabel1, #rowLabel2, #rowLabel3", {visibility:"visible"}) .to(".label div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to({}, 5, {}) .add("row", "-=0.3") .to(".id4, .id4a", 0.3, {stroke:"#895881", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase4", {visibility:"visible"}) .to("#phase4 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#895881", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id5, .id5a", 0.3, {stroke:"#937963", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase5", {visibility:"visible"}) .to("#phase5 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#937963", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id6, .id6a, .id6b", 0.3, {stroke:"#B2D235", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase6", {visibility:"visible"}) .to("#phase6 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#B2D235", fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to({}, 5, {}) .to(".id1, .id1a", 0.3, {stroke:"#F8991D", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase1", {visibility:"visible"}) .to("#phase1 div", 0.7, {css:{backgroundColor: "#F8991D", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id2, .id2a", 0.3, {stroke:"#81D0D3", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase2", {visibility:"visible"}) .to("#phase2 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#81D0D3", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") .to(".id3, .id3a", 0.3, {stroke:"#D6562B", strokeWidth:"10", ease:Power4.easeInOut}) .set("#phase3", {visibility:"visible"}) .to("#phase3 div", 0.7, {autoAlpha:1, css:{backgroundColor: "#D6562B", opacity: 1, fontSize: 22}, ease:Power4.easeOut}, "-=0.3") var cloudsAnimation = new TimelineMax({repeat:50, repeatDelay:.5, yoyo:true}) cloudsAnimation.fromTo(allclouds, 120.2, {x: -900, y: -1200}, {x: 400, y: 1600}); function init() { TweenLite.set($(".label"), {visibility:"hidden"}); } init(); totalProgressSlider = $("#totalProgressSlider") .slider({ range: false, animate: true, min: 0, max: 100, step:.3, slide: function ( event, ui ) { tl.totalProgress( ui.value/100 ); var topValue = -((100-ui.value)*difference/100).animate(); } }); function updateUI() { totalProgressSlider.slider("value", tl.totalProgress() *100); } $("#totalProgressSlider, .ui-slider-handle").mousedown(function() { $('html, #totalProgressSlider, .ui-slider-handle').one("mouseup", function(e){ tl.resume(); }); }); rowBtn.click(function() { tl.tweenTo('row', {ease:Bounce.easeInOut}).timeScale(16); }); topsoilBtn.click(function() { tl.tweenTo('topsoil', {ease:Bounce.easeInOut}).timeScale(16); }); trenchingBtn.click(function() { tl.tweenTo('trenching', {ease:Bounce.easeInOut}).timeScale(16); }); CSSPlugin.defaultTransformPerspective = 600; TweenLite.set([main], {rotationX:0}); TweenLite.set("h2", {autoAlpha:0}); I found this example: http://codepen.io/rhernando/pen/Batoc but how to I get it to update with the timeline progress?
  20. Hi I've set up a class that uses the ThrowPropsPlugin - it accepts a movieclip for scrolling in an AIR iOS project. Currently I'm setting this class up as a new instance in every class I need scrolling in, but it seems wasteful. Is there a standard way to have one such scrolling class, that all your classes send movieclips to for scrolling? Is it a matter of having a var in a global model that all classes send movieclips to, and then that var dispatches the movieclip to the scrolling class? Or is a better way to create the class once, and inject it into the constructor of every class that needs scrolling? Cheers
  21. I am using copyPixels() to copy data from 12 large 3000x3600 bitmapData instances already loaded into memory. The data is being copied into a Bitmap which is the target for my BlitMask. I've tried all sorts of permutations of using bitmapData.dispose() but whatever I do everytime I use copyPixels on one of the instantiated images it adds about another 40Mb to my BlitMask (probably the size of the 8bit 3000x3600pixel image in cache) I try and force the garbage collection using System.pauseForGCIfCollectionImminent(0.01); but I only seem to increase the amount of memory being allocated. It is only when I dispose of the BlitMask that I can free up memory. Any ideas or should I try another approach? I have the feeling that because BlitMask caches the display object as a bitmapData object that it is also drawing in the cache created by the copyPixels() function. I am trying to make a music score scroller so I cannot interrupt the display of the image whilst the music is playing. Many Thanks
  22. Gidday Jack I'm using Flash Pro and AIR to create a native mobile app for iOS and Android, and have JUST realised that scrolling doesn't happen automatically - you have to program that little devil. What of your products would I need to do this? ThrowProps? And what else? Do you have any as3 coding examples that can get me up and running with vertically scrolling lists that contain text and images? Thanks for your time and help.
  23. Hello, I love your products and everything Greensock stands for. Your products are top-notch, and the customer service is as good as the Kinko's customer service is bad. GreenSock customer service is like "Bizzaro Kinko's Customer Service." In other works: GreenSock - "Totes Awesome Sauce" Kinko's - "The Hangover 2 & Indiana Jones 4, kind of awful" I am trying to come up with the most efficient and "zazzy-licious" way to put in the background of one of my website page, the scrolling code that you see on computer screens in the background of movies and tv shows. I'm not sure if I want just pure binary (1's and 0's) or letters and numbers. I figured that I would find about 500 ka-trillion Google results showing different ways of doing this in various languages, but alas, I didn't really find much of anything. I'm using the Greensock Javascript libraries (v.12) and the latest version of Raphael.Js. I don't really need anyone to show me how to do this, by providing a working example (at least, not yet). I'm really looking for a broad outline of the steps I would need to take to accomplish this task in the most code efficient and least taxing burden on the browser way possible. Any help would be greatly appreciated. Thanks, Sweet J
  24. I am creating an application that has a dynamic scrolling shape. The shape is two sine curves sitting one above the other, mirrored on on the x-axis, and filled in between. The amplitude and frequency will change based on variables. I am new to GreenSock and have been going through the tutorials. I understand that I will be making use of the BezierPlugin, but I am not sure what the process is for animating it. Does this involve simply changing the variables and redrawing to give the appearance of scrolling? There will be sprites moving moving with the y-value of the curves. This y-value will also be used to modulate the volume of a sound. In an email, Jake offered this advice: "it may be as simple as using a plain y tween and a Sine.easeInOut while animating the wave along the x axis." I have been playing around with the Plugin Explorer and I am not quite connecting this advice to implementation. Sorry for the noob questions. I am not looking for someone to do this for me, but to perhaps direct me towards the strategies/tutorials through which I can learn. Best, Matt
  25. Hello, i noticed that most people are talking about a vertical scrolling website with animations.( Like SuperScrollorama ). I need a Horizontal scrolling website, where animations take place while you scroll to the right at certain points. I can't figure out how to link the scrollbar position to a value i can use to trigger tweens.