Need help to understand this effect

[lauren_d]

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

[ZachSaucier]

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  

[lauren_d]

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 !

[ZachSaucier]

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.

[lauren_d]

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

[ZachSaucier]

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. 

[ZachSaucier]

I'm glad you got your question answered  

[lauren_d]

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

[lauren_d]

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

[ZachSaucier]

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. 

[lauren_d]

1 hour ago, ZachSaucier said:

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. 

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

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

[ZachSaucier]

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
    }
  });
}

 

[BoneDigital]

@ZachSaucier How does the getCenterCoords function work? Not too sure on the params needed.

[ZachSaucier]

9 hours ago, BoneDigital said:

How does the getCenterCoords function work? Not too sure on the params needed.

Looks like a remnant from an approach that I ended up not using as a part of that demo. It could be removed.

[AVIATOR7]

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

[GreenSock]

Hi @AVIATOR7. Welcome to the forums. 

 

Can you please explain your question? I'm not sure what you're asking. We're happy to answer anything about the GSAP API itself, but these forums aren't really intended for "help me build my portfolio site with custom code" requests.

[AVIATOR7]

https://demo.langoorqa.net/mylan/  I want to build something similar to this but the grid design should be random

[Cassie]

As Jack mentioned - That's not really what these forums are for.

 

If you're looking for help with your portfolio you could post in the freelance forums - maybe you can find someone to mentor you?

[momo12]

Wow! A great idea was discussed here