Jump to content


Using the same Timeline for multiple image sliders

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



How can I handle two or more image slider by the same tl construction?

Link to comment
Share on other sites

Hello mikel, and welcome to the GreenSock Forum!


One issue i see in your code is that you are using the same ID for more than one element. ID's need to be unique.


For example, in

See the Pen vcfdj by mikeK (@mikeK) on CodePen

i saw multiple instances of 

  • #all-panels
  • #next
  • #prev
  • #nav-panel

HTML5 allows more freedom for using special characters but still requires the name to be unique


So i would start by either making all the above ID's a class or add an increment number to the end of the ID's so they become unique names.


That is why it is only applying to only one image slider







I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi Jonathan,


Thanks for your support. I´m not a coder, but fascinated by Greensock.


So lets start again. Two codepens are prepared and demonstrating my problem.


The objectives: several image sliders, different image sizes, fading, captions, 'dots' for orientation/goto, prev/next buttons.


Test one: 

See the Pen glwfr by mikeK (@mikeK) on CodePen

  nice slider, proper / fast reaction of prev/next and dots,.

But I can´t integrate a second slider in these complex thread.


Test two: 

See the Pen vcfdj by mikeK (@mikeK) on CodePen

  very cool thread to animate the sliders (based on array + tweening:  http://greensock.com/forums/topic/8282-tweenmax-reverse-issue-when-added-to-timelinemax/). It was possible for me to combine two sliders. But I not able to integrate labels for handling the 'buttons'.


I would be a great pleasure getting advice which I can understand and execute.


Kind regards


Link to comment
Share on other sites



It is very possible that Jonathan or anyone else has a solution or some existing code laying around that may help. 

However, a large majority of the skills and code needed to make this work are well beyond the realm of the GSAP API. 

Unfortunately we just don't have the resources to provide education on general JavaScript / coding practices.


However, what you are trying to do is a great case for a jQuery plugin (of which there are probably hundreds like this).

So basically your code could be structured in such a way that you could pass one of your divs into a jQuery function and it would cruise through all the nested ".image" nodes and turn them into a slide show with controls.


So in the end creating multiple galleries might be as easy as:


var treesGallery = $("#trees").createGallery();

var meatGallery = $("#meat").createGallery();


Unlike the many jQuery tools that already do this... yours could be much better by incorporation GSAP for the animations. 


Again, this is beyond the type of material we cover here, but if you google "jQuery beginner slideshow tutorial" it will probably get you pretty close to what you need and when its all working, you can just swap in GSAP for the animation. 

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.