Jump to content
Search Community

Can't click on dev tools!

smallio test

By smallio
in GSAP

Moderator Tag
 Share

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Jonathan test

Jonathan

Posted
Posted

Hello @smallio and welcome to the GreenSock Forum!

 

I see 3 things wrong:

  1. There is an error in the console due to what is happening in bullet #2:
     TypeError: document.getElementById(...) is null   on line 81
     
  2. When i inspect the DOM.. it looks like the Dev Tools are being inserted after the ending </body> tag but before the ending </html> ending tag. This will cause your z-index not to be applied and that error in bullet #1 due to the  devtools being outside of the <body> tag 
    </body>
<style></style>
<div class="gs-dev-tools"></div>
</html>

     
  3. You have <html> tags out of order in the codpen HTML panel. So the <html> tags should be deleted from the codepen HTML panel. There not needed since the browser will create it for you when using codepen.

The devtools should be inserted right before the ending </body> tag. I can see that causing issues as well. This is being caused since your HTML panel has malformed HTML.

 

I will let the GreenSock big wigs know of this issue.

 

Please standby while we look into this for you :)

 

 

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Thanks, Jonathan.

 

Hi Smallio,

 

thanks for the demo

Yeah, there will be situations where custom html/css in the document will interfere with GSDevTools. I suspect the z-index on body and other elements is messing up some stacking orders. No way for GSDevTools to really detect this and adjust.

 

In cases like this you can do 2 things:

 

1: create your own div with its own css and inject GSDevTools into it using the container property 

2: apply some custom css to GSDevTools using the css property  as shown below

  

GSDevTools.create({css:{zIndex:5}});

 

See the Pen MQJamg by GreenSock (@GreenSock) on CodePen

 

 

 

  • Like 5
Link to comment
Share on other sites
smallio test

smallio

Posted
  • Author
Posted
22 minutes ago, Jonathan said:

Hello @smallio and welcome to the GreenSock Forum!

 

I see 3 things wrong:

  1. There is an error in the console do to what is happening in bullet #2:
     TypeError: document.getElementById(...) is null   on line 81
     
  2. When i inspect the DOM.. it looks like the Dev Tools are being inserted after the ending </body> tag but before the ending </html> ending tag. 
    
</body>
<style></style>
<div class="gs-dev-tools"></div>
</html>

     
  3. You have <html> tags out of order in the codpen HTML panel. So the <html> tags should be deleted from the codepen HTML panel.

The devtools should be inserted right before the ending </body> tag. I can see that causing issues as well. This is being caused since your HTML panel has malformed HTML.

 

I will let the GreenSock big wigs know of this issue.

 

Please standby while we look into this for you :)

 

 

 

Thanks for the reply!

 

Fixed all the issues, can you see any problems now? Still a no go.

 

 

Cheers,

Will

 

Link to comment
Share on other sites
smallio test

smallio

Posted
  • Author
Posted
9 minutes ago, Carl said:

Thanks, Jonathan.

 

Hi Smallio,

 

thanks for the demo

Yeah, there will be situations where custom html/css in the document will interfere with GSDevTools. I suspect the z-index on body and other elements is messing up some stacking orders. No way for GSDevTools to really detect this and adjust.

 

In cases like this you can do 2 things:

 

1: create your own div with its own css and inject GSDevTools into it using the container property 

2: apply some custom css to GSDevTools using the css property  as shown below

  


GSDevTools.create({css:{zIndex:5}});

 

See the Pen MQJamg by GreenSock (@GreenSock) on CodePen

 

 

 

 

Disregard my last post.

 

You are THE man Carl!!! Working perfectly :)

  • Like 1
Link to comment
Share on other sites
smallio test

smallio

Posted
  • Author
Posted

I've actually noticed another small issue here @carl.

 

When you play to the blue dot moving for the first time, then scrub to the end and back to the beginning the dot glitches over to the side as well as cuts parts off! 

 

Any idea why that would have randomly cropped up lol?

Link to comment
Share on other sites
smallio test

smallio

Posted
  • Author
Posted
55 minutes ago, Carl said:

Please fork the demo and remove as much as possible until only the animations that show the problem are left.

It will makes things much easier for us to hunt down what the cause may be.  thx.

 

I wish I could take out more but the dot is not moving back to it's original position even though it's in a fromTo. I've cleaned up the pen as much as possible though :)

 

See the Pen GQrqmQ?editors=0010 by smallio (@smallio) on CodePen

 

If you play the timeline for even a second, then scrub to the end and back so the blue dot appears (or back to the beginning) you'll see the edge of the dot is still there, like it's not getting the info to go back from -200px to 0px.

 

This seems to be the problem area:

  

// Dot Timeline
var tl4 = new TimelineMax();
tl4.fromTo("#dot", 0.8, {x:0}, {x:-200, ease:Circ.easeInOut}, 0)
   .fromTo("#dot", 0.8, {scaleX:1}, {scaleX:0.1, ease:Circ.easeInOut}, 0)
   .to("#dot", 0.8, {scaleY:"100vh", ease:Circ.easeInOut, transformOrigin:"50% 50%"}, 0.9)
   .staggerFromTo("#dot", 1.5, {fill:"#4343ed"}, {fill:"#121212", ease:Power4.easeInOut}, 0.9)
   .to("#dot", 0.8, {scaleX:'100vw', ease:Circ.easeInOut, transformOrigin:"50% 50%"}, 1.6)
   .fromTo("#dot", 1.5, {opacity:1}, {opacity:0}, 1.6)

 

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Not sure what you mean by you "can not take out more" Since you said that the problem was in tl4 (which helped) I removed everything else and still saw the problem (meaning everything else wasn't related to the problem). For the purposes of problem solving, the less code you provide the better. 

 

Here is your demo reduced:

 

See the Pen BYpZJO?editors=0011 by GreenSock (@GreenSock) on CodePen

 

run it in codepen with the console open and you will some logs about tweens overwriting. This is usually the culprit when an animation plays fine once but not on reverse or repeat. The issue is that 2 tweens are fighting for control over the same property at the same time. When this conflict occurs, the engine kills the previous tween so that the new (more recent tween) can run properly. https://greensock.com/docs/TweenLite/static.onOverwrite

 

You can set overwrite:"false" on the bad tween or change its position to 1.8 so there isn't a conflict. (cool animation btw).

 

See the Pen jZywRN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 4
Link to comment
Share on other sites
smallio test

smallio

Posted
  • Author
Posted
4 hours ago, Carl said:

Not sure what you mean by you "can not take out more" Since you said that the problem was in tl4 (which helped) I removed everything else and still saw the problem (meaning everything else wasn't related to the problem). For the purposes of problem solving, the less code you provide the better. 

 

Here is your demo reduced:

 

See the Pen BYpZJO?editors=0011 by GreenSock (@GreenSock) on CodePen

 

run it in codepen with the console open and you will some logs about tweens overwriting. This is usually the culprit when an animation plays fine once but not on reverse or repeat. The issue is that 2 tweens are fighting for control over the same property at the same time. When this conflict occurs, the engine kills the previous tween so that the new (more recent tween) can run properly. https://greensock.com/docs/TweenLite/static.onOverwrite

 

You can set overwrite:"false" on the bad tween or change its position to 1.8 so there isn't a conflict. (cool animation btw).

 

See the Pen jZywRN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

Once again you save the day :) Adding all of these to my cacher... I must say it's building up green-sock wise! Addicted without remorse lol.

 

 

2 hours ago, GreenSock said:

Very cool animation! Nice work. Let us know when it's out in the wild. 

 

Thank you, I certainly will! :D 

  • Like 1
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...