Jump to content

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

Search the Community

Showing results for tags 'scroll'.

  • 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. Hi, Can I use greensock for continuous scroll upon keypress + hold Let say I want a page to scroll continuously arrow key down is pressed and stop when release I also checked the doc and faq section and I can't find instruction how to start using gsap. Do you have documentation on getting started? Thanks
  2. Does GSAP have built in scroll functionality to trigger animations or do I need to use another library such as ScrollMagic or Skrollr?
  3. I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.
  4. Is it possible to have natively vertical scroll elements within a horizontal Draggable element?
  5. Hey guys, so basicly i want to trigger an animation when the visitor scrolls down to the place the animation is located. how would i go about doing it? this is the code i want to trigger: <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function() { var sponsor = document.getElementById("sponsor"), funktioner = document.getElementById("funktioner"), patenter = document.getElementById("pa
  6. I'm trying to set up my page such that my document's scroll behaves exactly like a 'scroll' draggable. What I'm really after is document scrolling that snaps to certain areas of the page, but with all the silky physics of Draggable — I basically want my scroll events to act just as if they were throws. For example, look at GreenSock's own "scrolly knob" demo. When the scroll area is dragged, or when the knob is turned, the scroll velocity is animated smoothly to a stop at one of the snap points. But when the content is manually scrolled by the user, there's no inertia or snapping. What I
  7. Hello, i just started using GreenSock and from the examples I'm very impressed Now i try to implement a prototype and have run into a problem. I have a div consisting of several divs laid out horizontally. This div is wider than the screen and i want it to move from left to right and back again. This i got to work. If the user starts scrolling manually, the animation should stop (works too) and the user should be able to scroll the div normally. Here is where i ran into a problem. Let's say the div scrolls to the left, then everything that goes offscreen is lost to the manual scroll
  8. Hello, I can not figure out what would be the best way to accomplish this: I would liek to simulate a continous text scroll on mobile device. I made a PNG that has some horizontal lines which look like text paragraphs. I would like to move this PNG from bottom to top, simulating a scroll on mobile device. The animation runs in loop and I get an empty screen between iterations. I would like the same PNG to start moving into screen while the previous moves out so it looks like a continous scroll. What is the best way to animate this? Shold I use the same image twice on two separate t
  9. Hey there everyone in the community, I am new here and firstly I gotta say to the GSAP Dev's...GREAT JOB, amazing plugin. But, even with its ease of use, I found it hard to aquire my desired effect. What I iam to accomplish, is to initiate a text animation I have used from your examples in the ZIP file, upon scrolling over the desired DIV. As it sits, GSAP uses: $(window).load(function() { to initiate the animations declared in the JS. Since I do not ant the animation to instantly start on page load, and I want it to start once scrolled over, this does not work for me. Now, I have tried the
  10. I am trying to replace a jQuery plugin called "li-scroller" which combines the <li> tags from an unstructured list and scrolls the items inside a div one after another from left to right indefinately. Unfortunately the plugin distorts the letters slightly as the speed increases and I was hoping that Greensock would produce a more fluid result. Since I am new to Greensock, I am not sure which approach to take to accomplish this. Is Split Text necessary or would a method using Split Text produce smoother results than the alternative? Any guidance or examples to help get me started i
  11. GreenSock


    #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color
  12. ThrowProps and Blitmask really do work well together for scrolling, but most of my views have too much interactivity for Blitmask to be useful. The BlitMask would need to be updated with a forced recapture of the Blitmask each time any change is made to the view, and this is taking about 500ms, which interferes with a smooth scroll. Is there an example for using ThrowProps in a Scroller without using BlitMask?
  13. Hello people! I have a <nav> with absolute position and inside of it some links <a>. After some scrolling I change its position to fixed to stick it at the top. (using stickOnScroll plugin) At the beginning I bind a mouseover to tween color of the text in <a> and works fine, but when I change it to fixed position the tween disappear. Thank you so much! <nav class="full-width" id="home_menu"> <ul class="container"> <li><a href="javascrip:void(0)">slim center</a></li> <li><a href="javascrip:void(0)" id="
  14. Is there a built in option to auto-scroll the container of a draggable element when the draggable is moved beyond the container? I am currently hooking up to the onDrag event and doing thing based on Y pointer. I kinda get the result I want. But still curious if there was a default option provided or anyone else has done it better.
  15. GreenSock


    Allows GSAP to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); Or
  16. Hi there, i'm trying to do one of those animations on the header as you scroll down. I want it to be a very nice and smooth transition. I'm trying to do in such a way that i could easily re-use the code in different projects, just changing the timeline animation. Basically, when you scroll down 50px, an animation would play instantly, at the moment i'm adding a class "sticky" to my header, so i can control the position thru css, but i can't get the animation working. I'm sure there's something missing on my code, just can't figure out what it is. $(function() { var header =
  17. Hi all, this is my first post on this forum. I am working on a mobile calendar which requires to manage a large horizontal drag area combined to a important vertical scroll for a mobile web application (in webkit browser : Safari / Chrome) You will find a mockup attached to this post in order to understand what i am trying to do. This calendar has : - on left side : a vertical list of people (called "fixedView") - on right side : a vertical list of blocks which has a horizontal scrollview (using Draggable) in order to swich days by using drag gesture on axis : x (called "InnerView")
  18. Is it possible to use a Superscrollorama object to control multiple timelines? My code: http://codepen.io/vincentccw/pen/AwIbx/?editors=111 RIght now the box1 class is animating as intended, but I'm only allowed to animate one box at a time, if I add another timeline below it, the whole animation stop working. Is there a better way to add multiple animation timelines or do I need to create multiple scrollorama object to hold individual timeline>
  19. Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/