Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About lauren_d

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hello and happy new year to all, I'm trying to achieve the following effect: https://www.esperanto.design/ on the "all interviews" page, there is a list, I want to achieve the snap back into center when scrolling effect if possible with gsap. When you stop scrolling the list, the nearest elem will snap back to the center. For my project I have an infinite list wich clone my first elems and append them in the right place. I determined the "vertical center" with document.elementFromPoint(100, winMidY) and It fives me the right element but I don't know what to do
  2. I'm basically using your code on codepen with slight adaptation https://codepen.io/ZachSaucier/pen/PoqxzMV
  3. Hi again, So my project is going well. I have added some filters, some webgl and I'm close to what I wanted. I just have one last problem, I would like to have a click event on each element and so doing that is not the part wich I have a problem with but my click can't go through the "mask" so mouseenter is never actually running. How can I go through the mask and actually recognize when I'm hovering an element ? Thank you and here is a little screenshot of my advancement
  4. Yes ! Sorry I didn't have the time to come here before now and tell you this ! But it's really great, I still have a long way to go ! So I will continue my project and hopefully I will be able to show you the final product
  5. Thank you, I just have problem with your code and I don't know if you can help me with my error, it works really well on codepen but when I try to implement it in my project, I got a problem. I'm studying react, so I try implementing it and actually my error is when calling your checkPositions function. So I have this: updateCenterElem() { let elems = document.elementsFromPoint(winMidX, winMidY); elems.forEach((elem) => { if(elem.matches(imageSelector) && !lastCenteredElem.isSameNode(elem)) { lastCenteredElem = elem; this.checkPositio
  6. Yes thank you, I actually followed a bit what you did in your pen and so I have my grid that is floating with a timeline but it is not infinite, my elements only appear once and if I drag my mask, then the elements would not be visible anymore, how can I repeat them not matter where I drag and make it appear like they are everywhere ? Maybe there is my answer in your pen and I did not see it But big thank you for your help !
  7. Hi everyone, I'm trying to implement this effect from this website https://isolation.is/. The grid moves by itself and the animation repeat itself as the items always go back to their starting position. Actually it's not only that, once an item goes past a certain point, the element is taken and positioned at the end of the div (so just append in js I guess). First of all I need to make the grid, in the website though there is no row (as in no parent div for the items) so I have a bit of trouble understanding how it's done. I guess I would have to use gsap.set on all my eleme
  8. lauren_d

    Circular menu

    Yes that's what I will do. Thank you for the help 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.
  9. lauren_d

    Circular menu

    Menu 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 sa
  10. lauren_d

    Circular menu

    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 !
  11. lauren_d

    Circular menu

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

    Circular menu

    HI, I'm actually trying to do the same menu. Here is my pen to show my advancement. Circular Menu 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.
  13. Thank you for your welcoming and for your help. I will start with what you told me and build what I want from there. I will update and post with my pen. I will surely have more questions haha. Especially with the sorting but I will work on it ! Thank you !
  14. Hi, I've been trying to make a gallery navigation like this: https://www.powerhouse-company.com where the menu is a gallery of images and moves when you drag the canvas and then you have the select to sort the diverse articles, the animation is beautiful. I'm guessing I have to use a plugin to do the sorting like they use (flickity), but I'm kind of lost on how to make the canvas. I just want to be able to drag my canvas in fullview and integrate it with images which would be Links. I'm not expecting any of yo