Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Guest LeoSan

How to animate carousel navigation dots ?

Recommended Posts

Hi guys, 

First let me clear one thing, I have no idea about GreenSock and what I am going to ask might be sound stupid so forgive me. 


I have created one horizontal scroll slider (check my Codepen link) and 30 navigation dots. So what I want to exactly do is when I start scrolling the paragraph container from left to right, that should change the size of above navigation dots. Suppose, if I scroll little bit 1st dot should biggest, 2nd dot little bit big and 3rd one also little bit big and other 27 dots stay small as it is. Again, if I start scrolling from the previous position 1st dot should be little bit small, 2nd one biggest and 3rd same as 1 little bit big, and other 27 dots stay small as it is. Again, if I scroll  again where I left scrollbar 1st dot and last 26 dots stay small as it is, 2nd should be little bit small and 3rd one should be biggest and 4th little bit small.
This process should continue until scroll bar reach to right side. And same thing happen with reverse order too means when I start scrolling from right to left animation on dots size should applied reverse side. So I hope you guys understand what animation effect I have to show ? If you any question please let me know. I hope to get answer from you genius. Thank you.

See the Pen ZyGyVY by LeoZoe (@LeoZoe) on CodePen

Link to comment
Share on other sites

Sounds like you're trying to do a mac dock effect. This might help you get started. It's just for scrolling. Clicking on bullet would require animating the scroll position.


See the Pen BZNGyd?editors=0010 by osublake (@osublake) on CodePen



And just an FYI. If you want to animate stuff with JavaScript, like GSAP, you can't have CSS transitions trying to control the same properties.


  • Like 4
Link to comment
Share on other sites




thank you very much man. This is the same thing I wanted to do. I really appreciate your work.

Link to comment
Share on other sites

clever approach, Blake. Had fun studying it. I suspect I would have done it in a much more agonizing and inefficient process. 


  • Like 1
Link to comment
Share on other sites



The hardest part was getting the scaling to look correct in Chrome. I just updated Chrome, and it seems those will-change workarounds are no longer needed.


Does anybody see scaling issues with the bullets in this demo? Running v 59.0.3071.86.


See the Pen 8ca546064b3efdcd69729b6bf1a4755a by osublake (@osublake) on CodePen



Link to comment
Share on other sites

I'm not noticing any scaling issues, and I just updated Chrome as well. 


I wonder what exactly they did with the will-change stuff, as it seems to be much different than what we reported at http://greensock.com/will-change/ (I'm hoping they listened to the feedback). 

Link to comment
Share on other sites

Something definitely changed. I'm noticing a lot of scaling workarounds I've used in the past are no longer needed.

Link to comment
Share on other sites

Just noticed that will-change has broken some of my animations.


Scroll down and up. The "Some Title" heading becomes blurry.

See the Pen 2b31d324ad460592d8f06f8c8cd5aacd by osublake (@osublake) on CodePen


Removing will-change fixes the issue. Not sure if or how much that will affect performance.


See the Pen NdEONL by osublake (@osublake) on CodePen



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.