Jump to content
Search Community

GSAP slider: Regarding delayedCall()

capa test
Moderator Tag

Recommended Posts

I am learning JavaScript and GSAP for several months and  tried to make slide show using delayedCall() .

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

However, I encountered the following issues.

1. Expected to cancel slide loop  by hovering on dot pager but not..

2. The first transition is awkward..

 

See the Pen eYJBYme by webgrapher (@webgrapher) on CodePen

Link to comment
Share on other sites

Hey capa. You've got a lot of code for a pretty simple effect. I recommend rewriting your code to be more concise and understandable. Here's the outline of what I'd do:

  1. Make a function that receives an index as a parameter and fades in the appropriate image and makes the relevant dot more opaque while at the same time does the opposite to the currently active image and dot (perhaps using a stored index to know which one is currently active). Make sure that overwrite is set to "auto" or true for those tweens.
  2. Create a delayedCall that calls the function from 1 after a set period of time but make sure that you save a reference to the delayedCall.
  3. Modify the function from #1 to cancel and create a new delayedCall similar to #2 but based on the index after the given one. This is what you're not doing in your demo.
  4. Add click functions to the dots to call the function from #1.

Simple :) 

  • Like 2
Link to comment
Share on other sites

Thank you for the link! It could be a great lesson, looking through what someone else created!

Actually, it is obviously easy to use a existing code but in order to realize what I really want,  I need to know how to create by myself. 

 

 

  • Like 1
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...