Jump to content
Search Community

Implementing draggable with inertia in an iFrame gives an error

krattus test
Moderator Tag

Recommended Posts

I work for a company that builds rich mobile banners and I would like to start using Greensock libraries instead of the Anime.js that we are usually using. I used to use your libraries more when Flash was still alive and I love them. :)

 

A version that shows the error is here: 
https://create.playground.xyz/gipuna/8/edit?html,css,js,output

There is some kind of an addressing problem, it might have to do with calling the window from the iFrame.

 

If I just tween then there is no problem but if I want to set the element draggable the problem appears.

 

Could you please help, I'd be super grateful. I signed up for your Business Green yesterday and if I don't get the plugins working it will be a waste.

 

I think the problem is similar to the one described here:

 

I really appreciate any help. Cheers!

Screen Shot 2019-12-05 at 9.30.32 am.png

Link to comment
Share on other sites

First of all, thanks for being a club member! Don't worry - we're committed to ensuring things are bug-free. Plus, if you're not 100% happy, we'll gladly give you a full refund. We're confident in the value we aim to deliver. 

 

I believe that issue is already fixed in the upcoming release, 3.0.2 which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js

 

We hope to officially push that release out within the next 2 days, so you won't have to wait long at all. Of course you're welcome to use that beta file in the mean time. 

 

Also, my hat's off to you for being such a long-time user, all the way back to the Flash days! That's great!

  • Like 1
Link to comment
Share on other sites

Thanks! Really appreciate the quick response. Tried the new file, but it is giving the same error. The main library is working, but the draggable gives that error. I have been trying to figure it out and fix the problem, but it seems to be beyond my skills. Would you mind taking a look at the link I shared above? I really appreciate your help. 

Link to comment
Share on other sites

Hm, that link goes somewhere that seems to force a signup and the "how does the playground work" link goes to a 404 which makes me nervous. Is there any chance you could provide a super simple codepen or jsfiddle that demonstrates the issue? It doesn't need to be your actual project - it can just be the most basic example possible. 

 

I also wonder if maybe you didn't clear your cache and were pulling in an old Draggable? 

 

Don't worry, we'll get it sorted out. I just need a little more info so I can troubleshoot effectively. 

Link to comment
Share on other sites

Thanks! I checked that it is the new Draggable. The link is to the development environment that we use that is a version of codepen. It has tabs for creating the formats of ads we make, then an HTML, a CSS and Javascript window for editing and creating the ads. It just needs any Google account to log in and use it as the ads and assets are connected to a user. I made a temporary gmail account for you to use: figuringouterror1@gmail.com, Figuring123! Log in with this and access. It is nothing malicious. We are a start-up in Australia called PlaygroundXYZ. Look it up on playground.xyz :)

I can't use codepen as the error is our platform specific and the error shows up in that specific implementation.

And the example is not a full on project, it is just a very basic attempt to get the library working. :)

Link to comment
Share on other sites

Sorry, I forgot to create a user on the actual system with that email. :) Try again with user greensock123 and the pw above. My bad. You can view the test ad here: https://create.playground.xyz/gipuna/?&pos=header-ad&size=320x50

 

If you press Shift E while outside the iFrame it should also switch to the editing mode. Thanks again!

Link to comment
Share on other sites

I saw that post and tried the script from there and it wasn't working. It would be awesome if we could find a workaround and I could use those libraries. I am actually super excited about the potential cool animations I could create. :) Most of the other designers are using anime, but GS with all these additional libraries would be super cool, Draggable, SplitText etc. I think for the main library this has been fixed as it seems to be working fine.

Link to comment
Share on other sites

I've solved that original issue you posted about (which was related to the fact that the element was in a DocumentFragment, not the actual DOM) but I'm noticing that the playground.xyz doesn't work with pointermove events! For example, try adding this code: 

document.addEventListener('pointermove', (event) => {
  console.log('Pointer moved');
});

Nothing gets logged. Same for mousemove events. I assume something is hijacking them on that site and preventing their bubbling? 

  • Like 2
Link to comment
Share on other sites

I am not completely sure how the system works. I am mainly a designer and animator and a dev only to a certain extent. As much as I understand we serve and inject rich banners on different publisher's pages. I will have to ask more precisely how the system works from the main dev when he gets back in tomorrow. I know that every time we address anything with jQuery for example we have to call it $("elementId", docs.hero) to properly address it.

Link to comment
Share on other sites

Alright, I think I figured it out - Draggable was being loaded into an entirely different document than the element it was trying to control. So when it added pointermove listeners to the document, it wasn't the ownerDocument of that element. I've updated the beta Draggable and it seems to work fine now - https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js

 

Does that work well for you now? 

  • Like 2
Link to comment
Share on other sites

9 hours ago, krattus said:

Awesome. Thanks so much! What did you change? Just so if I run into this in the future I can change it myself.

I had to alter some logic inside Draggable to add listeners to the target's ownerDocument rather than the document that Draggable was loaded into. I also had to ensure that as it walks up the chain to sense when something is position:fixed, it stops when it encounters a DocumentFragment. Very rare edge cases :)

 

6 hours ago, krattus said:

Wanted to add to the question above that this is a completely epic level of support. Really appreciate it. Thank you very much!

We aim to please! And we couldn't possibly deliver this kind of support without supporters like you who sign up for Club GreenSock, so thanks again!

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