Jump to content


  • Posts

  • Joined

  • Last visited

About Aleksei

  • Birthday 11/29/1984

Contact Methods

Profile Information

  • Gender

Recent Profile Visitors

2,923 profile views

Aleksei's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. Oh, right. I missed this fact. Thank you! I'll use your advice.
  2. Hi! I've noticed a strange behavior of element when animating its height from "0" to "auto". In the Codepen attached you can see how the bottom padding of the <main> tag jumps at the end of unfolding animation. I've found out that this problem happens because I use box-sizing: border-box in CSS. If I switch to content-box it solves the problem, but is there a way to fix it while keeping the border-box? Please, advice. Thank you in advance.
  3. Hi! I’d like to introduce you my personal project — a popup library, which uses GSAP 3 as animation engine: liteBox.pro It could be just another popup library among the hundred of others, if not these two points: This library doesn’t use such dependencies as: jQuery, image files and CSS. You’re dealing with only one .js file. All interface graphics is generated dynamically. There is an online constructor which allows you to design your popup visually. So you don’t need to read documentation and study API to start using it. Because the documentation is not finished yet You, guys, are the first whom I’m writing this about. Because, you, as a people who use GSAP, will benefit of this the most. As long as you’re already using GSAP in a project you’ll only have to add a small 29 kB file to your stack to make the popup work. Please, check this small introduction video of the project: P.S. And thank you very much for helping me to quickly migrate from GSAP 2 to GSAP 3 by answering my questions in this forum. The matter is that GSAP 3 was released right before I was going to publish the popup But I was too excited about GSAP 3 to publish popup as it was (on TweenMax).
  4. Got it! Thanks. Sorry for silly questions — don't have enough experience working with ES6 modules. I was afraid that if I import GSAP to both files it will double the size of the bundle. But Webpack deals with it and uses GSAP only once. Thanks again!
  5. Ok, I’ll check my files once again. But what if I want my_module.js to use GSAP, but don’t import it into the module itself? Let’s say, my_module.js, together with GSAP, is just one of many modules used in another JS file. (Because it seems to me that I tried this approach and it didn’t work.)
  6. Hi! I have gsap installed as a node module. And I have Webpack which gathers all modules from stack.js and outputs minified bundle. When I load the JS bundle into the page returns error that "gsap is not defined". The gsap modules are added because bundle's size is over 90kB. stack.js import { gsap } from 'gsap'; import { CSSPlugin } from 'gsap/CSSPlugin'; import { Draggable } from 'gsap/Draggable'; import { InertiaPlugin } from 'gsap/InertiaPlugin'; gsap.registerPlugin(CSSPlugin, Draggable, InertiaPlugin); import '../build/my_module.min.js'; my_module.js (if we exclude all ES6 wrapping) looks like this: let moduleFunction = function() { 'use strict'; const hello = 'hello!'; console.log(hello); window.hello = hello; gsap.set('body > div', { backgroundColor: '#333333' }); } moduleFunction(); Whenever I call gsap methods it appears to be undefined. If I exclude gsap from my module everything works fine. Spent long time online trying to fix this, but nothing helped. What I'm doing wrong? Thanks!
  7. It works. Thank you, @OSUblake! By the way, I had a mistake in this line if (this.endX < 300 || this.endX > -300) { previously. There should be &&. But it's fine — the issue is still reproducible.
  8. Hello, it's me again with GSAP 3 migration I have a case, when I check Draggable's endX and if it is smaller than I need I return the dragged object back to original position. In the previous version of GSAP, when I applied TweenMax.to to the dragged object it "rewrote" the Draggable's behaviour and did what I want. But now, after gsap.to finishes its animation the Draggable continues its work and places object into the endX coordinate. Please, help. I couldn't find a proper "stop" method for Inertia in the Docs.
  9. Yes! It is smooth now. I guessed that the problem is somehow related to the switching from translate to translate3d, but didn't know that the fix was so easy Thanks.
  10. Hello, Jack Here is my demo: https://codepen.io/nordskill/pen/YzPWZyN And just in case you won't be able to reproduce the issue, here is the screen record from Chrome browser on Windows. It is 60 fps. You can see that when I start throwing picture there is some jerking animation at the beginning. Sometimes it even doesn't allow image to slide to the endX or endY coordinate and image stops. But usually, after image moves a bit, then the motion becomes smooth. I've noticed this problem in several browsers. On Windows: All browsers based on Chromium engine have this issue. Firefox seems to animate smoothly. And the Edge browser is somewhere between "Chromiums" and Firefox. There is a bit of jerking, but not so obvious. On OSX: Chrome browser animates well. And Safari acts like Edge on Windows. Here is the same demo with GSAP 2, which works fine in all browsers: https://codepen.io/nordskill/pen/QWwEdgq screen-record.mp4
  11. @Karen, you can add timer after the mouse is clicked. And this timer will stop timeline animation whenever you want. For example, inside 'mousedown touchstart' event listener add setTimout after your tl.start() method, like this: setTimeout(() => { tl.pause(); }, 400); 400 it is your animation timing, which is 0.4. Also, I recommend you to replace tl.reverse() with a new morphSVG animation which will morph into the original state. Because a simple reverse looks unnatural.
  12. Regarding the Draggable3 preview: I noticed that in combination with Inertia plugin the dragged element is jerking at the beginning of the drag. I don't know whether it is known issue or not, but just in case.
  13. Having exactly the same issue in all browsers. Looking forward to the next release.
  14. I found the solution for the case. I've changed the animate() function in the way as shown below. But I still don't get what happened in the previous example and why the bar freeze. function animate(float) { let duration = 1; let hideFunc = null; if (float >= 1) { duration = 0.2; hideFunc = hide; } gsap.to(bar, { duration: duration, degree: gsap.utils.interpolate(0, 360, float), onUpdate: drawState, onComplete: hideFunc }); }
  15. Oh, right, it's just a stupid mistake from my side ☺️ But why the bar doesn't actually animate back to 1?