Jump to content
GreenSock

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!

Dipscom

Moderators
  • Posts

    1,508
  • Joined

  • Last visited

  • Days Won

    58

Everything posted by Dipscom

  1. Dipscom

    stop the scroll

    That's a good start. From what I can see here, reading your code, it still is expected behaviour. As mentioned before, you cannot stop the scroll, so, while the code works in the first scroll, as soon as you scroll again, the windown will naturally scroll as there's nothing preventing it. Even your if() statement inside the refreshScroll isn't doing anything at that point as you toggle the firstTime variable to false thus, that block of code inside the is statement no longer runs. I am sorry I can't do much other than point issues out, I am a bit under other stuff at the moment and can't spare any time to try and tackle that myself. My suggestion to you would be - following Blake's smooth scroll idea, to have your main element body fixed, listen to the scroll event and set a flag 'shoudScroll' then you toggle that flag true or false. While true you translate the fixed element up or down according to the scroll event, while false, you don't.
  2. ... and women. Let's celebrate them ladies as well
  3. Hi @thepooltable, Welcome to the forums! The answer to your question is: It is possible. But I have a question for you: why would you want to re-write all of that logic yourself instead of adapting that code to take in touch events? Also why you say 'definitely not verletjs'? That is the first place you should look if you want to replicate what it is doing. The code is public in GitHub, it's just a matter of going over it and locating the logic that creates and handles the IK (inverse kinematics) system.
  4. Dipscom

    stop the scroll

    Hi @benoit! I'm not sure this is GSAP related at all... But I think I get what you are asking, correct me if I am wrong: You want to stop the scrolling once you hit the height of the block element (400px in your example) for one second, then you want to enable the scroll back after that second. As noted in the StackOverflow answer you have linked to: the scroll event cannot be cancelled. It will also mean, it cannot be interrupted, in another words, you can't stop the scrolling that is already happening. You will not be able to stop the scrolling window at the 400px mark and then continue after that. The one thing I can think of is to snap the element on the position while the rest of the screen scrolls or, completely hijack the scroll right at the very start and force the user to scroll to your desired location. I am afraid I am not versed in the dark arts of scrolljacking so, you will either have to search online for some tutorials or someone else might offer insights. @OSUblake's smooth scrolling thread might be a good start, also.
  5. Ooooo.... Eval is dangerous... Be very, very careful with it. (But is a super simple way to achieve the required results)... Nice idea.
  6. I wouldn't call it stupid. More like wishful. It would be great to have that. But, having said that, you could, in theory build your own Tween factory that reads such string and spits out an actual GSAP object. So, really, it is possible, it's just not in the library. You could create your own plugin.
  7. Hey @MarioLapone, Do you see why your code doe not work? What you are doing is trying to add a string into your tml. You can only add a Tween, Timeline or a function into another timeline. GSAP is smart but not omniscient. It doesn't know that string you have passed is meant to be a Tween. That it should parse the string and convert into a Tween/Timeline object...
  8. It is possible... But I'm not sure I'd go this route. It feels full of little bits having to be aligned correctly and does forces whoever is working the code to really know his way around both Vue and GSAP. It really feels too flimsy and prone to breaking. Then, you will have to create a store when things get more complicated and nesting deeper in order to be able to control it all. All in all an interesting challenge. I'd think there are more that can be done with Vue's transition and component system. I'm just not too hot with it yet.
  9. Hi @martis! I've got some experience with Vue but none whatsoever with nuxt. The way I structured my last Vue project was having the animations totally separated from the actual components - The oposite to what you are asking... - But in modules that could be accessed from different points. Something like: > folder: animations > > Shared.js > folder: components > > Component.vue The the code would be something like: // Shared.js export default { dur: 1, svgDecoratorIn( el ) { const trg = el + ' path' return TweenMax.staggerFrom( trg, this.dur, { drawSVG:'50% 50%', }, 0.2 ) } } // Component.vue <template> <div> <transition mode="out-in" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" > <router-view></router-view> </transition> </div> </template> <script> import Shared from './Shared.js' export default { methods: { enter(el, done) { this.$nextTick( function() { Shared.svgDecoratorIn( '#targetSvg' ) } } } } </script> Obviously this is a massively oversimplified version of it but I hope it gives you an idea. I would then make small flexible animation functions that would return a new Tween or Timeline based on the given element as an input. Those can be used to create more complex timelines, be called by parent components or children components. The catch, to me is making sure the desired component exists in the DOM before calling the animation functions. I'm guessing Scene1, 2 and 3 don't all get loaded/rendered on page load. An alternative technique, that I just thought of, if you really must have the animation encapsulated in the component, is to save your component timeline in a variable and $emit that up to the parent component. The parent component then, would grab the timeline from the payload and push into a master timeline of its own. I need to have some lunch now but will try and have a proof of concept setup when I am back... Watch this space.
  10. Yes but you will need to calculate who's visible and who isn't on load. Either by working out the size of the visible area and visible elements on the screen or by using the something, something API ,that I know exists but cannot for the life of me remember the name, I think @Jonathan knows it. @OSUblake is bound to know as well. Then, after you have worked that out, you can add the rest of the elements to your scrolling events. It should do the trick. Apologies for not making a proof of concept but I'm short on time now.
  11. Is the sound that is not working? The reason for that is because on iPhones you cannot autoplay sound. You can only play sound with user interaction. How about you show a button after the door opens, then you play the sound if the user presses that button?
  12. Hey @Jayson! Welcome to the forums! Not to worry. It will actually be a good stepping stone for you to get a CodePen account (or in any other online live editing site) for it will give you a nice easy place for you to prototype, make it super easy for you to collaborate and help others help you. If you don't have one, make an account, CodePen has a free one, once you have it. Create a new pen ( button on the top right corner) and you will see the screen split into two columns. One is the code editor, the other the result of your code. The editor is split into three sections, HTML, JS and CSS. Drop your relevant code in the associated section. For the HTML you only need to place what is inside the <body> tag. CodePen will add all the rest. Finally to add GSAP, click on the 'settings' (again top right) button, once the modal is open, click on the 'javascript' tab and look at the bottom, there will be a 'quick add' dropdown. Choose Greensock TweenMax and you will be all set to go. We'll now be able to fork your code, tinker with it and offer suggestions.
  13. This Pendantinc Police here is horrid.
  14. Same here, just back from lunch. Sounds like we're on the same timezone.
  15. Right @mdelp, this is what I manage to get out of my buddy. fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.site-main', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, And then: fadeOut: function () { var deferred = Barba.Utils.deferred(); TweenLite.to('.barba-container', 0.4, { onComplete: function () { deferred.resolve(); } }); return deferred.promise; }, Whether it works or is of any help, I have no clue. I offer no warranties or endorse this product. I'm just the messenger.
  16. That's not really a hack. That would be the way to actually mimic the movement you are after because you will need two points to move away from the starting corner in order for the motion to be the same. Another alternative is to have a circle with four point and push the 'curve handles' so far away that they make it look like it is a square. I would recommend @Sahil's suggestion as it will give you more control - for example, it would make it easier to have a rectangle instead of a box.
  17. Hi @Syniky, Welcome to the forums. That is because 3D transforms are not really supported on browsers. At least not yet. In order to have your doors rotate in the Y axis, you will have to separate them into DOM objects. That way you will get the rotation as you expect.
  18. Hi @heftzwecke, Welcome to the forums! And I hope you have managed to get some rest with your power nap. Have you got any responses from this post? Do you still need a hand? I'm around most of the day today if you're still scrambling.
  19. As you're using TimelineMax, there's no need to use a function to have a back and forth repeat. I only used that because I assumed you wanted to trigger a reverse when something else happened. Nesting timelines is the way to go. You will be able to create crazy complicated sequences without losing your mind and ending up with 5 kilos of spaghetti. If you feel you can handle moar awesomeness: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca Well, if the two of you are on first-name terms, surely you can sweet talk her into understanding the value of some charity.
  20. What doesn't reverse? Also if you use a .fromTo on your countup, it will always count the same set of numbers by just repeating it without the need to reset any variables.
  21. You know up to this day I still don't know where this countItUp is being used... In any case, you're triggering a setInterval on start of your Tween, there's nothing linking them together. The setInterval has no idea what the timeline is doing and so, cannot react to anything it does. If you want to count up some numbers while the tween is playing, you're better off by having GSAP do it for you.
  22. Welcome to the NoFreeTimeClub. It isn't the CommaClub... But it has its perks as well. Black bags under the eyes, sore back, grumpiness...
×