Jump to content

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

Search the Community

Showing results for 'overwrite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance
  2. I still don't understand. Are you asking for a mathematical equation that will allow you to convert a bunch of individual transform operations into their matrix3d() equivalent? And are you saying that you think converting it is going to somehow make it faster? You mentioned several times that "the drag becomes slow". If you're trying to solve a performance issue by defining the transform as a matrix3d() instead of a string of instructions, trust me - that will NOT solve the problem. I glanced at the performance profile in your link and there were massive hits on the rasterizer thread. That's almost surely the issue. I also noticed a few other problems: You're using an onmousemove handler and creating a tween in that handler which is highly inefficient. Be very careful about onmousemove - that can fire multiple times per requestAnimationFrame so it can be wasteful to constantly create tweens in that handler You forgot to set overwrite: true or overwrite: "auto" on your tweens that you're creating in that onmousemove. That's a BIG problem because you're constantly creating new tweens that are fighting with the old tweens that haven't finished yet. So if a user moves their mouse for 1 second, you could have 60 or even 100 tweens all fighting for control of the same properties of the same object. You don't need to set the transformOrigin and transformPerspective on every...single...tween. It'd be much more efficient to just gsap.set() it initially and be done. Idea: you could create a single linear tween of the tilt (rotationX, rotationY, etc.) of the element up front, pause() it, and then in your onmousemove handler you could animate the playhead of that tween. That may be more efficient. Anyway, I hope that helps. Happy tweening!
  3. Yep, totally legit or if you want to have GSAP automatically kill all other tweens of the same target when creating a new one, just add overwrite: true to your new tween and BOOM they're nuked. 👍
  4. So I kept tweaking the code a little bit on my original codepen and I decided to wrap it in a "gsap.utils.toArray" so that I can use it in multiple places. I want to post it here in cause anyone else needs it. Here is what I came up with. gsap.utils.toArray(".split").forEach(function(elem) { const splitTimeline = gsap.timeline({scrollTrigger: { trigger: elem, start: "top 80%", end: "bottom 10%", onToggle: self => gsap.to(elem, {opacity: self.isActive ? 1 : 0}), toggleActions: "restart pause restart none", markers: true } }); const splitTitle = new SplitText(elem); splitTimeline.from(splitTitle.chars, {duration: 1.5, opacity: 0, y: 100, stagger: {amount: 1}, ease: "back.out(1)", overwrite: "auto"}); });
  5. How to update value in onComplete callback? I am using gsap 3, pixi.js and Pixi Plugin. I try a few things but it seems nothing works (tween overwrite, modifiers and updateTo() method). I have something like this: let frame = 0; function animate() { gsap.to(container, { pixi: { scale: scale, rotation: angle, x: x, y: y }, duration: 1.7, ease: "power3.in", onComplete: () => { //reset value gsap.set(scene, { pixi: { scale: 1, rotation: 0, x: app.screen.width / 2 } }); if (frame < 3) animate(); else animate2() } }); frame++ } I need when onComplete trigger, to gsap.set(..) use current value of app.screen.width ( width of render in pixi.js which change on resize event).
  6. Thanks again for the help! I have changed my code to work with the 1 step directions, as for the for-each function doesn't it just overwrite all the moves, only preforming the last one? this is the code I have now https://codepen.io/naniio/pen/oNbvQdO Seems a lot cleaner to me now!
  7. Hey Yandex. Some notes: I highly recommend overwrite: "auto" instead of overwrite: true because it will only kill off the conflicting tweens. You probably want to set defaults: {overwrite: "auto"} instead so it's passed to each tween. Why are you using keyframes here? Using regular tweens fixes the issue because defaults on timelines won't get passed to keyframes. They don't get passed to keyframes because keyframes essentially create a sub-timeline and defaults don't apply to those. If you want defaults on keyframes, apply it to the tween itself. You could technically pass in a defaults option that sets the defaults for each tween. Kinda meta but it works: defaults: { defaults: { overwrite: "auto" } } Another alternative is to use the global defaults for gsap: gsap.defaults({overwrite: "auto"}); I'd just use regular tweens: https://codepen.io/GreenSock/pen/WNreEaa?editors=0010
  8. Dear GSAP community, I’ve a question about an ‘overwrite’ feature and some timeline time aspects. If I set an animated parameter without changing the time, it works pretty well! Example: https://codepen.io/belyanskii/pen/vYLBZQE But once I am trying not only to set (or change) an animated parameter but to set delay and duration, overwriting doesn’t seem to occur: https://codepen.io/belyanskii/pen/XWXrgQy Is there a way to overwrite the whole animation w/o clearing or deleting the tweens/timelines?
  9. Hey Trapti. Thanks for the clear demo. The reason why the leave doesn't work is because of you're using a setTimeout to delay the parallax effect for 200 ms. So the mouseleave does happen, just before the last parallax tween. I'm not sure why you're using a setTimeout... That's because of your .in ease. Every time it updates it creates a new tween and .in eases are slow at the start, hence it appears slow. I'd just use the condensed string form and say ease: "sine" which defaults to an out ease. I also recommend using overwrite: "auto" for that tween to kill off old tweens. Another reason why it appeared slow is because of the setTimeout. Another side note is that you don't need quotation marks for numerical values like 0. Here's a fork with those changes: https://codepen.io/GreenSock/pen/oNbvYOM?editors=0010
  10. If you have multiple animations affecting the same properties of the same elements at the same time, there is no working around it There simply will be conflict, likely causing issues. A value simply cannot be two different values at the same time. Ways to work around that are to Use overwrite: 'auto' so that tweens will kill off tweens that they conflict with. Apply animations to a container or child instead of the element it would conflict with. Rewrite the animations to combine their effects into one animation. It sounds like you're using the first approach I outlined above.
  11. The biggest issue here is that you're using a .from() in the second timeline. Let's look at what happens when your pen initiates: createRowAnimation fires: All of the cubes are given width:0 and height:0 immediately due to the .from(). When the timeline is ran, it will animate each cube's width and height from 0 to the default value. createColAnimation fires: All of the cubes are given width:0 and height:0 (again) due to the .from(). When the timeline is ran, it will animate each cube's width and height from 0 to 0. This is because the value before the .from() is called is already 0 due to the first timeline! Thus to fix the issue, use .fromTo() like Craig said or (what you likely want in this case so that they can overwrite each other more easily) use a .set() and then a .to(). https://codepen.io/GreenSock/pen/abvKyVW?editors=0010
  12. Hi! I'm sorry, but I have some issue with mouseleave, in demo as you can see image with overlay is not dissapearing, if I make tl.reverse() on mouseleave everything is fine, but I need my timeline to hide everything immediately. What am I doing wrong?
  13. Are you on Windows and do you mean with a mousewheel? If so that makes sense because it's immediately setting the value. You could switch out the quickSetters for .to() tweens and it'd be smoother I'd bet. Make sure to set overwrite to 'auto' if you're going to do that. Glad I could answer it before it was even asked
  14. Hey chevohin and welcome to the GreenSock forums! Good question. The answer is that each time you click, you're creating a new animation. And the tweens in that animation are relative, meaning that they go from the current value to the provided value. So when you click mid animation, it uses the current value (instead of the starting value) as the new starting point and thus it isn't what you're expecting. To fix that issue, there are several solutions. Potentially the best is to create an animation outside of the click event and use control methods inside of the click event to manipulate it. Here's an example of that: https://codepen.io/GreenSock/pen/mdeOMQJ?editors=0010 You could also use .isActive() and an if statement to prevent the jumping. if(!snowmanHandsUpTl.isActive()) { snowmanHandsUpTl.play(0); } Another alternative is to use .fromTo() tweens which enforce a particular start value with overwrite: 'auto' in order to kill off the previous tweens but that's less performant and not necessary here. Note that I'm using GSAP 3 formatting. I think you're really enjoy and benefit from my article on tips to animate efficiently. Let us know if you have more questions. I'd love to see the end result of what you make!
  15. Hey Roman. By default, GSAP does not kill off tweens that affect the same properties of the same objects. If you want that to happen, you should set overwrite: 'auto' (or true) for the tweens that conflict. Alternatively, change the property globally: gsap.defaults({overwrite: 'auto'}); However, in your case it might make more sense to setup a timeline for the hover transition when the JS is initialized. Then on mouseenter you play it, on mouse leave you reverse it.
  16. Thanks for the explanation. I think I understand what you're wanting to do. I think the key error is that your code above doesn't really handle overwriting well. What I mean by overwriting is when two animations are both trying to control the same properties of the same elements. There's conflict because you're telling it to be two values at the same time. The easiest way to handle this in your case is to change GSAP's default overwrite value from false to 'auto'. That will cause tweens to kill other tweens that it's in conflict with. You can change that setting globally by using gsap.defaults({overwrite: 'auto'}); Alternatively you could apply overwrite: 'auto' to just the tweens that could into conflict. Some other improvements you could make: Use GSAP 3's new syntax (no need for TimelineMax, TweenMax, etc.). Put the duration inside of the vars parameter so you can use defaults. Chain tweens on the timelines (I think it helps make it more clear that they are all on the same timeline). Just use scrollY for the scrolling position. All that put together: https://codepen.io/GreenSock/pen/XWbGavp?editors=0010
  17. Thanks for the extra clarification. I had tried doing a similar tactic setting my animation to a variable but I didn't have any overwrite settings. I had tried so many things that I thought should work but didn't so I just started trying everything else I could think of. Alas... adding the overwrite parameter was not one of them. I am guessing I won't forget that little tidbit now. Sometimes the best way to learn is to get burned. #scalded
  18. If you look in the docs for the gsap object, you will see that no method called .kill() exists for it. Only .killTweensOf() exists on the gsap object. However, if you look at the Tween docs or Timeline docs you will see that they have .kill() methods. So in order to use .kill(), it has to be used on a Tween or Timeline reference itself. Thus you could rewrite your first pen like so: https://codepen.io/GreenSock/pen/poJYgvY?editors=0010 Notice that I also set overwrite: 'auto' on each tween so that new tweens kill off previous tweens that conflict. Both can be used whenever you need to kill an animation. .kill() is more useful if you have a direct reference to the animation. .killTweensOf() is useful when you don't have that.
  19. I wasn't sure if you just wanted a very simple "jump to the speed" effect or something more advanced like gradually changing speeds, but here's the simplest approach: https://codepen.io/GreenSock/pen/50f4d16dcbb7acd8f85e540e8a4e2011?editors=0010 Notice we're just reusing the same tween instance and just altering its timeScale. You could certainly do it other ways too. Rodrigo is using a more advanced thing for the "off", but I think there's an easier way even for that. But before I dive into that, I want to confirm that's what you want. Oh, and @Rodrigo I wouldn't recommend accessing the _gsap stuff directly like that. Just use the built-in getProperty() which automatically returns a number anyway (unless you declare a unit): // OLD (bad) currentAngle = parseFloat(box._gsap.rotation.replace("deg", "")); const finalAngle = endAngles[Math.floor(currentAngle / 90)]; // NEW (good) currentAngle = gsap.getProperty(box, "rotation"); const finalAngle = gsap.utils.snap(90, currentAngle); Oh, and @Greg Stager remember that the default overwrite mode is "false", so tweens won't automatically overwrite each other. You were creating infinitely repeating tweens on every click on the same property of the same object. That's probably why you weren't seeing it stop - you had a bunch of tweens running on that same object. You can set overwrite: true on your tweens or even set gsap.defaults({overwrite: "auto"}) to have the engine auto-sense conflicts like that and kill just the parts that overlap. Also, if you want to kill all the tweens of a particular object, check out gsap.killTweensOf(). In your case, gsap.killTweensOf("#box"). Oh, and @Rodrigo here's a fork of yours with InertiaPlugin doing the magic of stopping the spin: https://codepen.io/GreenSock/pen/25d4fed9370f27e03a0f5627be73ae5d?editors=0010
  20. GreenSock


    Ah, DynamicProps was way back from the ActionScript days Typically you could just recreate the tween each time the "target" object moves to a new position (and don't forget to set overwrite: true or overwrite: "auto" so that the previous one is killed). But if you need a single tween instance so that it definitely ends after a certain amount of time and the ease gets adjusted on-the-fly, I whipped together a helper function that you can feed into a modifier, as demonstrated here: https://codepen.io/GreenSock/pen/1ed6118d993bac95e12d3236cc836f9e?editors=0010 Notice when you drag the red dot, the blue will start animating there no matter where you move it, and it'll always end up exactly on top of it after 5 seconds (the duration of the tween). Of course when the tween ends, it doesn't keep following it. Helper function: // the "getter" can be a function with your own logic OR you can pass in another target whose property should be copied. function getDynamicProp(prop, getter) { let ratio = 0, result, initted, copy, unit; if (typeof(getter) !== "function") { copy = (typeof(getter) === "string") ? document.querySelector(getter) : getter; getter = () => gsap.getProperty(copy, prop); } return function(value, target) { if (this.ratio !== ratio || !initted) { let end = parseFloat(getter()), factor = (this.ratio == 1 || ratio == 1) ? 0 : 1 - ((this.ratio - ratio) / (1 - ratio)); if (!initted) { unit = typeof(value) === "string" ? gsap.utils.getUnit(value) : 0; initted = true; } result = (end - ((end - gsap.getProperty(target, prop)) * factor)) + unit; ratio = this.ratio; } return result; }; } Usage example: gsap.to("#box", { x: "+=1", // these values don't matter - we'll override them with modifiers. These are placeholders. y: "+=1", duration: 5, modifiers: { x: getDynamicProp("x", this.target), y: getDynamicProp("y", this.target) } }); You can define your own getter functions if you want. This isn't an "official" plugin or solution or anything, but hopefully it gets you what you need. Thanks for being a Club GreenSock member! 🙌 Does that help?
  21. If I understand your question correctly, there are many ways to do this... 1) gsap.isTweening(CONTAINER) - that's an easy test to see if GSAP is currently animating a particular object. 2) Store the tween in a variable, and then check its isActive() value. There are several others, but I don't want to overwhelm you. My bigger question is WHY do you want to know if it's tweening? If your goal is to have the new tween overwrite the old one, all you need to do is set overwrite: true on the new tween. That'll immediately kill all other tweens of that same target.
  22. @GreenSock Hi, Jack! I forgot about overwrite mode. Can you tell me is there a big difference fromTo between GSAP v2 and GSAP v3? I created exactly the same code using gsap v2 and there fromTo not working like in your code. https://codepen.io/ChicagoJostik/pen/MWwGepr
  23. The main problem is that in your mouseleave, you did a clearProps tween but you did NOT stop the other tween that was affecting the same element (from the mouseenter). The default overwrite mode in GSAP 3 is false. So all you need to do is set overwrite: true on that tween and it'll find any other tweens of that same element and immediately kill them. As for your timeline not working, you had the values inverted (you were going from height: "auto" to height: 0). And instead of doing a separate set() call and then a to(), you could just combine those into a fromTo(). Your way wasn't "wrong", it's just more verbose. Here's a fork with the corrections: https://codepen.io/GreenSock/pen/89082759e2f311dce8bb350cf740e939?editors=0010 Does that clear things up?
  24. Hey aok. I think you're overcomplicating things. I'd just use some tweens and make sure the tween for the hovered link has overwrite applied to it: https://codepen.io/GreenSock/pen/jOPabqd?editors=0010
  25. Hell yeah! Thanks for the ultra fast (and spot on!) response. I hope you don't mind me asking, as I don't want to just straight paste your code and I'd love to understand it better: What is the overwrite parameter used for? I couldn't see any changes after setting it to false. (line 29 spinningWheel.js) Is the (!rotation.current) (line 14 spinningWheel.js) check the solution for the animation not pausing? As in, every time I was pausing before, I was actually starting a new animation? Why does a change like this break timeScale?