Search the Community

Showing results for tags 'slider'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 46 results

  1. image change on mouse up and mouse down and also title change animations.
  2. My web development agency is looking for a freelancer to develop a full page slider image with morphing transition. We have a special request from our customer and are not experimented with GreenSock/GSAP. We would like something very similar than landing page. We will only need the image morphing transition slider code, that we will implement in our current project (Laravel/HTML5). Project: Start date: mid-March Slider delivery deadline: mid-April Deliver a working HTML file with all assets Specify licences to purchase if any Image sample will be given. (black background dominante) Please send us: Libraries and versions required (GSAP? TweenLite?, jQuery? +++) Estimated delivery time Expected price for the task If you have a portfolio with similar work that would be perfect! Thanks. Adrien.
  3. Hello Community - my second post as I'm very stuck trying to integrate a range-slider in React that will be friends with the progress() method to move through the timeline! I can pass around the value I need to my slider, but getting undefined errors when I try to pass this over to etc? I've read through several posts, but none look very fact most are going back 2-3 years and the react-way has changed! Looking through the 'getting started with react post from Rodrigo' there are some useful hints, but it seems overly complex, compared to how easy it was to plugin the play, pause, reverse and restart methods into a button with an onClick event handler. Do we really need a separate state management file to pass down the state as props to a child component just to get the slider to move through the timeline without breaking? I also got some very good support already (This gives you more of an idea what I am working on...sorry for the lack of a reduced codepen example as this is a large full-stack application! coming soon I promise!) Here's some code of how I got the play, pause, reverse, and restart methods working...these plugged right in! (FYI ButtonGroup and Button components are from React-Bootstrap): <Row> <Col md={12}> <ButtonGroup className="animationControls"> <Button bsStyle="primary" onClick={() =>}> <Glyphicon glyph="play" /> {"Play"} </Button> <Button bsStyle="primary" onClick={() =>}> <Glyphicon glyph="pause" /> {"Pause"} </Button> <Button bsStyle="primary" onClick={() =>}> <Glyphicon glyph="backward" /> {" Reverse"} </Button> <Button bsStyle="primary" onClick={() =>}> <Glyphicon glyph="step-backward" /> {"Restart"} </Button> </ButtonGroup> </Col> </Row> Until bootstrap-4 is up and running with react, you do not have range slider in your form components, so I had to look elsewhere. After trying a few different versions, the npm package rc-slider seems to be the most lightweight (little to no boilerplate required!) create your styles for the slider before your class function: const railStyle = { position: "relative", width: "90%", margin: "0% 0% 0% 3%", height: 10, borderRadius: 7, cursor: "pointer", backgroundColor: "#afafaf" }; const handleStyle = { height: 15, width: 15, backgroundColor: "white", borderTopLeftRadius: 10, borderTopRightRadius: 10, border: "3px solid #E5F1FC", top: -2, position: "absolute" }; AND be sure to set your starting value in the constructor....probably 0 since that would be the start of your timeline.... constructor(props) { super(props); = new TimelineMax(); this.state = { center: [46.8, 8.3], zoom: 1, value: 0 }; this.handleZoomIn = this.handleZoomIn.bind(this); this.handleZoomOut = this.handleZoomOut.bind(this); this.handleReset = this.handleReset.bind(this); this.handleSliderChange = this.handleSliderChange.bind(this); } Next, I have two functions...please note that onSliderChange and onAfterChange are pre-built methods for the react rc-slider component. these successfuly track and log the value as you drag along the timeline, but kill the animation! onSliderChange = value => { this.setState({ value }); console.log("Value is: ", value); }; onAfterChange = value => { console.log(value); / 100); }; .....And lastly, the slider component itself, inside render() <Slider className="slider" style={railStyle} handleStyle={handleStyle} min={0} max={bookingData.length} value={this.state.value} onChange={this.onSliderChange} //onInput={this.handleSliderChange} onAfterChange={this.onAfterChange} /> I know this may be hard to digest without a working example. I'll try to make a reduced case, but here's the issue...inside the Slider component, if you drag the slider around, it will successfully log the value I need. Where can I pass the value to / 100) etc to get the timeline to respond? I've tried a dozen different ways, and I either get that value is undefined, or when I try to pass this in to the onSliderChange I get my fav error about expected a function, but instead saw an expression, no unused expressions. dragging the slider around kills the timeline, or depending where I do it, will make the animated elements disappear from the screen. Grrrrr! React is very powerful, but the need to constantly update the state of components during their lifecycle make these kinds of things very frustrating! If anyone has solved this or can send a link to an example of how to do this it would be greatly appreciated! If I figure it out on my own I will update the post - I know I'm close! Thanks community!
  4. Catalin R.

    Slider GSAP

    Hi, I have a problem with this slider. Can anybody help me? Thanks a lot!
  5. Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving
  6. Hello everyone at GSAP. Thanks for the great ongoing job. For the past day or two, I've been trying to implement GIaco's full page slider on my react website. This is the link to the original on codepen - What I am trying to do is achieve the exact same thing but with react. So far I have not been able to get anything to work especially because some of the line of code in the codepen example above don't make much sense to me when trying to implement them in react. This is what I have so far - import React, { Component } from 'react'; import { TweenMax, TimelineMax, ScrollToPlugin, CSSPlugin, Expo } from 'gsap/all'; import ReactPageScroller from "react-page-scroller"; import '../../styles/components/home.scss'; import Nav from '../nav/Nav'; const plugins = [ CSSPlugin ]; class Home extends Component { state = { slides: [], animating: true } constructor(props) { super(props); this.Go = this.Go.bind(this) } componentWillMount() { const slide = this.state.slides; const indx = slide.length - 1; const Anim = this.state.animating; for(var i = slide.length; i--;) { slide[i].anim =[i], 0.7, { yPercent: -100, paused: true }); } document.addEventListener("wheel", this.Go); } Go(e){ var SD=isNaN(e)?e.wheelDelta||-e.detail:e; if(SD>0 && indx>0 ){ if(!Anim){Anim=slide[indx]; indx--;} }else if(SD<0 && indx<box.length-1){ if(!Anim||!Anim.isActive()){indx++; Anim=box[indx].anim.reverse();} }; if(isNaN(e))e.preventDefault(); }; render() { return ( <div className="home"> <Nav /> <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>1</div> <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>2</div> <div className="slide" ref={(slide) => { this.state.slides.push(slide) }}>3</div> </div> ); } } export default Home; Please, if anyone could spare the time in this busy festive period to help me out, I would be ecstatic. Thanks all and Merry Christmas.
  7. Gubbels

    Different text displays on hover

    Hi First what I want to do. I have a slider with 4 pages and depending on the page I'm on, when hovering over a pre-specified element I want some text to display. This text is otherwise (when not hovering over the element) hidden. I've been thinking about ideas how to do it and thought about something and I'm wondernig whether it's possible. I give my "dots" (as seen below) <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> a css active state and then display the appropriate text depending on which "dot" is active? If that wouldn't be possible, how else could I achieve this? So far I only was able to display the text, which is otherwise hidden, when hovering over the pre-specified element. All help is appreciated! Thanks in advance!
  8. Hi y'all. I need some help here with my current project for university. Here's what I want to do: I created a slideshow for which I want to display animations (for example: scale on mouseover), however I want to show different types of animation based off on what slideshow page I am. Let's say I'm on slider 1 / 3 . Here I want the div box to scale:2 I'm on slider 2 / 3 . Here I want the div box to move x:200 I'm on slider 3 / 3 . Here I want the div box to opacity:0.2 The thing is I kind of know how to do it, using an if statement, but I'm not entirely sure what I have to put in between the brackets [if (HERE)] to target each slider. Thank you in advance for all the advice and help : )
  9. How can I achieve this scroll animation slider like this i just want to know the flow and how i incorporate this animation with Tween Max. I want to do this animation for single image which is should be Slice effect as like as this site when scroll. Expecting help from you . Thank you
  10. chirag@007

    3d text slider efffect

    Hi, I want to create the 3D text slider which will continuous playing. If there is any same working slider or code is present
  11. smallio

    Slide Transitions

    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
  12. hakan

    canvas fullscreen slider Hi I want to make a slider in this way. Could you help me with a similar project
  13. rymatt94

    Red Progress Slider

    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: Apologies if this is overly simplistic - I'm new to javascript/jQuery and GSAP! Thanks in advance.
  14. 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
  15. miks

    GSAP slider over scroll

    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
  16. SimonDucak

    Background Slider and draggable

    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.
  17. 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) - 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
  18. smallio

    GASP slider with numeric values

    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. 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
  19. Novice

    Slider navigation

    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
  20. 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
  21. 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.
  22. 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.
  23. 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 (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.
  24. LukeNick

    Tweaking GSAP slider

    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: ). 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: 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
  25. 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: 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 : 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!