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. You can do either way. Depending on the complexity of your animations is advisible to break into several timelines but I guess that is not what you are trying to achive here. What is it that you want? A button to toggle autoplay that if clicke the timeline plays completely? And if not, it pauses on those spots? If that is what you are after, instead of having those .addPause() calls, you call a function to check if the timeline should pause or not. See bellow. https://codepen.io/dipscom/pen/bydNew?editors=0011
  2. When you say "add slide autoplay" what is it that you are after? You added a bunch of pauses in your timeline it won't play thru the whole thing unless you remove them.
  3. I don't think what you looking at is a timestamp but it is just an integer that is used to identify the requestAnimationFrame. See the link: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#Return_value
  4. I can't spend too much time on this but my first suggestion is for you to the following: 1) Have separate pens for your two animations: One the bouncing animation you want to do, the other the bulb making progress. So you can be sure the animation is working as you desire. 2) Try and have a read at ScrollMagic's examples to get a better understanding of it and how to work with timelines, as is, you seem to be overcomplicating things a bit too much. 3) Only then, try and connect the animations with the scrollMagic. Here's a super quick fork of your example (thank you for the pen, it really helps us to help you). https://codepen.io/dipscom/pen/EzYxpr?editors=0010 Also, have a look at the changes I made to your HTML and CSS, it's subtle but helpful.
  5. Hi Vasu, Welcome to the forums! There's a lot of code there to read... How about you first explain to us what is it that you are trying to achieve? It will save us from having to guess.
  6. Well, you're not really doing what you say you want to do. You said you were calling a render() method passing a 'time' parameter and you said the capture library you were using is the one running on each render loop (which I believe it is the requestAnimationFrame call) but your code does not not reflect that. Currently your code break because you are calling your main timeline and passing it a 'time' variable but the 'time' variable does not exist. function render(time){ // Where is this time meant to come from? /* When you call render() at the bottom of your code, this time is undefined, which causes the main.time(time) bellow to fail but does not crash the application */ main.time(time) /* Then, here you are scheduling a new call to the render() function. Again, you are not passing any time variable to the callback, thus, nothing will work. */ requestAnimationFrame( render ); stats.update(); renderer.render(scene, camera); if( capturer ) capturer.capture( renderer.domElement ) } In reality what you want to do is use GSAP's ticker and call your render function from there as Jack initially suggested. It would be something like: TweenLite.ticker.addEventListener("tick", render); function render(){ stats.update(); renderer.render(scene, camera); if( capturer ) capturer.capture( renderer.domElement ); }
  7. It does sounds like Jack's suggestion of using the timeline.time(YOUR_TIME_HERE) is the way to go as you said you already have the time elapsed and wants the other library to handle the calls to the requestAnimation frame. Something along the lines: function render(time) { timleline.time(time); requestAnimationFrame(render); } Make sure you have your timeline paused from the start and it should be fine. Also, I prefer to schedule the call to requestAnimationFrame at the end of the block to make sure all the logic is complete prior to potentially calling it all again.
  8. The bit I was trying to bring to your attention was the fact that you had the fps set to zero. With such setting, the tick will never run, right? It's zero. So, no matter what you do after it should never trigger because the engine will not update itself as it's zero frames per second. Going back to what you are trying to accomplish. I've updated the Pen I created for you above to have a button that runs the animation just like you described. The reason it was not working as you thought it would right out of the box was because of the request animation frame. Again, you don't know when that method is going to be called, it might be immediately, it might be a few milliseconds later. In computer speed, that makes a big difference, specially if you were messing around with how frequently GSAP is calling its own tick method. Look at this excerpt from the documentation on the ticker: In order to get the behaviour you want, you need to turn off the request animation frame and use the setTimeout version of the tick. That way, you are forcing the tick to be fired at a regular interval, not matter what, even if the browser is not ready to render the frame. Which, is actually worse than the request animation frame as you might end up clogging the main thread depending on how much code you are running. Having said all that, it does work. Refer back to the pen above and you will see it animating with two different framerates. Happy Tweening!
  9. As you're not at a master level yet, you can't commit hara-kiri. You can only chop off a toe.
  10. Yes, see bellow. https://codepen.io/dipscom/pen/749b1bbbb157f1c86e6a6ccc7fcc06b6?editors=0011 Do bear in mind, you are only changing how frequent GSAP fires its tick call, it will have no effect on anything else beyond GSAP. Here's a challenge for you: Can you see what I have done differently from you? If yes, why did your code fail?
  11. Now you're missing a "." before the methods... ? .to('#indicator', 0.5, { width: '40%', ease: Power0.easeOut }) to('.pagination-bar', 0.5, { // You're missing the "." here backgroundColor: 'green', ease: Power0.easeOut }) Maybe, take a little break. You might be overworking yourself.
  12. Hey Yulia, You just forgot to add jQuery to your pen. Your code is fine and works as expected once you add jQuery to it.
  13. Hi Pons, Welcome to the forums! I understand your logic of trying to reduce the fps to improve performance in embedded devices but I don't think changing GSAP's tick frequency will add anything to it. The main thing is that GSAP uses Request Animation Frame for its timming and that is triggered by the browser (or whatever is environment is containing your code). If your environment has a fps of 40, GSAP will run at 40 frames per second, if it has more (as browsers usually do) it will run at such framerate. Moreover, once the tween is done, changing GSAP's fps to 0 will not give you any performance benefit as GSAP is not controlling the actual rate of frame refresh on your device. Does that help?
  14. Hi there, There is not such thing as a GSAP WordPress plugin. GSAP just works™️ there are a few threads in the main forums where people ask how to integrate GSAP with WordPress, do a quick search and you'll find some information. But the long and short of it is that you just need to enqueue it in your WordPress hooks like any other external JavaScript library Happy Tweening
  15. It is not that TweenMax doesn't allow you to tween more than one property at once in the same Three.js object it's the fact that the properties in Three are individual objects themselves, GSAP doesn't know they are related to the same parent entity, it only sees them as they are, individual objects. I have never heard of insertMultiple(array) is that even a GSAP method? Where did you find it? To me, it appears that your animation gets jittery after the first play because you have a bunch of Tweens running at the same time, somehow, inside the timeline but that are not children of the timeline. However, if you were to create a mini-timeline for each of the sections you want to animate the position and rotation together and then, add that to the master timeline, you will see that the animation plays normally and repeats normally. You can even, instead of using a onComplete call, just use the repeat property from TimelineMax. for (var i = 1; i < miroKeyframes.length ; i++) { var keyframe = miroKeyframes[i]; //current keyframe var dur = keyframe.t - miroKeyframes[i-1].t ; //auto-duration var tl2 = new TimelineMax(); tl2.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, z:keyframe.r.z, ease:Sine.easeIn}, 0 ); tl2.to( obj.position, dur, { x:keyframe.p.x*20, y:keyframe.p.y*20, ease:Sine.easeIn}, 0); tl.add(tl2); }
  16. Right everybody, I've taken some time to dive in and look for the most distilled way to import GSAP plugins into Nuxt. Bellow is a repository with the bare minimum needed to run GSAP and ANY of its plugins. I have only left Draggable and some commented out ThrowProps to avoid excessive code confusing people but the gist of the thing is the same. The summary: Use the UMD version of GSAP. It really works out of the box if you do so. All of the other errors I have seen people report here seem to stem from the fact that people (myself included) have been using the ES modules version. For my part, @nicoladelazzari , I apologise as I gave you incorrect information. The error you posted the screenshot of was caused by using the ES modules version of GSAP. The example repo: https://github.com/dipscom/nuxt-gsap-plugins
  17. Hi qqignatqq, Can you elaborate on your question, I am not sure I understood.
  18. Dipscom

    Toggle menu

    Right, ok, now I think I am starting to get. What you want is to only run the JS code if the media query condition is satisfied. For that you need to use media queries in JavaScript as well as in your CSS. The example bellow should be what you are trying to accomplish. https://codepen.io/dipscom/pen/mgxOvM?editors=0011
  19. 'Ullo! A long time ago I made this test: https://codepen.io/dipscom/pen/yJQgVO It uses an older version of GSAP but it should show you one way of achieving it. Happy Tweening!
  20. Hi H0BB5, Can you show us how you've imported the CustomEase plugin? And, as asked by Jack, did you use the version for the NPM bundling? I do agree with Jack, it does sounds like it's something else, not related to GSAP. Is webpack compiling correctly or are you getting errors in your terminal?
  21. Dipscom

    Toggle menu

    Again, I am at a loss here. I open your codepen, resize the window to be smaller than 768px, the toggle appears, I click it. It animates. I click it again it closes. I resize the window to be bigger than 768px, the toggle disappears. I resize it back to be smaller than 768px, the toggle appears. I click it, the menu opens, I resize the window to be bigger than 768px, the toggle button disappears and the menu stays showing. I resize the window back to be smaller than 768px, the toggle button shows, I click it, it closes the menu. I can't think of anything else I could do with the toggle button and the size of the window. What is it that is not working for you? In more words. What are you expecting to see and what is it doing that you think it should not be doing?
  22. Dipscom

    Toggle menu

    Can you be a bit more clear? I have no clue as to what you are expecting when you say that. When I resize the screen, the toggle button appears and disappears as expected.
  23. Hi Harp, The events are being fired correctly, the code is executing as expected. You only have missed adding the correct commands on your functions. You need to review what they are supposed to do and write more logic to handle. Here's an example: let startTimeline = function(){ console.log("lets start..."); // When looking at the console, you can see this always runs loading.play(); // This will tell the timeline to play but, once the timeline has played once, it will stay at the end position unless you use .play(0), which will cause it to jump back to the very start. TweenMax.set(progressBarEL, { width: '0%' }); // Here you reset the progressBarEL even though this is meant to be the start of you animation TweenMax.set(heroEL, { opacity: '1' }); // Here you reset the heroEL even though this is meant to be the start of you animation } let restartTimeline = function(){ console.log("restarting..."); // Similarly, looking at the console, you can see this runs correctly when clicking loading.restart(); // You restart the loading bar animation correctly /* But you forget to reset the progressBarEL and the heroEL, the bellow should exist in your code TweenMax.set(progressBarEL, { width: '0%' }); TweenMax.set(heroEL, { opacity: '1' }); */ } There are other little bits in your code that are missing, I encourage you to read your code again, think of all the steps that should be inside each function to generate the behaviour you are looking for.
  24. Bottom line here is the context. "Poor performance" is relative. Is your user's computer going to struggle with that implementation? How much more interaction are you going to have going on at the same time? You don't HAVE to change your current code just because we said it's better to use transforms and opacity only whenver possible. Specially if it is working and not causing problems. There's no point on you spending hours on this when you could be completing the rest of your project. Just be aware that animating the background position is not as efficient as using translation. If your animation starts to get janky, that's a place for improvement.