Jump to content
GreenSock

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

Circular menu

Recommended Posts

Hi,

 

I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows.

 

I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. 

 

Thank you all for your time!

Link to post
Share on other sites

To make the scrolling infinite, you actually want to use the regular scrolling as a proxy. What I mean by that is you don't want to show the regular scrolling or let it affect the page's scroll location but instead use the values from the scroll event to animate your elements. The core positioning and approach could be the same as in mikel's demo above.

 

ScrollMagic wouldn't help you make the scrolling infinite AFAIK.

  • Like 3
Link to post
Share on other sites
23 hours ago, ZachSaucier said:

you actually want to use the regular scrolling as a proxy.

 

Hey ZACH,

 

Yes, I want.

 

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

 

Happy rotating infinitely ...

Mikel

 

  • Like 1
Link to post
Share on other sites

@mikel @ZachSaucier 

 

Thank you both so much! I'm trying this suggestion out and I'll update with a pen if I run into some problems. I'm gonna try to dissect what you guys did since I'm kind of new to coding.

 

Cheers!

 

---Chronic

  • Like 1
Link to post
Share on other sites
  • 4 weeks later...

HI, I'm actually trying to do the same menu. 

Here is my pen to show my advancement.

See the Pen oNjowoa by laurenkumar (@laurenkumar) on CodePen

 

Later on, I will get all the pictures and titles from a request to an API but for now I just add everything myself.

I don't know if I took the right approach to make my elements moved according to the movement of my mouse but anyway I have some questions:

 

First, I would like to know how can I sync the progress circle in the bottom left to my slider. I'm guessing I should add an active class on the element that is in view but I don't how to go about it.

Then, as in the website when the item slowly comes up and arrive in view, the title begins to fill with white, so of course I made my titles with stroke, the only guess I have would be to begin to "fill" the title as it comes into view maybe a timeline

And finally, to make my menu complete, I would like to have the same effect when you scroll the elements, the items coming seems to lift as you speed up the scrolling.

 

If you can point me in the right direction, it would be awesome. I want to be as close as I can to this menu from this awesome website.

Thank you !

Link to post
Share on other sites
19 hours ago, lauren_d said:

I would like to know how can I sync the progress circle in the bottom left to my slider. 

The update function is already updating the timeline's progress based on the scroll position. Do the same thing for an animation on the circle.

 

19 hours ago, lauren_d said:

as in the website when the item slowly comes up and arrive in view, the title begins to fill with white, so of course I made my titles with stroke

Add that to the timeline you're updating the progress of where appropriate. Job done :) 

 

All that technique does is update an animation's progress based on the scroll position.

 

19 hours ago, lauren_d said:

I would like to have the same effect when you scroll the elements, the items coming seems to lift as you speed up the scrolling.

I have no idea what you're asking for here.

Link to post
Share on other sites
6 minutes ago, ZachSaucier said:

I have no idea what you're asking for here.

First of all thank you for the advices, I will update when I have enough results to show. But I will try to express myself better for that last part.

When you scroll the items of the slider on https://maxilla.jp (on desktop only), the image that is coming next is not flat, it's kinda deformed to give an effect and if you scroll faster this effect is accentuated. I took a picture to show you, it will be more explanatory than my words.

 

But thank you I will work and get back here to show the results. :)

Capture du 2020-05-04 15-54-58.png

Link to post
Share on other sites
5 minutes ago, lauren_d said:

When you scroll the items of the slider on https://maxilla.jp (on desktop only), the image that is coming next is not flat, it's kinda deformed to give an effect and if you scroll faster this effect is accentuated.

They're using WebGL to add some post-processing transform effects. Search for "codrops webgl image" in a search engine to get an idea of how to created effects like that. It's not as easy to pair with regular DOM pages as you might hope.

  • Like 1
Link to post
Share on other sites

Ok thank you, I will see to that in last then. I have made my progress wheel, I will now make my titles fill with white as they come up ! And then the cursor is it's not to hard.

 

Thank you !

 

Link to post
Share on other sites

See the Pen oNjowoa by laurenkumar (@laurenkumar) on CodePen

I tried to fill the titles in white when I scroll.

But I think I didn't took the right approach and not understood what you meant by adding to the timeline when appropriate. 

As of now every titles are filled with white as I scroll. 

How show I go about it ? Use the ratio and when it hit a precise value, add the white on a precise element ?

 

I played around a bit with the ratio value, add an attribute element with the value from this calculation = 3600 / number of elements. And then tried a simple if to check if my ratio of the update function is equal to say 0,125, the second element, but it kind of never does.

 

Is there a way to check which element is in view and stabilize or recenter my scroll ?

 

So I don't know how to advance, I will give it another go after I have cleared my head. I'm kind of new to all this, but I will continue.

Link to post
Share on other sites

You're asking several questions there :) I don't follow all of what you're saying.

 

I think you should take a step back from the project and create a text fill effect with just some text. Then make a version where does the same effect on multiple elements sequentially (perhaps using a timeline). Once you have that working, it should be trivial to hook it up to the project that you're working on. 

 

35 minutes ago, lauren_d said:

s there a way to check which element is in view and stabilize or recenter my scroll ?

What do you mean "stabilize or recenter"?

Link to post
Share on other sites

Yes that's what I will do. Thank you for the help

 

12 hours ago, ZachSaucier said:

What do you mean "stabilize or recenter"?

I mean now if I scroll I can stop anywhere, in between my slides if you want. What I want is if this happens, the closest slide should come down or up.

Link to post
Share on other sites
3 hours ago, lauren_d said:

What I want is if this happens, the closest slide should come down or up.

There are different ways you can build that in.

 

Often times people will use Draggable as the primary mechanism driving the animation which has its own snap-to-end functionality. As a bonus you get touching and throwing as an added benefit.

 

GSAP 3 also has a SnapPlugin and utility method. You could potentially use one of the other to snap to specific progress values in the on update.

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.

×