Jump to content
Search Community

Is there a GSAP-driven horizontal image slider

isaballoon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Not a plugin but this online tool was released some time and updated about a month ago:

 

http://html5maker.com/

 

I haven't tested it but you could give it a shot.

 

Another resource you should definitely check is this codepen by Chrysto:

 

See the Pen LckBh by burnandbass (@burnandbass) on CodePen

 

Is a great starting point if you want to build an image or content slider. What's so cool about it?, 18 lines of code to achieve that!!, you can't get it more simple than that.

 

Best,

Rodrigo.

  • Like 4
Link to comment
Share on other sites

  • 11 months later...

Hi all,
 
Does somebody has development a little plugin with this topic? A simple slider with tweenMax
 
I want to do a secuence like this: http://jquery.malsup.com/cycle2/demo/sync.php, with tweenMax, my goal is use some thumbnail gallery like this one http://onlinedepartment.nl/#culture, it's pretty cool!, Well, I'm trying this

See the Pen zAnCH by anon (@anon) on CodePen

to start changing directions (left|right, use nav arrows) but my first doubt is how to recall all the preccess to be used in a second, third, etc slider?

Link to comment
Share on other sites

Hi,

 

Nice sample, good job!!

 

I'm not sure I follow you on your doubt. You want to control more than one slider using just one set of event handlers?, I mean when you click on the right arrow all the sliders in the page will advance to the next image?. In that case just use one function for all the sliders you have in order to make them go forward and backwards. If not please elaborate a little more about it.

 

Finally in this matter of image/content sliders the one direction infinite slider is the easiest one to create, but as more features are added it gets more complex and different projects require different solutions, that's why I don't rely on plugins, better create the code for that particular project you'll learn a lot more as well.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi thanks for the help. I update the sample. Placed at the bottom a thumb gallery with tweenMax stagger. This should be what I want, but with an option of change directions, keyenter actions etc, like onlinedepartment has

Link to comment
Share on other sites

  • 9 months later...

This thread is a little old, but it's the first thing that comes up when you search "GSAP slider" in Google so I figured I'd chime in with a little update:

 

http://slider.extralagence.com/

 

I haven't used Extra Slider, yet, but I'm going to spend the next few hours playing with it. It appears to have lots of advantages including HTML in slides (instead of just images), lots of options including draggable slides and it's responsive.

 

Hopefully this helps anyone else who's looking for a similar tool.

  • Like 1
Link to comment
Share on other sites

I just created a similar slider below. It uses GSAP Draggable and performs quite well on all screens. I am now looking to make it loop infinitely as you swipe through the slides. I am not clear on how the infinite looping is done. Any help on getting this to work like this ExtraSlider would be much appreciated.

 

See the Pen db82c6c86dfef17951df744ed8e3a42a by bdang (@bdang) on CodePen

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
Hi ektorp!
 
i just found your slider you made in codepen and it's great, but i can't make it work on window resize, i mean, if I resize the window, the code works well but altered and the transition goes super fast and the nav dots  multiply, any help?
 
PS.  I just add to the function init() the code: 
 $carouselItem.css({'width': (itemW)});  

so i give to the items full width.

 

 

Thanks a lot!!
Link to comment
Share on other sites

  • 3 weeks later...

@ektorp, the ExtraSlider is cloning the first slide and appending it to the last one, that makes it visually look like an infinite loop.

 

Then it goes back to the second item etc.

 

I will be building a few more advanced projects in my upcoming GreenSock Workshop and one of the is a fullscreen slideshow.

 

Check out the preview video.

 

Link to comment
Share on other sites

Hi,

 

I am new into GreenSock librarie, also in Jquery. I am a desktop software developer, but i am testing and learning, in this case TweenMax.

 

This experiment is just that, the code is a mess (because i was only touching here and there). Thats why i scramble it.

 

This experiment reads from an XML the filenames and make a very experimental slider (is my first one in my whole life!!) and i am lazy, so i just use 4 images, its running in a loop.

 

Also its somehow responsive (its suppoused to be at 80%!!).

 

Its not finished at all. Have mercy, its my 3th day with this lib.

 

http://idoneo.us/galerias/1/

Link to comment
Share on other sites

To anyone that is not the greatest with javascript and is sick of being hamstrung by sliders with too many built in features, here's a great simple slider that cuts out all the garbage.

 

http://wallopslider.github.io/

 

All it does it manipulate classes (current, previous-show, previous-hide, next-show, next-hide, etc.) and then you can use css/js or both to control animation. There is also a small API so you can use the events to trigger GSAP animations however you would like. I highly recommend it if you don't want to go through the trouble of rolling your own slider but yet still want total control over your animations. Also, only 3kb minified and no dependencies.

 

** I did not write this plugin... I just really really like it.

Link to comment
Share on other sites

To anyone that is not the greatest with javascript and is sick of being hamstrung by sliders with too many built in features, here's a great simple slider that cuts out all the garbage.

 

http://wallopslider.github.io/

 

