Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
capa

GSAP slider: Regarding delayedCall()

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

Hi Zach,

Thank you for your comment! It's very helpful!

I will try to rewrite my code following your outline^^

  • Like 1
Link to comment
Share on other sites

I rewrite my code and it seems fine. I know there would be simpler way to do this though..

 

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

Link to comment
Share on other sites

You could use someone else's such as 

 

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.
×