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. Hey girro. Some notes: You're making one of the most common GSAP mistakes of using the old duration parameter instead of including the duration inside of the vars. Putting it in the vars also lets you use defaults. Your repeatRefresh isn't doing anything. If you're going ahead with some ES6 stuff (like arrow functions) you may as well use more features (like using const and let). If you're using a timeline we recommend using the position parameter instead of the delay property. We recommend using the latest GSAP version (3.6.0 at the moment). On CodePen, you should only include the stuff within the body in the HTML section. And you can load external resources via the cog icon next to JS (and CSS). I recommend adding a background rect to each button so that they're easier to click. As for your question, often times it's good to create animations ahead of time and use control methods (this is one of the tips to animate efficiently). However, if you need the animations to overwrite each other like this usually it's best to create the animation when you need it. I'd approach it like so: https://codepen.io/GreenSock/pen/GRNLwXE?editors=0010 With that being said, your timelines currently affect both state-specific elements and shared elements (like the background shape). The way I have it set up above, the animation is killed off completely when an item is clicked, which could be an issue if users click between them fast enough. To remedy that, I'd separate the state specific animations from the shared animations. Only kill off the animation(s) related to the shared elements and let the ones for each state continue.
  2. We don't really have the capacity to do code optimization for every person who posts in these forums. Glancing at the code I'd try to avoid creating functions inside of a loop if possible. I bet you could avoid having to get the BoundingClientRect every mouse move event. You should also make sure to overwrite the previous animations in GSAP 3. There's really not that many calculations going on - GSAP can't remove the need to avoid calculations in every case.
  3. That's TypeScript misinterpreting things - it doesn't understand what "this" is in that context. Totally unrelated to GSAP/Draggable. You could work around that like: let drag = Draggable.create('.scrollbar', { type: "x", bounds: ".scrollbarContainer", throwProps: true, onDrag() { gsap.to('.gallery', {x: -drag.x, overwrite: true}); } })[0];
  4. Hey TradingBo. You're making some of the most common GSAP mistakes — I recommend going through the article Also instead of a zero duration .to() we recommend using .set(). That is a very weird error... I don't know why that's happening. It seems to be due to something inside of CodePen itself - if you run the debug view of the pen it doesn't throw the error. As for your main question, creating two different animations (for the intro and exit) at the start and using control methods is a tricky situation. There are a few different methods you could use: Don't use two different animations - just use one and reverse it on exit. In a lot of cases this is a good option for these sorts of toggled animations. Use two different animations but generate them as needed. What I mean by this is that you could, when clicked to open, dynamically create an animation to run with the necessary end values (and optionally use a duration based on how far the value(s) need to change). Make sure to overwrite any previous animations applied to the targets. This would allow you to toggle the state while a previous animation is still running but it more work. Use two different animations but don't allow them to overlap. You can do this by either detecting if a previous animation is running (and don't do anything in the click event if so) or by using a single timeline and using .tweenTo() and labels. I talk more about the second way here in my article about animating efficiently (I highly recommend going through the whole thing).
  5. Hey Alle. The question really boils down to: what are you wanting to show? Are you wanting to show a value based on the actual load of the page? Or based on your animation length? Because the two almost certainly don't match up exactly. That distribution of values largely comes from the ease that's applied to your tween. If you set the ease to "none" it will be more what you're expecting. If I were tasked with doing something like this, I would probably use the method of calculating the estimated time of the page load that Ahsan provided in your linked post but use GSAP's ticker to update the value. Or perhaps using tweens that overwrite each other if you find that there are larger jumps that are unsightly.
  6. I had overwrite set to 'auto', when I set it to true the wonkiness goes way up, it doesn't even appear to be playing anymore. No, wait... true may have done it. I've also got it initially paused and played by scrolltrigger, and I think that was where the additional wonkiness was coming from.
  7. @billyZduke just a shot in the dark here, but have you tried setting the overwrite to true or auto? gsap.defaults({ overwrite: true }); Does that make any difference?
  8. Closer to a minimal demo Several notes: You're still using the super old version of GSAP. Again, we recommend upgrading. If you upgrade, you should also apply overwrite: 'auto' to your tween that animates the position of your circle. See this post for more info. If you remove the Locomotive Scroll part you can see that your code doesn't work in that case either. I don't really understand why you're using the setTimeouts. You should avoid container.getBoundingClientRect() from firing every tick if you can as it's not very performant. As I said in my first post in this thread, since Locomotive Scroll replaces the natural scroll you'll need to get the position of the scroll from Locomotive instead of from the default scroller of a page. In cases like this you need to see how the element is mispositioned (is it always a constant amount off? If so where is that constant amount coming from? Is it off by how much you scroll? If so you need to add in the scroll position to the calculation). If I were creating this I'd probably make the circle a child element of the section that you care about and position it absolutely. That makes the calculations easier, though it's definitely possible to do the way you have it. I've not used Locomotive Scroll too much. The only way that I'm aware of getting the scroll position is using the scroll event listener. There might be a better way (like a property on the locomotive instance) that you could do instead. https://codepen.io/GreenSock/pen/bGBjzvX?editors=0010
  9. Hey @ilike.idontlike, You could use overWrite: true overwrite If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. Horizontal: Please look in the ScrollTrigger DOCS. And provide a reduced CodePen of your case. Then if you have a question, we'd be happy to help. Happy tweening ... Mikel
  10. Thanks for the clear demo! The simplest solution is to apply immediateRender: false to your tween that has the ScrollTrigger. https://codepen.io/GreenSock/pen/KKNZWWa?editors=0010 You might also want to use overwrite: 'auto' on the tween with the ScrollTrigger. Another solution is to use the onComplete of the tween that runs on load to create the tween and associated ScrollTrigger.
  11. I assume you're asking why your method works? It works because it's basically the same method that I suggested. Overwriting doesn't come into play because there are not conflicting tweens. But it's incorrect to add overwriting because if some overlap were introduced then it would break. As with most things, it depends. If you need to animate the same properties of the same target(s) at the same time and you want them to not overwrite each other then that's a case for using a container element. That way the effect is additive and there's no conflict.
  12. You're right, I could settle with only the rotation for the effect, but I like it more with the additional axis' and also I'm trying to learn :) I did try overwrite: "auto", but there's still glitches in the movement. To illustrate this better I made my minimal demo slightly less minimal and added the speech bubbles I have in my actual project. Try moving your cursor in and out of these to produce the animation glitches. https://codepen.io/jhtjards/pen/BaQwxGd
  13. Have you tried overwrite: "auto" it will try to detect if there are values that are still going which the tween doesn't affect, so it should leave those alone. Also why do you need other way. True seems to give good results as well. Other than that I am bit lost to what you want to achieve.
  14. Hi, i've started my first project with greensock a few weeks ago, had some problems along the way, solved them with the help of the detailed documentation and by quietly reading in the forums. Big kudos to the Dev Team for creating such a fun and high quality library and also to the awesome and super helpful community! But now I'm at a stage where I'm a bit stuck. I've created a little landing page with three smiley faces (svg) that pop out and in on mouseEnter / mouseLeave To draw attention to the little guys, I made an "idle"-timeline that makes them move randomly as if they were rummaging through some stuff in their caves. On mouseEnter they should stop rummaging and pop out ("tl"-timeline). It generally works, but there is one issue that I don't know how to get rid of: I had to place an overwrite: true into the animations, otherwise the timeline animations mix and produce all kinds of weird behaviour. But this removes all X and Y random motions i've declared and only leave the rotation being executed. Is there any other way of circumventing the animations mixing that keeps X and Y moving?
  15. Also, just to be clear, your example creates a huge memory leak and compounding performance problem because you're literally creating 60 new tweens per second (assuming 60fps) that are constantly repeating and fighting each other for control of the same property of the same element. Definitely don't do that! So after 1 minute, you've got 3,600 tweens all fighting (3,599 more tweens than you need). At the very least you should set overwrite: true to avoid the build-up, but there are definitely better ways to code that. I'm trying to understand why you were putting it in a requestAnimationFrame() and constantly creating new instances. I don't mean it as a criticism - I'm genuinely trying to wrap my head around your original goal so that I can better advise you about a more appropriate way to do it.
  16. Have you ever been in a situation with GSAP where you needed a higher level of control over conflicting tweens? If you’re just creating linear, self-playing animations like banner ads, chances are the default overwrite mode of false will work just fine for you. However, in cases where you are creating tweens dynamically based on user interaction or random events you may need finer control over how conflicts are resolved. Overwriting refers to how GSAP handles conflicts between multiple tweens on the same properties of the same targets at the same time. The video below explains GSAP’s overwrite modes and provides visual examples of how they work. Want to master GSAP? Enroll in CreativeCodingClub.com and unlock 5 premium GreenSock courses with over 90 lessons. New lessons like this one are added weekly to keep your learning fresh. GSAP’s 3 Overwrite Modes false (default): No overwriting occurs and multiple tweens can try to animate the same properties of the same target at the same time. One way to think of it is that the tweens remain "fighting each other" until one ends. true: Any existing tweens that are animating the same target (regardless of which properties are being animated) will be killed immediately. "auto": Only the conflicting parts of an existing tween will be killed. If tween1 animates the x and rotation properties of a target and then tween2 starts animating only the x property of the same targets and overwrite: "auto" is set on the second tween, then the rotation part of tween1 will remain but the x part of it will be killed. Setting Overwrite Modes // Set overwrite on a tween gsap.to(".line", { x: 200, overwrite: true }); // Set overwrite globally for all tweens gsap.defaults({ overwrite: true }); // Set overwrite for all tweens in a timeline const tl = gsap.timeline({ defaults: { overwrite: true } }); Below is the demo used in the video. Open it in a new tab to experiment with the different overwrite modes See the Pen overwrite demo by SnorklTV(@snorkltv) on CodePen. Hopefully this article helps you better understand how much control GSAP gives you. Overwrite modes are one of those features that you may not need that often, but when you do, they can save you hours of trouble writing your own solution. For more tips like this and loads of deep-dive videos designed to help you quickly master GSAP, check out CreativeCodingClub.com. You’re going to love it.
  17. When creating new versions of demos for these forums, please use the "fork" button so that context is not lost for future readers of the thread. Your approach is fine. You might want to add overwriting so that new tweens kill off conflicting other ones: overwrite: 'auto'. You could also make use of GSAP's built in random functionality instead of adding your own which just (slightly) bloats your code: x: 'random(["-=50", "+=50"])'.
  18. In general you don't want to keep adding to the same timeline like that. You should usually either use control methods on animations created beforehand (usually this is preferable) or create new timelines if you need to, making sure to overwrite old tweens. You might learn a lot from my article about animating efficiently. As for ScrollTo not working, I'm guessing that the ScrollToPlugin is updating the scroll position of the page but your custom scrollbar is not working? If not, please explain. In any way, please create a minimal demo using something like CodePen or CodeSandbox if you'd like debugging help. Side notes: You're using some of the old syntax. We highly recommend using all new syntax. It's easy to upgrade! You should avoid animating properties like top and left. Instead animate x and y as they're more performant.
  19. Back to `overwrite:` ! That was what I was looking for! But then I don't get why my frist pen didn't work, there I had `overwrite: true` and it was in a timeline instead of straight up `gsap.to()`. I had it also `scrollTo:` the element on click, maybe that is the culprit? But I've modified your pen and everything seems to work fine. https://codepen.io/mvaneijgen/pen/wvozqJa?editors=1010
  20. @ZachSaucier I want ScrollTrigger to scale the elements and on click the element should scale to 100%. If I want the click 100% scale to happen I have to `.disable()` the SCROLL scrollTrigger otherwise it will overwrite the scale. Another scrollTrigger should then check if you `onLeave()` or `onLeaveBack()`, then it should scale back to some magic value and the SCROLL trigger should enable again. In the end I also want to have a close button, with scales it back from 100% and enables the scroll animation again. I've also made a screen recording explaining my issue in more detail: and the pen https://codepen.io/mvaneijgen/pen/LYbZwyM?editors=0110 Fair enough, but I'll start optimising code when I got a working version.
  21. Hi, I would like to set dynamically x transform on scroll on element in my marquee, but the render is not immediate, there lot of latency. That my different gsap definition. Do you have any solution ? this.duration = 40; this.timeLine = gsap.timeline({ repeat: -1, force3D: true }); // SCROLL EVENT document.addEventListener('scroll', debounce(() => { //console.log(this.currentX - n); let t = window.scrollY; let n = t - this.scrollPosition; //console.log('SCROLL', this.currentX - n); this.timeLine.fromTo(this.trainContentWrapper, { x: this.currentX, immediateRender: true }, { x: this.currentX - n, immediateRender: true, }) this.scrollPosition = t; }, 250)); //Timeline definition resize() { this.totalDistance = this.trainContentWrapper.getBoundingClientRect().width / 2; this.timeLine.to(this.trainContentWrapper, { x: -this.totalDistance, duration: this.duration, ease: "none", //overwrite: true, onUpdate: () => { this.currentX = gsap.getProperty('.train-content__wrapper', 'x'); } }); }
  22. Thank you! i was thinking about the container too, in my project im using gatsy img (i know we already discussed about "framework" specific topics) and probably the rendred image alread have a wrapper i can "intercept" i will surely add the overwrite thanks again
  23. Hey popland. When creating something like this, you usually want to apply the mouse listeners on a container of the transformed element instead of the transformed element itself because that will make the mouse events less glitchy (i.e. if it rotates too much then the mouseleave will fire even though it's not outside of the original element's bounds). So in this case I'd probably make an empty element wrapper around each image. It'd likely also be easier if you use the native mouse event's layerX and layerY properties. These are relative to the element instead of the viewport which make calculating the angle from the center of your element a lot simpler. Lastly I highly recommend using overwrite: 'auto' on your tweens so that they kill off conflicting tweens (that way you don't have unnecessary processing being done). With those tips I think you can get it working the way that you want it to work. If you run into something you can't figure out feel free to ask.
  24. It depends on the situation and what you need to animate from and to. You should use whatever method that you need at the appropriate time, whether it's .set(), .from(), .fromTo(), or .to(). Reading the docs is probably the best way to learn .set() sets the properties at that time. Defaults are just that - default values for tweens. They don't do anything unless you have a tween that the default gets applied to. And if you have the same property declared inside of a tween, it will overwrite the default value. Again, I encourage you to read about them There are various ways to do that sort of thing. As covered in my article about animating efficiently that I said you should read earlier, most of the time creating animations beforehand and using control methods is the way to go. Other times it might be appropriate to overwrite your old animations and make sure that you animate to the correct end values.
  25. We've had several people ask about this type of effect, so I just built a GSAP effect that makes this a lot simpler for you (or anyone). Here's a fork of your original CodePen with it in place: https://codepen.io/GreenSock/pen/oNYXzYB?editors=0010 So you can just paste that gsap.registerEffect(...) code into your project, and then it's super simple to make anything have that effect: gsap.effects.ticker(".hero__ticker-init"); That's it! You can control the speed and direction with attributes like: <div data-speed="8" data-direction="right"></div> I noticed a problem with your original implementation - if the screen was resized, it didn't adjust, so there could be gaps that showed up. The effect here automatically listens for "resize" events on the window, and dynamically adjusts. Seems to work relatively well. I haven't done tons of testing on this, but hopefully it's at least a good starting point for you. Here's the raw effect (you don't really have to understand it all to use it): gsap.registerEffect({ name: "ticker", effect(targets, config) { buildTickers({ targets: targets, clone: config.clone || (el => { let clone = el.children[0].cloneNode(true); el.insertBefore(clone, el.children[0]); return clone; }) }); function buildTickers(config, originals) { let tickers; if (originals && originals.clones) { // on window resizes, we should delete the old clones and reset the widths originals.clones.forEach(el => el && el.parentNode && el.parentNode.removeChild(el)); originals.forEach((el, i) => originals.inlineWidths[i] ? (el.style.width = originals.inlineWidths[i]) : el.style.removeProperty("width")); tickers = originals; } else { tickers = config.targets; } const clones = tickers.clones = [], inlineWidths = tickers.inlineWidths = []; tickers.forEach((el, index) => { inlineWidths[index] = el.style.width; el.style.width = "10000px"; // to let the children grow as much as necessary (otherwise it'll often be cropped to the viewport width) el.children[0].style.display = "inline-block"; let width = el.children[0].offsetWidth, cloneCount = Math.ceil(window.innerWidth / width), right = el.dataset.direction === "right", i; el.style.width = width * (cloneCount + 1) + "px"; for (i = 0; i < cloneCount; i++) { clones.push(config.clone(el)); } gsap.fromTo(el, { x: right ? -width : 0 }, { x: right ? 0 : -width, duration: width / 100 / parseFloat(el.dataset.speed || 1), repeat: -1, overwrite: "auto", ease: "none" }); }); // rerun on window resizes, otherwise there could be gaps if the user makes the window bigger. originals || window.addEventListener("resize", () => buildTickers(config, tickers)); } } }); Hopefully that gives you something that you can work with, or at least analyze some of the logic. Enjoy!