Jump to content

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

Search the Community

Showing results for tags 'scrolling'.

More search options

  • 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



Found 38 results

  1. Hi! I've come across this especially unique combination of effects, and have been left in both awe and pain trying to figure out how to replicate such a complex stringes of elements. I've already done some research to figure out the basics of its mechanics, but as someone new to coding, my understanding is limited still. The site and effects in question are: Home Page - https://panamaera.fr/ 404 Page - https://panamaera.fr/404 About Page - https://panamaera.fr/about There seem to be two effects at play. A Canvas over images/videos, that generates a smokey distortion effect, rendering the smoke depending on what visual is underneath the canvas. The Canvas remains active between pages, registering a page change just like a visual change in a video, creating the fading smoke distortion transition between pages and their visual material. A mouse hover effect with smoke & distortion. The smoke is moving in synch with the Canvas' smoke, while the pointer clears the Canvas from over the image and lightens it a bit. On here https://www.awwwards.com/sites/panamaera, the site is tagged as having WebGL, GSAP Animation, ReactJS, GLSL used on it, however I'm not looking to learn everything about these tools, only whats specifically needed to recreate these effects. As I am looking to learn to recreate this effect, my questions are: What coding methods and techniques are they based on (within the world of the above mentioned tools)? What are the exact & relevant coding topics I should look for education on? How would you go about recreating these effects?
  2. Hello everyone! I've been racking my brain trying to think of The Right Way™ to do this. In the codepen demo I've been working on, I've worked out how to have an inital timeline, which then moves to the main timeline. The total duration of the timeline is linked to the total pageHeight, and progress is tied to the scroll event. The main timeline currently repeats infinitely as this needs to continue to animate for an unspecificed amount of time (This could vary depending on the page's total scrollHeight). Ideally I would like to have another timeline play at the very end of the duration which resets the 'FOUNDER' text back to the initially displayed state just before the end of the total duration, but I'm pretty stumped on how I should approach this with GSAP given I don't have a fixed distance to scroll. Does anyone have any ideas or methods? Is there a better method I should be using rather than repeat -1 in this instance? Thank you for any help or suggestions in the right direction! Andrew
  3. Hi GSAPers, I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head. I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively?
  4. Hi, I have a draggable horizontal carousel, but on mobile it prevents the vertical scroll of the webpage. How do I stop it from only allowing horizontal scroll across the slider? When a user drags their screen to move down the page if they have the slider section on their screen it won't allow them to get further down the website? - This seems like a silly issue so I am aware I am probably missing something simple, any help is appreciated. Thanks Kieran
  5. Hello, I have a problem with my first ScrollMagic Animation. I would like to fade in the boxes on scrolling down. This works fine except for the first time. When I scroll down for the first time the values like opacity don't "tween", they switch directly from 0 to 1. After that I can scroll up- and down with a working animation. It's like some kind of setting is missing. Do you have an idea what exactly is missing? This is my codepen: Thanks, Becca
  6. Hi All, Hoping someone can help with this issue I'm facing. I am controlling the TimelineMax progress based on scroll position. Pretty simple, however I noticed that my tweens are running for the entire length of the page. This is because I am currently calculating the percentage with age-old `window.scrollY / (document.body.clientHeight - window.innerHeight)` What I need help with, is figuring out how to start & finish the animation when the `.tweener` div in my Codepen example enters the viewport, to when it reaches the bottom of the viewport. I also don't want to use the behemoth that is ScrollMagic Any help would be greatly appreciated! Cheers
  7. Hi all, I'm attempting to create a vertical draggable with for a "fashionable" effect, an everything works as expected on Android, but not on iOS. On Android, the page doesn't scroll when I swipe up on the draggable, and scrolls only when I tap outside of it. On iOS, bot IPhone and iPad, looks like the page has a priority on the draggable (or the swipe event "bubbles" from the draggable), thus the draggable stays almost in the same position, and the page scrolls. In this pen, the gray draggable scrolls into the black box, and overflows it for a maximum of half of the draggable height. How can I get the same behavior on the platforms? Thanks in advance! (It's better to test the pen in full page mode: https://codepen.io/massic80/full/qYbpOL)
  8. 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
  9. Guest

    ScrollMagic - TweenMax vs Timeline

    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
  10. 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?
  11. 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.
  12. 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
  13. 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
  14. 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
  15. 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.
  16. 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?
  17. 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
  18. 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
  19. 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
  20. 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(;
  21. 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.
  22. 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
  23. 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> ....
  24. 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.
  25. Does GSAP have built in scroll functionality to trigger animations or do I need to use another library such as ScrollMagic or Skrollr?