Jump to content
Search Community

Need help to understand this effect

lauren_d test
Moderator Tag

Recommended Posts

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 elements but how to calculate the space and offset needed and then the repeat ?

 

I will post a codepen later as I started my project directly in local.

 

Thank you

Link to comment
Share on other sites

Hey Lauren. It'd probably be best performance wise to use transforms to wrap it instead of actually changing the DOM. I did something similar with this infinite gallery project

 

5 hours ago, lauren_d said:

I guess I would have to use gsap.set on all my elements but how to calculate the space and offset needed and then the repeat ?

Ya, sounds reasonable.

 

If you have specific questions about GSAP let us know and we're happy to help :) 

Link to comment
Share on other sites

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 !

Webp.net-compress-image.jpg

Link to comment
Share on other sites

2 hours ago, lauren_d said:

how can I repeat them not matter where I drag and make it appear like they are everywhere ?

The approach I took in my pen was to use the modifiers plugin to detect if it's in a range. If it is, don't change anything. If it isn't, either add/subtract the width/height of the container. For example, if the container's restrictions were {xMin: -200, xMax: 200, yMin: -200, yMax: 200} and the element's position was at 300, 100 for some reason, then the method would subtract 200 from 300 so its new position would be 100, 100. Make sense?

 

It's the checkPositions function in my pen. In the pen I'm also updating a data representation of the element's positioning as well.

  • Like 2
Link to comment
Share on other sites

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.checkPositions(lastCenteredElem);
      }
    });
}

When I drag, I got a Typeerror: this.checkPositions is not a function so the app crashes. I have tried to bind "this" as seen in some stackoverflow answers or put this in an other variable like so let self = this;. But nothing works, I don't know if you or anyone will be able to help me.

 

Thank you again

Link to comment
Share on other sites

3 hours ago, lauren_d said:

this.checkPositions is not a function so the app crashes.

That means that this is not what you think it is :) You can console.log it to see what it really is. 

 

It's impossible to say for sure what this is or if you even need this.checkPositions and not just checkPositions based on just the section of code you shared above. 

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 2 weeks later...

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

Capture d’écran 2020-05-26 à 17.32.55.png

Link to comment
Share on other sites

7 minutes ago, lauren_d said:

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 ?

Try setting pointer-events: none; on the mask element? Without seeing your setup it's impossible for us to say if that will work or not. 

  • Like 1
Link to comment
Share on other sites

9 minutes ago, lauren_d said:

I'm basically using your code on codepen with slight adaptation

Ah, I see. In that case you can use the onClick function of the mask's Draggable. Something like this:

onClick: e => {
  // Get the elements underneath the click
  const clicked = document.elementsFromPoint(e.pageX, e.pageY);

  clicked.forEach(elem => {
    // If the one(s) you want are clicked, do stuff
    if(elem.matches(foo)) {
      // Do click stuff
    }
  });
}

 

  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...
  • 8 months later...

See the Pen PoqxzMV by ZachSaucier (@ZachSaucier) on CodePen

 

I tried using this code and spend many hours as I am new to coding want to make my portfolio project that I am using this kind of background but with different size images gallery but with grid type of design where the height and width is not constant not able to solve this mystery Please let me know any way I can achieve this

Link to comment
Share on other sites

  • 3 months later...

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