Search the Community

Hello! It's my first time useing the tick event provided by greensock, and i am having trouble to figure it out what i am missing in my code, because there are signs that something is not right. Well the concept is that there is a horizontal scrolling area (with iscroll.js), and during scrolling the upcomming element should scale up / animate to it's full size. I use the TweenMax.ticker.addEventListener('tick', myfunction) on line 312 to call the function which detects which box should be animated. On every tick event the selected box(es) properties get updated with TweenMax.set. The problem is that the performance is not right, there is a flickering during scrolling and in IE11 it is even worse (very jumpy). I have put together a fiddle to see it in action: https://jsfiddle.net/LaszloOveges/yykc0356/ Anyone has an idea what is wrong with this code? I would really appreciate any comment. Cheers, Laszlo

I'm new to both Greensock and ScrollMagic and I'm running up against a wall. I'm trying to understand how to tween/animate some aspects of my site ie., transitions between frames but still maintain some of the control by having items react when the user scrolls. Right now my project only reacts the scroll movement but I'd like to be able to trigger section to tween/animate as it gives a nicer/non choppy display. Any and all feedback/help would be greatly welcomed so that I can resolve this dilemma. Thank You

I'm trying to mimic this scroll effect that I'm seeing on this site: https://www.beoplay.com/products/beoplayh8 It's the portion where the left is unveiled as you scroll. Having a tough time with how the frame work of this should be. There is also a "tolerance" feature where if you scroll past a certain point it'll snap to the image that is showing as the majority of the page. I'm using scroll magic and greensock but having a tough time because this concept is new to me. Any ideas?

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.

Hi, I am new to GSAP, I am facing a one problem when I click on left hand navigation to go on specific ID the navigation does not highlight, Interestingly it highlight one before navigation link. You can see the demo on this link and it make sense to you. I want to scroll just before blue border line with little bit margin from top. I know it is the scroll Margin from TOP but I could not figure out how to achieve this. it's a big code that's why I could not paste on Codepen so that's why I am providing the link. http://magtechpro.work/alphabetic/ any help will be highly appreciate. Thanks Folks

Hello , I managed to find solution to drag content of TextBox up and down but its not stable . once you hold down the scroll-bar and start dragging its working but if u leave the scroll and try to do it again its not working Can i use GreenScok draggable to do that professionally ? I really feel sad i bought green-sock membership thinking that draggable will work fine but its been few days no success this is the example code i hope someone with experiance can guide me how to drag content inside Movie Clip at the stage using same concept " am using Adobe animate cc Canvas Project is attached . --- tl = this; createjs.Touch.enable(tl); linesOfTextF(200); function linesOfTextF(n){ for(var i=0;i<n;i++){ tl.TextBox.text += 'this is line '+i+'\n'; } } paramF(0, 48, 146-20 , 48+146-tl.TextBox.getBounds().height); function paramF(x1,y1,x2,y2){ tl.m = (y1-y2)/(x1-x2); tl.b = y1-tl.m*x1; } //this tl.sb.thumb.addEventListener('mousedown',startdragF); function startdragF(e){ stage.addEventListener('stagemousemove',dragF); stage.addEventListener('stagemouseup',stopdragF); } function stopdragF(e){ stage.removeEventListener('stagemousemove',dragF); } function dragF(e){ if(e.stageY>=48 && e.stageY<=48+146-20){ tl.sb.thumb.y=Math.floor(e.stageY-tl.sb.y); tl.TextBox.y = Math.floor(tl.m*tl.sb.thumb.y+tl.; } } --- Thanks test2.zip

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

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.

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?

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

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

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

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(;

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.

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

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> ....

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.

Does GSAP have built in scroll functionality to trigger animations or do I need to use another library such as ScrollMagic or Skrollr?

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

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

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

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.

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

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?

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