Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Aleksei

BusinessGreen
  • Content Count

    41
  • Joined

  • Last visited

Community Reputation

15 Newbie

About Aleksei

  • Rank
    Advanced Member
  • Birthday 11/29/1984

Contact Methods

Profile Information

  • Gender
    Male

Recent Profile Visitors

1,633 profile views
  1. 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 y
  2. 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!
  3. 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.)
  4. 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 w
  5. 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.
  6. 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.
  7. 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.
  8. 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
  9. @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.
  10. 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.
  11. Having exactly the same issue in all browsers. Looking forward to the next release.
  12. 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 }); }
  13. Oh, right, it's just a stupid mistake from my side ☺️ But why the bar doesn't actually animate back to 1?
  14. Cool approach, Jack But OSUblake's example fits me better because I'm dealing with canvas animation. Nevertheless, I've stumbled upon another problem here. The bar.degree variable acts in a strange way. Please, check the Codepen example below. Here I use loadProgress() function to simulate XMLHTTPRequest's .progress() output. The numbers below the canvas preloader are showing the length of progress bar on each update. As you can see the weird thing happens at the end (after 80% is loaded). The bar stops and the actual value reaches 0. I can't get what causes this. This didn't happen
  15. The question is regarding the GSAP 3. How can I interpolate between two values using gsap properties such as easing, duration, delay etc?… And I don't need actual target object to animate. I've embedded Codepen example of how I did this before, with TweenMax. But when I use gsap 3 syntax JS console generates error telling that target is undefined. I assume that .interpolate() utility may come in handy here. But I cannot understand how to apply it in this case. Please, help
×