Jump to content
Search Community

Need some help making/designing a 'loader'(?) and/or 'introduction-animation'

XIPureGamer test
Moderator Tag

Recommended Posts


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!

See the Pen WNaKRWb by XIPureGamer (@XIPureGamer) on CodePen

Link to comment
Share on other sites

Welcome to the forum.


I'm not quite sure with which part you need assistance, but I've forked your pen and made a couple changes. I've used a label to animate the left/right lines at the same time. The opacity fade for line 3 wasn't working because it isn't an attribute - no need for the attr:{} wrapper on that one.


See the Pen f67666b18e77e03393f8937257465bfa by PointC (@PointC) on CodePen


Just FYI - no need for html and body tags on CodePen. You can just paste your core HTML into the top panel and the CSS and JS in the appropriate panels as well.


The use of labels is covered here:


Hopefully that helps. Happy tweening.


  • Like 2
Link to comment
Share on other sites

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? :)




Link to comment
Share on other sites

Hi there - We're happy to nudge in the right direction but we don't have the time to recreate work, or more importantly the permission to copy the work from the original code authors.

The 'curtains' look to be largely down to masking and the ease is likely expo.out, or a custom ease with a similar curve.

If you search for masking in the forums you'll get plenty of hits!

  • Like 3
Link to comment
Share on other sites

12 hours ago, Cassie said:

Hi there - We're happy to nudge in the right direction but we don't have the time to recreate work, or more importantly the permission to copy the work from the original code authors.

The 'curtains' look to be largely down to masking and the ease is likely expo.out, or a custom ease with a similar curve.

If you search for masking in the forums you'll get plenty of hits!

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.



Edited by XIPureGamer
Link to comment
Share on other sites

  • 2 weeks later...

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: 



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!


Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 


Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.


Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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


If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

3 hours ago, GSAP Helper said:


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

Edited by XIPureGamer
Additional details
Link to comment
Share on other sites

You'd really need to boil that down to a minimal demo and have a GSAP related question for us to answer. We just don't have the bandwidth to look through entire projects and 3rd party libraries.


Just FYI - looks like you're loading a really old version of TweenMax (1.20.3) I'd strongly recommend using the latest GSAP version (3.11.5)


If you have a specific GSAP related question, we're happy to help. Best of luck with your project.

  • 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
  • Recently Browsing   0 members

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