Jump to content
Search Community

Need Help for Slider Indicators

AsKadir test
Moderator Tag

Recommended Posts

Hi!

I'm so sorry, but I need help, I can't fall asleep until I finish a slider using GSAP.

So I have a simple slider with indicators,

here in forum I found out that I can use seek() method to use indicators to jump for the slide I need.

But I can't understand how can I add animation for it?

How I can use the same animation that I'm using for next and prev arrows.

Can you help me, please?🙏🙏🙏


 

See the Pen JjoeaGd by ChicagoJostik (@ChicagoJostik) on CodePen

Link to comment
Share on other sites

9 minutes ago, AslanGoi said:

tweenTo makes it like carousel, can I jump directly to slide that I clicked on indicator?

tweenTo animates the progress of a timeline from one position to another.

 

10 minutes ago, AslanGoi said:

I can't use gsap v3, because I'm using ScrollMagic and they still haven't updated their plugin😥

Another reason not to use ScrollMagic ;) most the time you don't need it.

 

But you could use the updated version on their GitHub repo. This PR merged in support for GSAP 3.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

6 minutes ago, AslanGoi said:

Is my code terrible for TweenMax animation, or is it ok?

It's quite okay :) Definitely not terrible.

 

With that being said, a few suggested and optional improvements:

  • Try not to create function inside of loops/other functions that will be called multiple times. This creates unnecessary work most of the time (including this time). Simply putting them outside of the loop prevents the same functions from being called multiple times.
  • Don't put the same event listeners on the same element in a loop. Presumably by accident, you were applying multiple of the same event listeners to the next and previous buttons inside the loop.
  • Consider using an init() function. There's nothing magical about them, but it helps people understand what's run at the start and what's not.
  • Use GSAP 3. It has more features, is a smaller file size, and has an improved API. Why not use it?
  • Use a little bit more white space (and maybe even comments). It makes it easier to read and for people to follow along with what's happening.
  • Don't mix CSS transitions with GSAP. If you're already animating with GSAP, why use CSS transitions? GSAP overs more flexibility and control over your animations. Using both a transition and GSAP on an element can also cause conflicts and errors.
  • Only create timelines if you need them. Inside of your moveToSlide function you were creating two timelines every time but only ever using one. Just create one :) You likely would never notice the memory difference but we're perfectionists here, haha.
  • Drop jQuery. I didn't do this in the demo below, but these days vanilla JS is pretty easy to use and cross-browser friendly. There's not much use for jQuery if you ask me, it's just more to load.
  • Don't use class names to keep track of the animation's state. It's not very clean or perfectly reliable. Use .isActive() instead! 
  • Try not to animate top, left, etc. It's better to use transforms, i.e. x and y in GSAP, because they don't cause reflow. Also try to avoid animating width and height and similar properties for the same reasons, but sometimes it's unavoidable. I didn't do this in the demo below
  • Don't use data attributes and lookups to keep track of indexes. You already have a list of the elements, just refer to that with the index.
  • Consider using .fromTo()s. They can make .set() and .to() into one call :) 
  • Limit your number of global variables. 
  • Don't use className tweens. They're not supported in GSAP 3. Just set the className or use .classList.add/.remove.

That got to be longer than I thought it was going to be, hah. I hope it's not discouraging - your core logic is good! I just kept coming across things I'd change. Not that you have to change them. 

 

See the Pen 5c181519b1340548a3d3579587fa141f by GreenSock (@GreenSock) on CodePen

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hey Zach,

 

Your concept is great, your tips very helpful.
Since I really like slider and animation,
I once did an exercise based on your pattern.

I was able to integrate individual animations for the slides.
As a scroll option I have the wheel function for testing.

 

I would like to address two points:
I modified the condition of the dotClick func for my setup.

The start of the individual animations comes too early,
starts with the moveToSlide func instead of onComplete.
What have I done wrong here?

 

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

 

Kind regards

Mikel

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Oops, good catch @mikel. I didn't notice because the animation duration was so short, but I have

moveSlideTL = gsap.timeline({onComplete: setActiveSlide(slideTo, slideFrom)})

where it should be

moveSlideTL = gsap.timeline({onComplete: setActiveSlide, onCompleteParams: [slideTo, slideFrom]})

Otherwise it calls it immediately :) Good catch.

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