Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. Hi there! I am reading this thread but finding it very hard to picture what it is that you mean by " continuity" . What in Diaco's example does not fulfil your needs? Another question: When you stated that you wanted the mouse pointer should be "in sync" with the draggable knob, do you mean you want to lock the mouse pointer to the location of the draggable object? If that is what you want, you will not be able to achieve it. You cannot take over the mouse pointer. The best you can do is fake it by hiding the mouse cursor and then adding a fake cursor on top of the draggable object, locking that fake one onto the position you desire.
  2. I have no experience with angular, is there any significant change from one version to another? It really sounds like it's an issue with the bundling of your project rather than GSAP.
  3. Hello! Videos can't autoplay with sound on. Set your video's muted property to true and it should work as you have it. Video with sound can only play if the user interact with it in a meaningful way. A click or a tap. Mouse hover are not classed as intentional interaction as one can easily hide nefarious code to play annoying sounds in such interaction without the user wanting it.
  4. Nope, sorry mate. Still not seeing it. I'm looking on a Mac 10.13.4 and Safari 11.1 Nothing remotely like what you describing happening here. Maybe your graphics card is being funny? Do you think you could check on another Mac on your end?
  5. I too cannot reproduce it at all. Safari has an issue with fixed positioned elements and rendering context. You would have to create an explicity rendering context to the said fixed element to make sure it would be placed on the correct z depth. Although I don't think this is the case. I did find that you are setting up a few too many timelines that could be removed and you seem to be tweening the elements to their natural colour, maybe you want to get rid of that bit and tween them FROM whatever colour you want them. Maybe that'll help? As @GreenSock said, it's probably nothing to do with GSAP.
  6. No need to thank me, you did all the work. You should pat yourself on the shoulder. I am just parroting opinions here. Go Forth and Tween!
  7. Indeed, there is! It think you are correct in your investigations as it makes sense, behaviour-wise. To prevent that all you would need to do is check if the timeline is active (the playhead is moving) with the aptly named isActive() method. Then it is just a matter of amending the overlap by the desired amount: let observer = new IntersectionObserver(function(entries, self) { entries.forEach(entry => { if (entry.isIntersecting) { let overlap = '-=0.3'; if(tl.isActive() === false) { overlap = '+=0'; } tl.to(entry.target, 0.5, { autoAlpha: 1 }, overlap); self.unobserve(entry.target); } }); }, config);
  8. Hello, hello! Happy to hear you're getting somewhere. Nice demo, by the way. And super helpful. Once again, I am dabbing in without full knowledge of what's involved but, such is life. No dare, no learn. See that you are creating a brand new timeline on every iteration of that forEach loop you have. I don't think that's needed. You can just have the timeline itself initialized outside that loop and only add a new tween inside it once it is visible. And as GSAP just plays the timeline automatically, every time a new tween is added into the timeline, it will just play that tween. Your new code would be smalled as well because you don't need to be incrementing anything and won't be initializing new timelines unnecessarily. // no longer needed // let incrementalDelay = 0.5; const tl = new TimelineMax() let observer = new IntersectionObserver(function(entries, self) { entries.forEach(entry => { if (entry.isIntersecting) { tl.to(entry.target, 0.5, { autoAlpha: 1 }, "-=0.2"); // make use of the relative position parameter to create the overlap self.unobserve(entry.target); } }); }, config); And I think you did a great job here.
  9. Hi @Dennisat, welcome to the forums! It's very hard to troubleshoot in the dark, can you create a reduced case demo? CodePen or JsFiddle or anything where we can see and manipulate the code? Otherwise, we have no idea what might be involved in your situation that may or may not be interfering.
  10. Hello @chris_hengst, Welcome to the forums! I'm not a sound designer nor have experience with sounds and the web other than having the occasional background elevator soundtrack added to a cheesy site. But, I think this issue of yours will be more a case of the "sum total" of the things that are going on in your app than a GSAP thing. GSAP alone only, at its core, just crunches numbers, it won't touch your sound files unless you tied them to a timeline and, even there, it won't cause it to play unless you have conflicting code trying to play and stop said timeline at the same time. As you said yourself, you're recoding it all. Better to wait until you clean your codebase up first before spending time troublesooting something that might go away after the spring clean.
  11. Alive? We can say so. Well? I shall look for the future before answering this one. Not quite out of the woods yet but getting there.
  12. Green is the top level tier @Sahil, not diamond... And then, inside the Green spectrum, you have other levels... Light Green, Pale Green, Vivid Green, Deep Green... Up to the Level of Green Sock - This one, is unattainable. One can only hope to achieve the mark of Sock Green.
  13. Hello! Time for the "early morning shift crew" to chime in. This might look a pretty simple setup but there are a few tiny nuances that might make the logic a bit brittle here. Let's unpack the instructions for the browser. ------------------- Case 1: User: Click 1 - "Play" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, play. Timeline: "Ok, let's go", * Elements move to x:500 * WORKS ------------------- ------------------- Case 2: User: Click 1 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, reverse. Timeline: "Ok, let's go", "hum... I'm aready at the start. No need to go anywhere". DOESN'T WORK ------------------- The solution to case two would be to tell the timeline to go to its end before reversing it. tl.progress(1).reverse(); But that alone brings other problems. ------------------- Case 3: User: Click 1 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, go to your end and then reverse. Timeline: "Ok, let's go", * Elements jump to x:500 *. * Elements move to x:0 * WORKS ------------------- ------------------- Case 4: User: Click 1 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, go to your end and then reverse. Timeline: "Ok, let's go", * Elements jump to x:500 *. * Elements move to x:0 * User: Click 2 - "Play" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, play. Timeline: "Ok, let's go", * Elements move to x:500 * WORKS ------------------- ------------------- Case 5: User: Click 1 - "Play" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, play. Timeline: "Ok, let's go", * Elements move to x:500 * User: Click 2 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, go to your end and then reverse. Timeline: "Ok, let's go", * Elements are at x:500 *. * Elements don't go anywhere * DOESN'T WORK ------------------- And I could go on, and on, and on... With the many little variations on which order you click the buttons. They will break in several places. There are ways to get around that but it boils down to how much flexibility you want/need. The best way is to do what @PointC has suggested and have initialization separated from the control of the timeline. You can just initialize everything at the booting of your page/application and after that, only trigger the play/reverse. Another way is to set the start and end position of said animation with .fromTo() if you know where the tweens will always start and end.
  14. 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.
  15. 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.
  16. 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!
  17. 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!
  18. 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!
  19. 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.
  20. 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.
  21. 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...
  22. @DD77, hey man, both links go to the same pen.
  23. 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
  24. 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?