Search the Community
Showing results for tags 'slider'.
Found 85 results
-
Hi guys, I'm practicing slider logic at the moment & seem to be stuck scaling the coloured boxes correctly. After the final slide it breaks due to previous boxes remaining visible on top. I'd love to know more about how to prevent this! On each click I'm trying to get the current box to scaleX out from right to left and the new one to scale in like it already is. I've tried to condense the example down as much as possible. Cheers! Smallio
-
http://robinmastromarino.com/ Hi I want to make a slider in this way. Could you help me with a similar project
-
Hi all, I'm trying to recreate a feature of this timeline slider. However, my timeline is configured differently, so I'm having difficulty translating the js over. Basically, I want my slider to change from white to red as the timeline slider progresses. Here's my current setup: https://jsfiddle.net/rymatt94/w9tf2bzw/40/ Apologies if this is overly simplistic - I'm new to javascript/jQuery and GSAP! Thanks in advance.
-
Hi all, I'm very new to both javascript/jQuery and GSAP. I'm trying to make a timeline slider and want to use the .addPause feature to make the slider stop at certain points along the way. This works until the user interacts with the slider manually. After that, the .addPause functions are seemingly ignored and the timeline just goes along without pausing. How do I always ensure the .addPause function is respected upon pressing the play button? And if there are any optimizations you see that are obvious, please feel free to let me know! jsfiddle
-
Hi Guys, I hope you can help me to fix the over scrolling on this slider. I forked this slider animation from @Ihatetomatoes tutorial. And added a mouse-wheel function that makes it scroll up and down using the existing function that Peter use but what I want to achieve is not to over scroll(not the infinite scroll) it to other section. And even if I hot scroll the wheel it will just snap onto the next slide. Best Regards, Mikhail Villamor
-
Hello, I tried create background slider where slides are stretched on window height and width. Snaps work good because i tried something similar but only in smaller dimensions. I think the problem is in the distance. Which must drag the element so that the slider changes its position to the next snap. I searched solution how can i decrease this distance. But i didn't find something. Thank you for answer.
-
So as mentioned in a previous post, I'm following the advice @OSUblake & have been taking apart projects to try and learn as much as possible. My focus is creating a really nice slider that can be updated and made more complex as I learn. I'm not quite confident enough to make from scratch with GASP, so I'm using a friends Flickity logic for the slider & slowly converting it over. My goals were to learn how to: 1. drag slides & lock with a natural feel (✓) 2. navigate with touch/swipe & arrow keys (✓) 3. use mousedown to scale slides down for easy navigation (✓) 4. use count up to change numerical data on slides (✓) ♥ to @Sahil for the crazy example! 5. drag a horizontal scroll bar at the bottom that locks to each section (×) I just can't get my head around number 5. I managed to make it work seamlessly with the GASP draggable knob, but I'm really obsessed with learning how to make a horizontal scroll bar correspond with a slider with draggable. Here's the example I'm trying to recreate (found on the Greensock example page) - http://thieb.co/works Or a lil' GIF for the busy folks Searched the forums/codepen/deep space for examples of this & no cigar yet! Has anyone seen any examples of this with GASP that aren't buried in super complex websites? Best, Smallio
-
Hi guys, Making it my goal to learn to make a component in GASP every weekend. One thing I'm always wanted to do is make a slider that can tween values up and down, so I've made that my weekend goal! I made a quick prototype in webflow before I attempt it with GASP so I can show what I'm trying to do. http://slidertestingg.webflow.io/ So basically the movements of the slider, background image and reveal transitions are simple enough. I was wondering what's the best way to go to and from numeric values and pictures while keeping them aligned with a profile. I was imagining storing the data & pictures for each artist in variables and tweening two and fro from them while keeping the same transitions on the forward/back button. I've found tons of examples such as the ones below, but yet to find any using GASP. Could anyone point me in the direction of a codepen that uses it? I'd imagine this question has been asked before, just can't find it on the forums =/ Cheers, Will
-
I'd like to say hello to everyone at the beginning. I'm a novice in JavaScript world and I have a question. I tried to create navigation for my first GSAP slider and I have no idea how to get started. I'd be grateful for all the tips. Regards, Novice
-
Hey guys ! I've been trying to make this slider for the couple couple of days without much success. I have a slider and I'm trying to every time it finishes, it goes back to the first image, but it just stays in the same. Here is a snippet of my js. $(".right-arrow").click(function() { var contentSlides = $('.slider .slide'); var currentSlide = 0, tl = new TimelineMax(); tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 0 0 0)", x: 0}, {webkitClipPath: "inset(0 0 0 100%)", x: 10} ); if ( currentSlide < contentSlides.length ) { currentSlide++; } else if( currentSlide == (contentSlides.length -1) ) { currentSlide = 0; } tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 100% 0 0)", x: -40}, {webkitClipPath: "inset(0 0 0 0)", x: 0} ) }); Thanks in advance
-
Hi all, I've made a very rudimentary slider to scroll through images. It all works as expected, apart from one slight bug: If the user clicks through the images too quickly, the animation stops and immediately runs the function again. From what I can tell, the solution to this is to either remove the click event while the timeline is running (is this possible?), or to wait until the timeline has finished before running the next animation. If I were to wait for the timeline to finish before running the next clicked animation, would I run in to timeline stacking problems? I've attached the codepen below for reference. -
Hi guys, First let me clear one thing, I have no idea about GreenSock and what I am going to ask might be sound stupid so forgive me. I have created one horizontal scroll slider (check my Codepen link) and 30 navigation dots. So what I want to exactly do is when I start scrolling the paragraph container from left to right, that should change the size of above navigation dots. Suppose, if I scroll little bit 1st dot should biggest, 2nd dot little bit big and 3rd one also little bit big and other 27 dots stay small as it is. Again, if I start scrolling from the previous position 1st dot should be little bit small, 2nd one biggest and 3rd same as 1 little bit big, and other 27 dots stay small as it is. Again, if I scroll again where I left scrollbar 1st dot and last 26 dots stay small as it is, 2nd should be little bit small and 3rd one should be biggest and 4th little bit small. This process should continue until scroll bar reach to right side. And same thing happen with reverse order too means when I start scrolling from right to left animation on dots size should applied reverse side. So I hope you guys understand what animation effect I have to show ? If you any question please let me know. I hope to get answer from you genius. Thank you.
-
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.
-
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
-
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!
-
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
-
plug-in out there? I much prefer this to a jQuery plug-in if such a thing exists.
-
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
-
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 -
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? -
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
-
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
-
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.
-
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
-
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