All it does it manipulate classes (current, previous-show, previous-hide, next-show, next-hide, etc.) and then you can use css/js or both to control animation. There is also a small API so you can use the events to trigger GSAP animations however you would like. I highly recommend it if you don't want to go through the trouble of rolling your own slider but yet still want total control over your animations. Also, only 3kb minified and no dependencies.

 

** I did not write this plugin... I just really really like it.

 

I don't think so it's GSAP based slider.

Link to comment
Share on other sites

  • 1 month later...
  • 2 weeks later...

Here is a simple horizontal slider made with GSAP.. maybe help you get started:

 

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

Just my two cents :)

 

Hey, 

 

I'm building a slider upon this pen and have been struggling with an "Uncaught TypeError: Cannot read property 'repeat' of undefined".

 

The pen uses GSAP 1.11.5. 

It turns out that with gsap latest version, you can't do this anymore:

.to($slide3, duration)

This line was used to pause the slider for a "duration" period (as in "do nothing for duration seconds" more than a real pause).

You can reproduce the error by updating the TweenMax dependency in the pen.

 

After some research, and thanks to this thread, I've replaced this line with:

.set({}, {}, duration)

and changed the variable declaration from :

duration = 4

to 

duration="+=4"

Everything works fine now (except for the progress bar that isn't working properly in my implementation, still working on that...).

 

I hope this can save the time it took me to figure this out to anybody wanting to use the pen.

 

Thank you Jonathan for the code, I found it to be the best starting point for my custom slider needs!

 
  • Like 1
Link to comment
Share on other sites

Thank you for the heads up ancrenoire :D

 

That codepen example is over a year old, I appreciate you notifying us! Once I am near my computer I will update that codepen starter slider for the most recent version of GSAP.

 

That was just one way of doing an image slider, even though there are many ways to do the same thing ;) But it was just a quick and dirty example, showing the concept of how to achieve an infinite slider using GSAP. But like Rodrigo advised above, the more stuff you add to the slider it can get really complex.

 

If you post an example of your silder codepen example, I'm sure we can try and figure out how to get that progress bar working.

 

Again thank you, and happy teeening :)

Link to comment
Share on other sites

  • 1 month later...

Hi !

 

Just wanted to inform you that v1.3 of Extra Slider has been released.

The drag mechanics has been updated, and is smoother now.

Please, have a look and feel free to leave a comment here :)

Cheers !

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Hi jbjanot,

 

Thank you for making your image slider. Saves us a ton of work :-).

 

But if you change the "type: slide" to fade, the previous list item does not fade out as the "currentItem" fades in. I thought it was because I was missing some class "extra-slider-active" that is inserted when the item is the one highlighted. 

 

So I created a basic pen using your example code with text based items, to illustrate the problem.

 

See the Pen vGQYQp by Afrowave (@Afrowave) on CodePen

Link to comment
Share on other sites

  • 2 weeks later...

Hi Afrowave,

 

I am glad you found some interests in using the slider !

 

I updated  your Codepen to make it work.

Basically, it is a matter of CSS : adding a white background to the list items prevent this intended behaviour.

I added a css reset to set margins to zero.

 

See the Pen ZWPdmR by extralagence (@extralagence) on CodePen

 

You can also have a look at this codepens collection of different usages of the slider, it might help you : 

 

http://codepen.io/collection/nrBLVr/

 

The dedicated website has got a few different examples too : http://slider.extralagence.com/demos/

And there is also a full documentation of the parameters and events available here : http://slider.extralagence.com/documentation/

 

I hope this helps :)

Bye !

 

EDIT : I removed the slider js and css codes from the pen, and added them as external ressources.

It will help you to clearly see the specific code only.

  • Like 2
Link to comment
Share on other sites

  • 5 months later...

Hi !

 

Just wanted to inform you that v1.3 of Extra Slider has been released.

The drag mechanics has been updated, and is smoother now.

Please, have a look and feel free to leave a comment here :)

Cheers !

 

Hi Jean-Baptiste and all GSAP fans!

Thanks for sharing Extra Slider (great product!) and for slider discussion overall.

 

I'm quite a beginner and creating custom carousel based on Extra Slider (6 slides, draggable, with autoplay/looped) with GSAP animated specific content on each slide.

 

 

I have a question:

- how can I listen to activated specific slide (with its some ID, I see no hash) and then execute according function with TimelineMax animation? (and of course execute each time when this slide is getting active by clicking on navigation, autoplay/loop and draggable).

 

Please let me know at least whether that's possible there.

 

Thanks,

Vitaliy

Link to comment
Share on other sites

  • 2 weeks later...

Hi Vitaly,

Thanks for your feedback.

I don't know if you still needs help on this one.

The best solution is to listen to onMoveStart.
It can be passed as a function in the slider parameters, or you can listen to the jquery event extra:slider:moveStart.

Here is an example using it, with an automatic loader :

See the Pen xZYmev by extralagence (@extralagence) on CodePen



Have a nice day !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...