search

stephenscaff / react-animated-cursor

An animated custom cursor React component.
ISC License
277 stars 28 forks source link

iFrames #16

Closed jamesryan-dev closed 2 years ago

jamesryan-dev commented 2 years ago

When moving my animated cursor over an iFrame it stops working

stephenscaff commented 2 years ago

Hi.

The cursor won't work inside iFrames because iframes are just an inline frame for displaying a separate doc (with it's own html/css/js/etc), and that doc is outside our control.

So, I see 2 possible solutions.

  1. Set iframe pointer-events: none.

For example, in a react app

const s = {
  noPointers: {
    pointerEvents: "none"
  }
}

<iframe styles={s.noPointers}></iframe>

The cursor will continue to work, but of course, nothing inside the iframe will be clickable. So, only a good solution if your iframes are purely presentational.

  1. Kill the cursor when it goes over iframes.

Currently the cursor will just stop at the edge of the iframe. It's probably better to just kill it off, remove styles and cancel events. Then restart stuff again once we renter the doc.

I'll think about how to make this behavior optional, or at last provide a method for destroying the cursor.

Thoughts?

jamesryan-dev commented 2 years ago

Yeah this sounds great - good luck with it all -> I decided not to use the library or a custom cursor in the end as with the iFrame heavy site it just didn't make sense - thankyou for responding tho