Dipscom

I would like to welcome the two of you to the Shock 'n Awe Club - Which I am the president. We do a lot of skulking around and a lot of falling off our chairs by simply reading the posts here.

Oh noes! You have found the kink on my armour! The reaction to your question: ~ What is he even asking? I don't know!?!?! ~ What I am going to have to build - excuse my language if that's not the correct one - is the little distracting thing that distracts you while the browser does its thing while talking to the server. Which, I assume, is helpful to our DD77 colleague here. If you have insight to offer, I am all ears. And eyes.

And we enter in a new room in this dungeon of discovery... Although the initial battle with the loader has not gone as hoped, the one against the slider has not been too bad. Here is something I managed to whip up from this big project I am working on: The original one is a carousel - I am striping some bits out from it to make it simpler. Again, when I get some downtime I will work a bit more on this and report back. Same with the loader... I will eventually have to build an asset loader for the site anyway so, I'll adapt it to a more generic setup and post it here. We'll get there, folks!

Someone get me some LSD, let me have this on full screen for 8 hours then, come drag me out or feed me some food intravenously I'm going to reach nirvana!

Sooooo... I now have to create a loader and a image slider myself for a project I am working on. Let's us combat this Hydra together and chronicle it here (and in a blog post somewhere when I find the time) ! Stay tuned!

The first step into the darkness... Already demons of failure assault me. The bar doesn't start moving until too late, the actual code doesn't seem to work outside the debug mode of codePen - I imagine it is their order of loading, the JS doesn't run until all the other elements have loaded and so, ruins this version of it. And this is already far more convoluted than I expected this to be... Let us see what the next room in this dungeon will bring. @PointC I thank you for the encouragement and the brownie points. You know I am keeping tabs on them and one day I shall come to your door collect. @Visual-Q Aye! A man has to got to do what a man has got to do. And nowadays, a man has got to do also what a woman has got to do. ps: Lovely comment on how you defer loading your background images. I never thought of such simple thing. Great to see others chip in with their ways of doing things. We all end up learning a thing or two.

I shall take on the mantle and see this issue resolved! May the GODS bless me with wisdom to navigate the darkness! It will also be a very long jouney with very small steps. First step bellow.

Oh @DD77... You really make it hard for us to help you. I know it sounds wingy but you need to make a bit more of an effort to make it easy for people to look at your code. You need to make as simple as you can otherwise you won't get attention. We only have so much time to spend around here that we cannot afford an hour or two going over one person's code if there is four or five others with questions and a much smaller code base to look at. Also, by making it as small as an example you can, you will probably end up seeing ways of simplifying your own code. You didn't even change the title of the pen... One does not know which pen one is looking without refering to the thread. There is so much code in both of your examples that I think your issue is that you have tangled yourself and have too many side-effects in your functions that are causing trouble. Your preloader, for example: - You have a tween inside 'loadProgress' targeting 'progressTl' - But up to that point in your code there is no object declared with a name of 'progressTl'. - Then, afterwards, you do define a 'progressTl' with an onUpdate and an onComplete calls. Why are you returning a timeline on your onComplete? It's not doing anything that return statement. And on your onUpdate you are calling a progressUpdate but, in there you are calculating a 'loadingProgress' variable that you already had calculated in your previous loadProgress function. I have no familiarity with jQuery so, I don't know what the .progress() bit is doing but I guess it is calling the given function a set number of times. Is it calling it everytime the loading of the image updated? And all of that is without even looking at your slider example...

@DD77, hey man, both links go to the same pen.

Just to chime in @Visual-Q, some scroll events, depending on how they were trigered, cannot be cancelled. It might be outside GSAP's reach. @GreenSock himself will be able to confirm that. In the meantime, this article has some useful information about how browsers handle scroll. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97

*bows to the floor*

Hey @DD77, I am sure we can get to the bottom of this if we break your issue into smaller steps. Let's start by just having a GSAP-powered image loader. Can you set a pen that only loads the image with the animated loading bar?

I would second that. As the other two gentlemen have mentioned, it's a pretty common SPA technique, where you fake navigation manipulating the browser's history but do not refresh the page itself, therefore, you can have some elements stay in place while others come and go. Vue is my personal preference, for no other reason than being a personal opinion. React is another one, Angular... Preact... There seem to be a new one every other week. Throw a stick and pick the one that falls from the branch, you should be fine with it.

I do not know what you are insinuating, sir.

Hi @harp, To initialize a timeline that is paused from the get go, all you need to do is to pass a true to the paused attribute: var myTl = new TimelineMax({ paused:true })

I can tell you now, next to no one is going to look at it if you give us a whole live staging site to debug... Throw a Pen together that mimics what you need to achieve with the issue in it. Then, plenty of eyes will flock to your issue. If, for whatever reason, you can't replicate the bug outside then, you got something in your code that's blocking the plugin.

Ah @Tootall you have just vindicated @OSUblake with this now... You got all the strange behavior because the technique I showed was not appropriate to what you are now trying to achieve. You see why Blake made the comments and why they are correct. And I now have to live with the shame! Oh the SHAME! Dang.

Would it be possible to see a setup where that is occurring? Doesn't need to be your full blown project, the smaller the example the better. How about a tiny git repo with a bare-bone installation, one component throwing the fit? I too don't see why it would not work of you are bundling everything in.

We'll make the web a better place once site and forum post at a time.

Totally. There is plenty of things along those lines out in the world. In a way it is good for the likes of us as it makes sure we will always have work to do improving those sites. On the other hand, it's pretty bad experience if the site that's doing it is one that you and other millions need to use frequently.

@OSUblake that is one sweet movement here, sir.

Aye, indeed Blake. Your comments are wise and welcome. The suggestions I made are specific for this particular case, mouse only hover and local coordinate as stated in the brief. The creation of the tweens outside the mousemove event is indeed a point to be noted. But give us mortals a break, we don't want to twist normal people's brains with having to calculate the physics of easing right in their first question, do we?

Hey @Kota! Welcome to the forums! Have you got a reduced code example we could pick apart?

Yes you can, you just have to make sure you are targeting the specific follower. See bellow for the updated example:

Hey guys! Mikel did beat me to it but I have a comment to make: Be aware of where your element is. Because pageX/Y, clientX/Y, offsetX/Y (amongst other attributes) all yield different values depending on a series of factors: size of the window, size of the screen, how much the page has scrolled and so on.