BigHoot

Oh man I feel so ashamed... I don't even have the words. It's been so long I'm working on these animations that I'm loosing my mind. I've never touched this since the very first iteration of the image sequence and I had no problem until now. I just skept the possibility I messed the CSS. Now I have another confusing problem but I'm afraid is has nothing to do with GSAP but Three.JS ^^ Thanks again mate for your help ! ❤️❤️

Hey ! Thanks for the answer I'm sorry, I just did sh@!#t. I tried using the previous codepen I made for you but I forgot I changed few things here and there. It should be better now and clearer ! The #wrapper in the codepen also exists in my portfolio project and it basically takes everything but the loader. The goal is quite simple. If dom is not fully loaded, #wrapper is hidden and #loader is visible, when dom is fully loaded, #wrapper switches to visible, #loader switches to hidden.

Hi guys, I'm back for another question ! So today's problem is quite different. I've added another animation using three.js this time. This plus the images sequence makes the whole thing quite heavy to load (30mo average). So I wanted to create a simple preloader using DOMContentLoaded & window.onload as already suggested in a thread here. Yet, the gsap animation doesn't appear after loading time is done. The codepen I provide only shows a small portion of code but I tested my script on this : https://www.bighoot.net/ Since the codepen is fast to load, it's hard to guess a thing. Yet, when I tested on my own page, it does take a certain amount of time (roughly 6/7 second with my connection). So once again, if you guys have an idea, I'm up to it !

Dude, you're the best. Not only it worked with the hoot animation (300%), but I did understand what I was doing wrong. Thanks a lot brother ! Now I can stop banging my head against the wall and go to sleep, it's 6am in France :D. Thanks again for your support. This forum, I swear, is incredible.

Hi guys, so I'm back again now that I have some free times to do stuff like my portfolio. My problem is quite simple, I've made an animated sequence and pinned sections. The scheme would be pretty much like : - Animated Sequence #1 - Pinned section - Animated Sequence #2 - Pinned section And so on. The problem is : my first pinned section is overlapping the previous animated sequence, which I don't want. I'd like my pinned section to wait until the sequence is fully complete. I couldn't link my own animated sequence in codepen for an unknown reason. So I replaced it with Airpod's. If you wanna take a look at it : http://www.bighoot.net I feel a bit overwhelmed as I'm playing with functions I don't fully understand. I know you guys would be able to solve it quickly, but what would be amazingly wonderful is a lil bit of explanations ! I've seen topics here and there but I didn't understand much things (I'm a beginner in JS). Thanks a lot guys and keep up the good work, you guys are awesome !

Thanks a lot for your help bro, I'll try tomorrow and I'll let you know !

Hi ! Thanks a lot for your answer ! So yeah, you're missing something the same way I did. If you open the preview in a new window and then activate the responsive menu via F12, you'll quickly notice the problem. It creates a huge white space under everything when on mobile phone ? As for the parallax. I'm looking for a way to layer the sections to be precise. I've found this : https://codepen.io/GreenSock/pen/KKpLdWW But unfortunately, I wasn't able to integrate it myself in my horizontal website

Hi guys, first of all I'd like to mention I'm actually trying to do things way above my league and I have a lot of things to learn. I'm trying to create a reponsive horizontal website using react & gsap. I've tried many things before such as react-scroll-horizontal but I've felt like it'd be easier using GSAP considering I'd like to animate things in the future. I ended up finding this link in another post : https://codesandbox.io/s/lively-sunset-9ifwq?file=/src/index.js:0-228 So I'm running it right now but it isn't reponsive at all. It creates a huge white space at the bottom. Also I'd like to change from horizontal to vertical depending on screen size. If you guys got some hint, I'm all in. Also how'd you add background parallax into the sections ? Thanks in advance !