Jump to content
GreenSock

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

How to animate carousel navigation dots ?

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

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 post
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 post
Share on other sites

@OSUblake 

 

Hi

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

Link to post
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 post
Share on other sites

Thanks!

 

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

×