Neg Posted August 11, 2021 Share Posted August 11, 2021 Hi everybody, This is an example of what I intend to make (not exactly but almost). There are two problems here: First, the text flashes on before svg loads and this is not good and second, the buttons become disabled. I spent hours to solve this but I got stuck. Could you please help me? Thanks See the Pen LYyMppO by webplot (@webplot) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 11, 2021 Share Posted August 11, 2021 Heya @Neg! If you want to be able to click 'through' the SVG - you'll need to set pointer:events: none on the SVG in your CSS I assume the flash is because you're updating the SVG dynamically and the HTML/CSS loads before the JS does. You can probably fix that by hiding the content with CSS and fading it in or setting a background color on the SVG in the CSS. You're also using a combo of old timelineMax syntax and new GSAP3 syntax - you may want to have a little look at that. 6 Link to comment Share on other sites More sharing options...
Neg Posted August 11, 2021 Author Share Posted August 11, 2021 Hi @Cassie, thanks a lot for : 47 minutes ago, Cassie said: pointer:events: none It helped a lot. I will definitely update my syntax. 2 Link to comment Share on other sites More sharing options...
Neg Posted August 11, 2021 Author Share Posted August 11, 2021 Hi agian @Cassie, In order to load java faster than html I put my java text inside module <script type=''module"> and it really works But not always. Link to comment Share on other sites More sharing options...
Cassie Posted August 11, 2021 Share Posted August 11, 2021 Hmm. I'm not sure exactly what you mean by that, but the browser support for modules via script tags isn't perfect yet. I'd probably just do a little fade in if I were you. 3 Link to comment Share on other sites More sharing options...
Neg Posted August 11, 2021 Author Share Posted August 11, 2021 I will go for "fade in" as you suggested. Thanks for the link. 1 Link to comment Share on other sites More sharing options...
Neg Posted August 12, 2021 Author Share Posted August 12, 2021 Hi again, I tried to use autoAlpha here, but I've faced with errors. There are two timelines in js file, one for svg and the other for loading " .content" after loading the page but in my local host after loading svg the content cannot be loaded! (have no clue why?) and in codepen svg and conttent both cannot be loaded. Can any body help me ? Thank you See the Pen LYyMppO by webplot (@webplot) on CodePen Link to comment Share on other sites More sharing options...
nico fonseca Posted August 12, 2021 Share Posted August 12, 2021 Hi @Neg you have a syntax error in "line 86", try: window.addEventListener("load", function(event) { init(); }); 6 Link to comment Share on other sites More sharing options...
Neg Posted August 12, 2021 Author Share Posted August 12, 2021 Yes , thanks a lot @nicofonseca That was the reason! 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now