Jump to content

Search the Community

Showing results for tags 'slider'.

  • 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


  • FAQ


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


  • ScrollTrigger Demos


  • CodePen Challenges

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. i'm trying to use the window vertical scrollbar of the browser as slider of an istance of timelineMax. i'm also using the plugin scrollToPlugin. all seems working, with the not negligible detail that the timeline.progress is not the same of the scrolling percentage. Both, timeline progress and scrolling start from 0 and end to 1, but in all other points are differents. so, if i try to move the verical scrollbar (as timeline slider) and then i set the timeline.progress with the scrolling percentage, the scrollbar (and the page) move immediatily to another position, very different position. I prepared a simple page at this address www.attivitacollaterali.it/testArea/scrollTimeline.html (all the scripts are in the head - do no use the mouse wheel when scrolling) Maybe all the world knows "why" this strange behavior, excpet me. Thank you.
  2. Hi, after having followed the forum, checking many examples and watching some tutorials, I have started playing with GSAP and so far it has been really fun. Now I have used Jonathan's example of the slider with controls (this one: https://codepen.io/jonathan/pen/qqmBjQ ). It worked quite well, but now I am stuck on two things. So I thought now would be a good opportunity to start posting in the forum Is it possible to have autoplay just run once and stop at the last frame? And how could I add digits that let me navigate to each slide and show which slide is active? Here is my example: https://codepen.io/lukenicktap/pen/peLreK For the autoplay I tried: function loopCheck() { $currentSlide++; if ($currentSlide < 2) { TweenLite.killDelayedCallsTo(play); } But this does nothing. If anyone could point me in the right direction, I would really appreciate it. Cheers, Lucas
  3. hello! Just getting starting with JS and GSAP, had a question about what I'm trying to achieve: There's a GSAP 360 slider of a image sprite created here: http://codepen.io/jamiejefferson/pen/IeLGB if you swipe / mouse drag you cursor over the sprite, it animates through the sprite creating the 360 view. I wanted to add a input slider such that the input slider could also be dragged / swiped on as an additional way of advancing through the sprite sequence. The final sequence i'm trying to get to work with the swiping + input slider is something like this : https://codyhouse.co/demo/360-degrees-product-viewer/index.html Any way to append a HTML slider to that GSAP 360 mentioned earlier? Sorry about the noob question, any inputs would be super helpful! Thanks!
  4. 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
  5. plug-in out there? I much prefer this to a jQuery plug-in if such a thing exists.
  6. Hey, I wanted to make a slider, each slide should begin as animation example from codepen. Unfortunately, I have a problem with obtaining such an effect. Slider without navigation or dots, just interval every few seconds. The first slide should also appear with animation. I feel that the solution is very easy, and I sit on it far too long to find them. CodePen: http://codepen.io/anon/pen/mOmbza
  7. Help, help, help.... I'm new to GSAP, i need to create a one page website whereby the main section is an animated carousel via slider that look like this: http://assets.wwf.org.uk/custom/foodstory/ ​its a carousel with slider bar, that user can drag the slider to view the animation. the slider some more is need design as per example. OMG but i really no idea how/where to start with it. can i have an example to refer with? ( Please & TQVM T.T
  8. http://allthetime.co.nf/GSAPslider/ I'm developing a GSAP slider and it works well now with keyboard and click control. I want to be able to animate between states upon receiving a click/key event. So, when it's on slide 1 and I click the button for slide 4 instead of going to slide 4 instantly, the animation scrolls quickly across slide 2 and 3 and then lands at 4. Any ideas?
  9. I'm very new to GSAP This is my first time messing about with it and it's very cool. So I haven't attempted the following yet because I'm not sure if its just too bonkers and I'm not sure where to start. Is it possible to stick a full section slider (also made with GSAP) http://codepen.io/MAW/pen/yYradO/ into say a middle section of a one page site (that I have been messing about with here) http://codepen.io/heavymessing/pen/eZovmP. So the user would scroll or click to a section with slides and click through them left to right, or just to the right. Ultimately I'd like to do something like the fullpage.js plugin but without as much scroll jacking and nicer animated effects. Thanks
  10. Hello, I'm new to GSAP and just getting to grips with it. I'm using a modified codepen post as a guideline for making a slider. I want the slider to have specific effects and feel like I'm almost there. I was hoping that someone here can help me get over the finish line. http://codepen.io/anon/pen/MyKVJW As you can see from the codepen link, My slider contains 4 slides, within each slide are two darkly colored blocks. What I'm trying to achieve is when the slider changes, the left hand block slides in from the top as the right block slide up from the bottom. It seems like the right hand block is doing this but the left hand block is not. There seems to be a delay in the animation of the left block The slides use the following timeline var tlSlideOut = new TimelineLite() tlSlideOut.fromTo($prevSlide, 2, {top: "0%"}, {top: "100%"}) .add(TweenMax.fromTo($prevSlideSmBlock, 2, {top:"0%"}, {top:"100%"}), 0) .add(TweenMax.fromTo($prevSlideLgBlock, 2, {top:"0%"}, {top:"-200%"}), 0) var tlSlideIn = new TimelineLite() tlSlideIn.fromTo($currentSlide, 2, {top: "-100%"}, {top: "0%"}) .add(TweenMax.fromTo($currentSlideSmBlock, 2, {top:"-100%"}, {top:"0%"}), 0) .add(TweenMax.fromTo($currentSlideLgBlock, 2, {top:"200%"}, {top:"0%"}), 0) Is anybody able to offer me some advice on what maybe missing with this....any help would be much appreciated. Many Thanks Adam
  11. HI all, Here is the free lightweight slider that I made for GSAP Timeline: https://github.com/igord/gsap-timeline-slider There are no external dependencies and you can change targeted timeline on the fly. I use it at http://runbanner.com/demos/ to allow visitors to preview demo banners. Check it out.
  12. Hi there I'm working through some of the concepts of GreenSock and was hoping someone could point out to me the issue with this animation. As you can see in the codepen the slider measuring the duration of the entire timeline is only about 80% through when it appears all my animations are finished. As a result, when I got to reverse the animation, there is a considerable delay before an animation kicks in. Thanks DB
  13. Hi All, Hopefully someone can point me in the right direction. I'm sure there's a fairly simple solution but i've yet to find an example (probably too remedial!). Situation: I have an infographic where animated elements are controlled by a timeline slider. That part works fine. What I need to do now is have two text items update using the same slider. For example, first item has a minimum text value of 47 (always whole integers), a maximum of 91 (range?) - so when the slider handle is all the way to the left the html text reads 47, all the way to the right reads 91 and movement of the handle in-between the two extents +/- the text value. The second item is exactly the same however uses a different range (0.9M > 2.3M) The CodePen (linked) is similar to what I want however the value it is based upon time rather than set min/max values. Hope that makes sense. Happy to cobble together a more relevant CodePen if needed. Thanks in advance for any help / pointers / codepen examples! tome
  14. Hello, I would like to control a video frame by frame via a slider. As It is a short video, my idea was to embed it in a sprite sheet and then move it along a slider. My Sprite sheet is 11*10 and the size of each 300x250. I found this great CodePen: http://codepen.io/astrogastro/pen/Cvidl Which basically do what I am looking for (just need to add a slider rather than a mouse drag and it is all good) However, The sprite sheet used was on 1 line only and I cannot do that as I would end up with a 31000px jpeg, which I guess is not good. How can I modify the code pen to force the sprite to go to the line every 10*300px? Sorry if it is a little bit confusing, I am not familiar with JS, I just want to show the front end, the type of animation I am looking for. Cheers Nico
  15. Hi I am totally new to GASP which when I stumbled upon it today just blew my mind. One thing I have probably yet to see (which probably exists) is how one would add controlls to skip forward or back between sliders(or animation set). Please point me to any resources that shows you how to implement such features. Thanks in advanced.
  16. Hello All, In my attached file, I have tried to modify a simple slider as per my requirement. But, when I slide the slider, the target image gets displayed only after slide animation is finished. Can someone help? Also on mobile, it is sliding very slowly. Please help. I have attached my file for your reference. index.html
  17. Hi all, I have to build a responsive full width (not height) tabbed slider with GSAP. Anyone has tried this kind of project? Any ideas will be appreciated. Thanks! neuhaus3000
  18. Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!
  19. I'm developing a slider with parallax effect, using TimelineMax. And it's joy ride with GSAP ! But, my intention was to deploy using node-webkit, and I'm getting quite inconsistent performance results. In the codepen I show just the basics, next and previous buttons and you should be able to swipe left and right. (Have to add much more, later, more content on each slide, probably dragging (with Draggable) and make it an infinite slider thing...) As for now, sometimes it just works beautifully, others, it's just a bit jerky, mostly at animations end, when slowing down. I've tried different easings, tried to thin the KBs of images, force3D: true, etc... Only thing is I get a better result, but still not allways smooth, if just open the page in chrome, instead of using node-webkit. I'm about to go back to Flash CC, AIR and Actionscript, (the animation code would virtually be the same) but I'd really like to do this in javascript and HTML5. wondering wether I'm getting hardware acceleration I tried chrome://gpu inside node-webkit, I get the same as just in chrome: Graphics Feature Status Canvas: Hardware accelerated Flash: Hardware accelerated Flash Stage3D: Hardware accelerated Flash Stage3D Baseline profile: Hardware accelerated Compositing: Hardware accelerated Rasterization: Software only, hardware acceleration unavailable Threaded Rasterization: Disabled Video Decode: Software only, hardware acceleration unavailable Video Encode: Hardware accelerated WebGL: Hardware accelerated Driver Bug Workaroundsclear_uniforms_before_first_program_use exit_on_context_lost texsubimage2d_faster_than_teximage2d Problems Detected Accelerated video decode interferes with GPU sandbox on certain AMD drivers: 298968 Disabled Features: accelerated_video_decode Additional GPU rasterization whitelist for field trial: 380694 Disabled Features: gpu_rasterization_field_trial Whitelist for using GPU rasterization for a broader set of content: 399306 Disabled Features: gpu_rasterization_expanded_heuristics GPU rasterization is blacklisted on non-Android: 362779 Disabled Features: gpu_rasterization Some drivers are unable to reset the D3D device in the GPU process sandbox Applied Workarounds: exit_on_context_lost TexSubImage2D() is faster for full uploads on ANGLE Applied Workarounds: texsubimage2d_faster_than_teximage2d Clear uniforms before first program use on all platforms: 124764, 349137 Applied Workarounds: clear_uniforms_before_first_program_use Threaded rasterization has not been enabled or is not supported by the current system. Disabled Features: threaded_rasterization It's a 16 GB RAM machine with a GTX 770 card, but the inconsistency has appeared almost identical on other machines with less resources, so I'm guessing it might not be a hardware issue ? Any ideas ?
  20. New to gsap and js, trying to implement delayedCall in my slider like in the Bassta tutorial (http://bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/). I am running into difficulty trying to killTweento when clicking on 'prev' or 'next'. clearTimout seems to work from the original code (http://tympanus.net/codrops/2013/04/17/background-slideshow/); however, I would like to utilize gsap for this, so I can use sizzle or some other selector engine, instead of full-blown jquery. (My attempt at killTweenTo is commented out in the code) http://jsfiddle.net/gregorygarden/q68723x4/
  21. I have created an image slider for mobile devices using draggable and throwprops plugins. i want to limit the dragging limit upto just one image per drag. I don't want to make it too much free flow resulting in sliding through many images.
  22. Let's say I have a image slider that I want it to scroll when I click on a button. But I do not want it to be the same order every time I click on the image. If the image width is about 100px, can blitMask just cut out 100px from it and random rearrange it when it scrolls? And if the image have an event I want to trigger, I need to remove the 'disableBitmapMode' when the animation stop. But when I disable it, the 'copied' image will be removed making the slider be out of the screen, or in a different position when it stopped. Or a better way to do it would be using enter Frame?
  23. 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?
  24. jeff4gee

    GSJS Slider

    I need to create two elements and I am not sure where to start. First I need to create a slider that can control a TimelineLite animation. Second I need to create a custom scroller for a div box with its content being text. Any help on these two items will be greatly appreciated. Thanks for your help!