Jump to content
GreenSock

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

Need Help for Slider Indicators

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

Share this post


Link to post
Share on other sites

Hey AslanGoi,

 

TimelineMax has a method just for this sort of thing called tweenTo

See the Pen VwYVGOy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

We highly recommend GSAP 3 though. Then you don't have to worry about Lite/Max versions, load a smaller file, and have a bunch of new features!

  • Thanks 1

Share this post


Link to post
Share on other sites

@ZachSaucier, Thanks! But tweenTo makes it like carousel, can I jump directly to slide that I clicked on indicator?

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@ZachSaucier Hi, Zach!

Finally I created my slider with indicators)

Can you look at it, please?

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

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

Thanks in advance!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hey Zach,

 

This concept is really fun.
Here is a variant:

 

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

 

Thanks again ...

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×