Jump to content
Search Community
Chronic test
Moderator Tag

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

  • 2 years later...

Hey guys,

 

Great thread!

 

I'm developing a circular menu very similar to what you guys have been sharing but I'm only just getting started with gsap and time is of essence to deliver this menu.


I have managed to make some progress in adapting the existing example to what I need but I can't figure out how to place the first item on the left top position.

 

If you follow the codepen link, when the page loads you'll see Item 4 and Item 3 showing, it should be Item 1 and Item 2 showing. 

See the Pen JjazeLW by marioandrade (@marioandrade) on CodePen

 

How can I set the position of the items?

 

Thanks in advance.

Link to comment
Share on other sites

I should have posted the question earlier.

 

From what I was able to find, every circle starts, by default, at the "3 o'clock" position and to change that we need to rotate the circle to the desired position.


Knowing this I was able to set the initial of the SVG by defining the rotate property and passing it a value.
Based to the code I shared above from Codepen the initial set of the SVG stayed like this:

 

var circleSVG = document.querySelector("#svg");

gsap.set('#circleWrap, #svg', {
  xPercent:-50, 
  yPercent:-50,
  rotate: -240
})

Hope this becomes helpful to someone .

Link to comment
Share on other sites

Hey @Cassie

 

I've tried setting the z-index of the circleWrap higher and the buttons are clickable but that prevents the scroll from working.

 

I'm working with javascript mouse events to trigger the scroll on the #scroll div but haven't found the correct way to detect the scroll mouse to pass to.

 

See the Pen JjazeLW?editors=1111 by marioandrade (@marioandrade) on CodePen

 

I'm passing the clientY but after clicking and dragging the mouse, when I try it again it resets the position.

Link to comment
Share on other sites

Hi,

 

Why not use ScrollTrigger for this? There are a few examples of how to achieve an infinite scroll with ScrollTrigger (JS line 17-28):

See the Pen VwbywPd by GreenSock (@GreenSock) on CodePen

 

Also another option could be the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

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