XIPureGamer

Well the thing is, I have tried uploading the aforementioned index.html/index.js/styles.css files to Codepen before but everytime I paste the code, Codepen starts giving Me errors because of ThreeJS, for example: "THREE is not defined", things like that. That could also be due to the fact that I have some of the JS files downloaded and that they are not link-rel'd via URL as shown in the aforementioned index.html pastebin link. Furthermore, the HTML and CSS code doesn't show errors when pasted into Codepen, just the ThreeJS (index.js) script/file. And by the way, Electron(.js) is My Framework, it's a runtime framework that allows users like Myself to create desktop-suite-like applications featuring HTML(5)/CSS/JS/etc...

Hello again GSAP / Everyone above, mainly Craig @PointC and Cassie and those who reacted to certain messages haha ? I've made a bit of progress since I was last here (May 16th) regarding the animation, I now have it finalized in CSS buuuut I am having trouble implementing it into My site and am hoping someone can help fix My code(/files) / tell Me where I went wrong / correct it. Here's the current problem: When I launch Electron (What I'm using to show/preview My website in, inside of something like Google Chrome) using the `npm start` command via Windows Command Prompt, the screen goes black for a very short duration (About a second or two) then it just stays on a grey background (The CSS animation uses #454242 (Hex Color Code) hence why I wrote grey. See Line 183-192 in styles.css for more details) forever/endlessly and nothing else happens. I have tried modifying the index.js file in many different ways to try and get it to show the CSS Animation and then the ThreeJS "City" scene afterwards but it just won't work and I can't figure out why. One error does show up in the console which is this: Uncaught ReferenceError: container is not defined at HTMLDocument.<anonymous> (index.js:426:1) .....Aside from that ^ , nothing else shows up. TLDR: I launch Electron > CSS Intro plays from start to finish > it's meant to transition into the ThreeJS "City" Scene. That's My goal. Note: I'm trying to keep the CSS Animation and ThreeJS Scene sequential, not concurrent. This is what My index.html currently looks like: https://pastebin.com/ZVCXJw0C This is what My styles.css currently looks like: https://pastebin.com/UAsyMDye (Lines 1-43 is just styling for some text in the ThreeJS scene, iirc) This is what My index.js currently looks like: https://pastebin.com/3HvxS63K (Lines 385-448 is the animate/animation section, the rest (above) is the ThreeJS scene really.., lol) If anyone could help Me out, I'd really appreciate it ? Thanks guys, hope to speak soon! -XIPureGamer

Hi Cassie, I completely understand what You're saying / where You are coming from and I respect that and furthermore, I didn't come here expecting anyone to just recreate the whole thing for Me. If that's what people are thinking whilst reading this incl. the comments above then, well, I dunno what to say. Maybe I misworded it, I dunno. If that's the case then sorry(?), I just want someone to point (/'nudge') Me in the right direction as You rightly said above. Also when You said "....the permission to copy the work from the original code authors.", I feel that this statement is wrong because I'm not trying to copy their 'introduction-animation'/'loader' or whatever people call that specific kind of animation, I don't really know what You would call it tbh. Anyway going back on topic, yes ok sure I said "replicate bit-by-bit, frame-by-frame" but I plan to add additional (vfx) features which I haven't mentioned in this post primarily because I plan to add them Myself once when I can get some help making the initial animation (See Video), I 100% don't plan to make it look like I directly copied Resn's animation, that is not My intention, at all. That's just a ****-move in My opinion, lol. I hope You understand where I'm coming from. Thanks, -XIPureGamer

Hi there @PointC, let Me try to rephrase what I need help with, I don't know where You are getting confused with what I originally wrote but apologies for any confusion nonetheless. ? Anyway, I'm trying to turn My current Codepen animation into the exact same animation that's shown in the video (Attached to My original comment) / what's on Resn's website. I was told by someone on Discord that the guys who made that Resn website may have used GSAP to create what's shown in the video in My original comment, do You see what I mean this time? Thanks, -XIPureGamer

Evening everyone! I was wondering if someone might be able to help Me out with My rather messy HTML Code, lol. I should note that I'm still relatively new to HTML/CSS/JS/etc.. so go easy on Me pls haha Anyway, I'm trying to create/replicate a sort of.. "introduction-animation"/"loader" (Sure let's call it that for now, I guess ) (Idk what it's properly called) for My website which is similar to the one on this website that I recently discovered: https://resn.co.nz/ If You go ahead and visit the website linked above or just view the attached video (To this post/comment (Which is quicker and faster)), that is what I'm trying to replicate bit-by-bit, frame-by-frame > exactly how it looks and functions on the website. TLDR My goal is to get help from someone here (hopefully) who can help Me recreate that "introduction-animation"/"loader" or whatever You wanna call it which will then transition into a Three.js JavaScript/CSS scene that I've already made as part of My website. Finally I should note that I did try making the first part of the animation as shown in the Codepen link buuuut.... yeah, it.. could be better to say the least (As You can probably tell). So, after listening to Me talk for ages (lol), if anyone could help Me out, I would really appreciate it! Thanks y'all! Resn.co.nz-IntroClip.mp4