Jump to content
Search Community

How to animate carousel navigation dots ?

Guest LeoSan
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Guest LeoSan

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

Guest LeoSan

@OSUblake 

 

Hi

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

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.
×
×
  • Create New...