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. Hello, I'm using GSAP to build scroll controlled animation using a timeline. 1) I have a container with a list of images, one next to the other, and when I scroll normally (so, vertically), I make the images slide to the left. 2) Sometimes I need to stop the sliding and animate something else (make something to appear and so on), before proceeding again with the sliding. This needs to happen at a specific moment, or position: usually I want one of these images to stop precisely in the middle. 3) the whole thing needs to be responsive I managed to do almost everything, but the point
  2. Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just o
  3. Greetings everyone. I'm attempting to highlight items in a list while the list it is being scrolled by the browsers scrollbar using ScrollMagic and GSAP. I sort of got them working individually but am unable to combine the two animations. I've setup a code pen in hopes that someone might give me a little direction. Thanks. Note: Ended up using gradient overlay for similar effect. Sorry for including ScrollMagic in my post. Any future posts will be in regards to GSAP specifically.
  4. Hello ! Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic.js my goal is to achieve smooth scroll to the bottom of the footer (that works) http://codepen.io/Dikus/pen/jAjoqN and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport. Problems I encountered: Scrolling works only once and only in one direction - usually ScrollMagic reverses all animations etc.so after scrolling back up from the bottom of the footer It would be lovely to achieve smooth scrolling in both sides and alway
  5. Hi, I created little AS3 aplication for simulate LED display. User can modyfy xml file to set some parameters like: font size and style, textfield position and size. I do animation by this code: var bannerW1: Number = txt_1.width var bannerH1: Number = txt_1.height; var banner1: BlitMask = new BlitMask(txt_1, txt_1.x, txt_1.y, bannerW1, bannerH1, true, true, 0x00DDDD00, true); banner1.bitmapMode = true; var tween1: TweenMax = new TweenMax(txt_1, 9, { x: -txt_1.width, repeat: -1, ease: Linear.easeNone }); var bannerW2: Number = txt_2.width var bannerH2: Number = txt_2.heigh
  6. Hello, I know a similar question has been asked before, but I think my case is a bit different and I couldn't find a solution. In the pen I posted I have a very long image which I want to scroll from the beginning to its end, which mean that it should stop when its right edge reaches the right side of the window. In order to do this I calculate the distance, so the amount of x translation, as the difference between the image width and the window width. I know about the xPercent property, but I guess that it's not useful in this case, because I have no way of using it account also for the
  7. I'm using Fullpage.js and I have animated the elements of each section to fade in. The animations work awesomely well but the ones from the lower sections run offscreen and when the user scrolls to the section the elements are static. I need the animations of a specific section to commence when the user scrolls to that section. Any way i can achieve this? Thanks in advance!
  8. Hai What i am trying to achieve is to infinite loop the scroll animation. I tried with some basic looping. But is it the right way of doing this. Also it is having responsive issues and there is a delay when after every slide starting. I tried as much as i can to make it working.
  9. Hi Guys, I'm creating a website where I have to animate (approx. 50) svg lines from bottom to top of the screen in different tempi. I made it with staggerFromTo, but then I can't randomnize the the speed of each lines (se the attached image). Now I'm trying to create this with a for loop where i add tweens to a timelineMax, but I cant get it to work var thinLineArr = []; var num = Math.ceil(ww/lineThickness); transitioncontainer.css({'height':wh}); // Adding all the lines to the scene var svg = '<svg id="transition-top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg"&
  10. I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?
  11. Hi all. Complete newbie to GSAP here. i'm looking forward to getting to grips with it to add some animation to a site I'm currently redesigning. At the minute though there's one legacy script on the site, which relies on jQuery. It's just a wee utility script which will animate scrolling to any element on a page with an ID attribute set. [see the Codepen] I want to "translate" this to GSAP instead, as it seems daft loading jQuery as well as GSAP, just for this one feature. However my JavaScript Fu is a bit rusty and I'm not having much luck working out how to GSAP-ise my selector.
  12. I am working on a parallax page, but i have problems moving my elements while scrolling without the choppy behavior. Something tells me that the combination of top/bottom and translate is the root cause, but i am not sure how i solve my task without top/bottom? I am trying to create a behavior where all the elements are almost on top of each other when i have almost reached #section2. How can i avoid this choppy behavior? Its very important that the elements are placed as they are, but i think my usage of top and xPercent is causing performance issues
  13. Hi, I've created a timeline and tweento buttons that are working as I have hoped. What I also need to happen isa scroll to trigger the same as the click function. For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. $("#two2").click(function(){ tl1.tweenTo('slide2'); }); Any pointers much appreciated. Thanks!
  14. Hello, What I am trying to do is combine the DrawSVG plugin with this awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar. I was also thinking there might be
  15. Hi, I am using a combination of ScrollMagic and GSAP to achieve a scroll-based (100% height/duration) animation at the top of my page. Everything works great in Safari/Chrome/Firefox, but when I test on mobile (iOS) the animation is all screwy. Seems to be an issue with overflow and/or viewport height, but I cannot seems to find a fix. Apologies in advance if this is an issue related to ScrollMagic (not GSAP), as I am still getting acquainted with both. Live site can be found here: http://aigasd.github.io
  16. I'm trying to recreate the function Scroll (Drag & FLick) from GreenSock (https://greensock.com/draggable ) on my website to make an image navigation throught a small city. SO I set the background-image on the div #scroller but it doesn't seems to be working as it should be, the image is not dragging at all So here's my jsfiddle http://jsfiddle.net/8ekpmpxx/1/ And hope someone could give me a light on this, thanks in advance
  17. 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",
  18. 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.
  19. 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
  20. 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?
  21. 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
  22. I'm trying to repeatedly scroll items in a list. I have a container with 3 images all with float: left set on them. When the first element is animated, the second one stays in place, instead of moving. Relevant code here, complete example at: http://jsbin.com/tivupa/2/edit?html,output .slideshow { display: block; width:7300px; position: absolute; top: 200px; left: 0px; } .slideshow img { float:left;margin:0;padding:0; } <container> <div class="slideshow"> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" al
  23. 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
  24. 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 /