Jump to content
GreenSock

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


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi, Since helping Stefdv in this topic i dug a little more into parallax and scroll controlled Tweens/Timelines, and i dedicated some time to create a tutorial and some code in order to help GSAP JS users to create some apps and web sites using this technique. Is not a lights-out-blow-your-mind type of tutorial, but i just was hoping to help some other users who might want to apply this into their creations. Here you can find the tutorial, as well as the source code and a couple of examples, since i don't have a blog of my own, i'll take the liberty to point comments here, unless the staff s
  2. 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
  3. Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e",
  4. I have a movie clip that I want to drag "scroll left" in 650 pixel increments. I have a movie clip (mc1) that is 650x650px on the stage (embedded within this clip is a symbol (mc2) that is 3250pxs x 650pxs (divided into 5 images) I want to drag through mc1 in 5 swipes revealing each image (650x650) on mc2 //movie clip 1 Draggable.create(mc1, {type:"scrollLeft", edgeResistance:0.5, throwProps:true}); Could you help me with the code that I need to initiate this please, I just need a push in the right direction and away I'll go until the next hurdle. Learning he
  5. I am doing my first GSAP animation (yay for me)! The div containing the animation is below the screen when the page loads -- both on desktop and mobile. I don't want it to begin animation until the user scrolls to it. I want to verify that, in order to do this, I need to do something like the following: myTimeline.to('body', .5, {scrollTo:{y:250}}); with "250" being the distance of the div from the top of the page. Is this correct?
  6. Hi everyone, hope you are fine ! I come today with a new question about tweenmax. I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item. Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function : TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)}); Sooo I have 20 images in my sprite for a width of 7960px. The thing is, when I am rotating while scrolling, I can't do something like : x: "+= scrolling value". If
  7. Hello, I am trying to build a UI where two arrows – up and down – control the scroll position. The scroll element is a Draggable. var scroller = $('.scroller.draggable'); Draggable.create(scroller, { type:"scrollTop", edgeResistance:0.75, throwProps:true, onDragStart: function() { Draggable.get(menu).disable(); }, onDragEnd: function() { Draggable.get(menu).enable(); } }); $('.icon-arrow-down').on('click', function(event){ TweenLite.to(scroller, 1, {scrollTo:{y:$scope.yStart}, ease:Power2.easeO
  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 /
  9. 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.
  10. 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
  11. Is it possible to have natively vertical scroll elements within a horizontal Draggable element?
  12. Hello i wanna ask for the more experienced userds of GSAP JS: How can i make a window scrollTo plugin go to 100% bottom of the webpage? on jquery i set it as "max", but i wan´t to use only GSAP for animations and jquery for selector and general pourposes tnx for your time.
  13. Does GSAP have built in scroll functionality to trigger animations or do I need to use another library such as ScrollMagic or Skrollr?
  14. 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.
  15. 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")
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. Hi there, I have seen many sites that let you smoothly scroll a webpage up and down when you click on navigation buttons. I was wondering how I would go about this with the new Greensock JS. I have had no luck, and also all the examples I have looked at scroll to the location of a div. Is there no way I can just set a value or height property instead. Like scrollTo 1000px. I already have my function set up so I just need the animate scroll code. $('#box1').click(function(){ // Code goes here }) Thanks for your help Will P.s. Sorry I just moved this post to
  22. 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?
  23. 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="
  24. 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 =
  25. 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>
×