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 samlinck. This is because your tweens are in conflict with each other. Usually it's good to create animations beforehand but in this case it probably makes more sense to create a new animation each time an item is entered or left. If you do this you should make sure to overwrite the older animations: https://codepen.io/GreenSock/pen/NWRaxRW?editors=0010
  2. Welcome to the forums and the wonderful world of GSAP, @miketwalker. You just need to base your timing off the number of elements you're staggering. Here's a corrected fork of your codepen: https://codepen.io/GreenSock/pen/2cebe760d96fd703c4a19002bf415d86?editors=0010 And there's an alternate approach that uses keyframes and a loop in there in case that seems more intuitive for you. Either one is fine. It's just that in some cases, it can get a little mind-bending to work out lots of timing stuff in multiple staggered animations on the same elements so it can make more sense to just do one sequence at a time, and lay those out individually on a timeline chunk by chunk. There are actually lots of ways you could approach this. Here's one more that uses a modular function so you can just focus on one at a time: function test() { var div = gsap.utils.toArray(".textdiv"), stagger = 2, tl = gsap.timeline(); // loop through and for each element, feed it to slideDown and insert the resulting animation into the timeline in a staggered way div.forEach((el, i) => tl.add(slideDown(el), i * stagger)); } function slideDown(element) { var tl = gsap.timeline(); gsap.set(element, {xPercent:-50, left:"50%", opacity: 0, yPercent:100, top:"0%", position: "absolute", overwrite: true}); tl.to(element, {opacity: 1, duration: 2}) .to(element, {yPercent: -100, top: "100%", duration: 12, ease: "none"}, 0) .to(element, {opacity: 0, duration: 2}, "-=2"); return tl; } Happy tweening!
  3. Yes - sure does. I figured this was probably an edge case given GSAP's user base and the fact I couldn't see anything on it. Now I know what to look for I wont have the same issue in future. Understand and agree it probably doesn't warrant addition in the doc's. Hopefully if (in the unlikely event) someone manages to repeat my mistake googling: Keywords: added properties delay duration ease overwrite repeat will lead them to this explanation anyway. Thanks for the reponses everyone.
  4. Hi, I wouldn't consider it a bug. Keep in mind that a zero duration tween is not a distinctive GSAP instance on it's own, just a regular GSAP instance with duration zero. The .set() method is just a shortand/convenience in order to make it easier on developers to write, read and maintain code, because once you get used to the API it's simpler to understand this: gsap.set(element, {config}) than this: gsap.to(element, {duration: 0, config}), if another developer in a team looks at the second example the first thing is: Why this animation has a duration of 0 seconds? If the set() method is confusing the dev can come to the API docs, check it and realize that it creates a zero seconds tween. With that in mind and not knowing all the ins and outs of the codebase, perhaps that this happens in one of this places in the code: https://github.com/greensock/GSAP/blob/master/src/gsap-core.js#L307-L352 https://github.com/greensock/GSAP/blob/master/src/gsap-core.js#L1115-L1130 Or somewhere else ... Now I have used several times the approach you're using of creating a re-usable config object, but I never took the time to inspect it after GSAP used it, because it never led to any unexpected behaviour. Keep in mind that most commonly objects are passed by reference so given the parts of the code I linked above is quite expected that the original object would be modified. Is this modification leading to some issue in your code? I'd expect that if you overwrite any of the properties added by GSAP the one that you add would take precedence over the ones added by GSAP since those are there just as defaults. Finally I believe that either @GreenSock or @ZachSaucier are in a better position to give you a more "official" answer. Happy Tweening!!!
  5. Hey! I have the same divs with classes called "wrapper" and they both have same elements called "box" inside. When you mouseenter "wrapper" all boxes inside getting filter:grayscale(1) and autoAlpha:0.5 by tween, but also I have another tween which is saying that box that you target must be filter:grayscale(0) and autoAlpha:1. So my problem is that I can't overwrite first tween by second properly, if I add overwrite:true inside tween2 my function will not work at all. What am I doing wrong? Can you help me, please?
  6. You can just animate the progress. And you don't need to use a timeline - just use a simple fromTo() tween for each direction: https://codepen.io/GreenSock/pen/5bab7669c11ef8400b5b56f5939d2d59?editors=0010 Is that what you mean? Just don't forget the overwrite: true on at least one of the tweens, otherwise you'll create a bunch of overlapping/competing tweens on each mouse movement. Happy tweening!
  7. Hi everybody! I've been reading all the threads in the search results and reviewing documentation but I'm just really new to this, green you might say. I'd like to disable the left/right animation on mobile or if it's easier, disable all of them if I can't isolate them. It might look really stupid reading what I've done below but I'd love some help please if possible. I just don't know what I'm doing. Thanks in advance! ScrollTrigger.saveStyles(".gs_reveal_fromLeft, .gs_reveal_fromRight, .gs_reveal"); ScrollTrigger.matchMedia({ // desktop "(min-width: 800px)": function() { //Reveal Animations Scrolltrigger function animateFrom(elem, direction) { direction = direction | 1; var x = 0, y = direction * 100; if(elem.classList.contains("gs_reveal_fromLeft")) { x = -100; y = 0; } else if(elem.classList.contains("gs_reveal_fromRight")) { x = 100; y = 0; } gsap.fromTo(elem, {x: x, y: y, autoAlpha: 0}, { duration: 1.25, x: 0, y: 0, autoAlpha: 1, ease: "expo", overwrite: "auto" }); } }, // mobile "(max-width: 799px)": function() { return function() { gsap.kill(); // other cleanup code can go here. }; } }, // all "all": function() { function hide(elem) { gsap.set(elem, {autoAlpha: 0}); } document.addEventListener("DOMContentLoaded", function() { gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(".gs_reveal").forEach(function(elem) { hide(elem); // assure that the element is hidden when scrolled into view ScrollTrigger.create({ trigger: elem, onEnter: function() { animateFrom(elem) }, onEnterBack: function() { animateFrom(elem, -1) }, onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view }); }); }); } );
  8. thank you for your feedback @ZachSaucier Something like that i was waiting for yep i really have to learn the full power of gsap to not fall back to jquery without any need of it - actually while reading your feedback i have no clue, what i could address to gsap instead of jquery but i will check that this is a good point, will also check that - btw. i meantioned to not have an idea, how to react on window resize. Is the only way to overwrite the whole timelime to change vh and vw used in the timeline? how to get timeline direction without asking timeline._ts? ok - i saw both on my readings and string form felt wrong in any way what do you mean? again jquery? or what is this related to? is there any special you would to address to ES6? as i have to support IE11 i cant use ES6 - does i?
  9. Thanks! Feared so. What is `overwrite: 'auto'` doing in your scrollTween? Also thanks for the idea of killing the tween when `wheel` event is triggered.
  10. Hey guys! I have been lurking the forum since last few days. I have found a lot of useful information thanks for the great support. I am looking to smoothen the animation in my codepen by doing following: - fasten the timescale of tweens when 'onmouseover' so the div stop quickly but gracefully - Also smothen the tweening overwrite happening while moving the cursor fast I think the best way would be to use a timeline to update timescale but I am having trouble to figuring that out. Thanks in advance
  11. Hey Pata. Tweens aren't meant to be changed too much after they have been created. Instead of creating a ScrollTrigger with an animation attached to it, I'd create a ScrollTrigger with no animation and then create a new tween inside of the onEnter. Something like this (untested): ScrollTrigger.create({ trigger: '#footer', start: 'top bottom', toggleActions: 'play pause resume reset', onEnter: self => { const velocity = self.getVelocity(); const variation = velocity / 10000; const footerBounce = gsap.to('#down', { duration: 2, morphSVG: '#up', ease: `elastic.out(${1 + variation}, ${1 - variation})`, overwrite: 'auto' // make sure old tweens are killed }) } })
  12. So I'm implementing a smooth scroll like this: useEffect(() => { const container = document.querySelector(".scroll-container"); document.body.style.height = container.scrollHeight + "px"; const onScroll = () => { gsap.timeline() .to(".scroll-container", { y: -pageYOffset, overwrite: "auto" }, 0) } document.addEventListener("scroll", onScroll) }, []) The smooth scroll is working fine, but its height is not being calculated properly. In other words, the scrollHeight I get from the container, won't be enough to scroll the whole container using smooth scroll. How do I calculate the height I need for smooth scroll?
  13. Another alternative is to use a completely different approach: Position the cursor element in the center of the pink element. Set its scale to 0. In the mouseenter of the pink section, animate the cursor element's scale to its normal scale. In the mousemove of the pink section, animate the position of the cursor to the mouse position. Make sure to overwrite any animations affecting the position of the cursor element. In the mouseleave of the pink section, animate the cursor element's scale back to 0 and its position back to 0, 0.
  14. Hey Coopski and welcome to the GreenSock forums. You're making one of the most common ScrollTrigger mistakes: nesting ScrollTrigger in tweens within a timeline. Doing so doesn't make much sense because the timeline and the ScrollTrigger try to control the animation. Once you fix that, you still have a logical error though: since your ScrollTrigger start point is before the initial scroll position, both your start animation and your ScrollTrigger are trying to set the value at the same time so one will overwrite the other. You probably want to wait to create the ScrollTrigger until after the load animation has finished. To prevent the jump in state caused by the initial scroll position affecting the ScrollTrigger, you could use a numerical scrub. Something like this: https://codepen.io/GreenSock/pen/mdEKYgE?editors=0010
  15. Hey @imChris, It could be a questions of positioning (more here) e.g. try timeline.to(boxInner, { x: sectionMovement.getAttribute('data-x'), ease: animationEase, //overwrite: 'auto' },0) Happy precise timing ... Mikel
  16. Hey Zach, Superb! That's exactly the effect I was looking for -- and has also given me a couple of new pointers for the future too. It makes total sense - I wasn't aware you could a) attach a tween to the onEnter/onLeaveBack calls in that way and b) hadn't properly grasped the impact/usage of the "overwrite:true" prop to kill the tween either. I'll make sure I do some reading around that one Many thanks (again!). Cheers!
  17. Okay, thanks again for your help. Looking at this a bit more, I agree with you on the necessity of the overwrite because I'm not really seeing a way around that. I may end up going that direction.
  18. Unfortunately we don't have the capacity to make every edge case meet your needs. I would say the overwrite is pretty necessary to prevent the conflicts. Best of luck getting it working the way you need it to be working!
  19. Thanks for your reply and suggestions, Zach! Much appreciated. Those changes have brought me very close to a solution. On touch devices, I am still having a few issues, however. Basically, if the Draggable section is part way in the viewport, and the user tries to grab it and scroll back up, Draggable events are firing and the user can't really scroll up normally. I messed around with a few options using the deltas and Draggable.enable()/disable(), but can't quite get it - basically I would need a way to disable Draggable if the user is scrolling vertically. As a side note, I did have to remove the overwrite: 'auto' on the updateProxy function or else that will kill the inertia movements. And related to that, when inertia movements are still going and a touch user tries to grab the screen to stop, a bunch of flickering starts happening as the native scroll position and the inertia movements are fighting. I suppose this is where the overwrite would come in handy, but I would really like to have the inertia preserved if possible - do you happen to have any additional ideas on that? Thank you again for your help!
  20. Hi Zach, Thanks for the reply. I stripped out everything and was finally able to pinpoint the issue to a gsap default setting of `overwrite: true`. The docs say: If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false. Not really sure I understand how this applies to my case, but anyway, I'm glad I finally figured this out. Thank you for the suggestion.
  21. Hi! I tried to recreate the navigation https://www.steven-hanley.com/ So now I have in my codepen working example, The problem is when deltaX is 0, the animation starts to kill itself in a tick because of overwrite: true. My question is - is it possible somehow kill animation with smooth decay? I mean when my deltaX is 0, the tween should animate position of x to 0 with duration, not immediately. Thanks in advance!
  22. You're now making a variation of one of the most common GSAP mistakes Just use gsap instead of this.tl. You might want to set the global defaults for GSAP if you're doing that: gsap.defaults({ overwrite: 'auto' }).
  23. Thanks! I rewrote the code using functions - looks much better)) But still have a small problem. Clicking two fast pushes animations in a line even with overwrite. So all of the triggered animations will play till the end. Is there anyway to stop it? Kind of stopping everything and playing only the last tween? https://codepen.io/kutalev/pen/dyXPOMb
  24. I have a circle which is supposed to be transformed in the direction of the cursor all time. node.addEventListener("mousemove", e => { const {x, y, width, height} = blob.current.getBoundingClientRect(); gsap.timeline() .to(blob.current, { duration: 10, x: e.clientX - (x + width / 2), y: e.clientY - (y + height / 2), force3D: true, overwrite: "auto", ease: Linear.easeNone }, 0) }) This is fine, but includes unwanted behavior: when being further away from the circle and rapidly changing direction and distance from the circle, there obviously will be a change in speed since the distance for the circle to travel in this 10 seconds gets shorter/longer. How can I ensure the same travel speed all the time, no matter where the cursor is?
  25. Hey Tee. First off, I recommend that you modify your mousemove function. The one that you have could be improved like so: node.addEventListener("mousemove", e => { const x = e.clientX / 10; const y = e.clientY / 10; gsap.to(blurRef.current, { yPercent: -30, x, y, duration: 1, overwrite: "auto" // very important }) }) However you could go even further improving the performance using GSAP's .quickSetter() which is what I would do in your position. When combining animations that are animating the same properties of the same objects, it's usually best to animate a container of the element with one animation and the actual element with the other element. That way you don't have to worry about managing the combination of the animations, it just works because the animations are on different elements. So I would recommend adding a new container just around your blur element and animating that with one of your two animations. In terms of writing that CSS animation in GSAP, here you go: gsap.fromTo(blurRefContainer.current, { y: -10 }, { y: 15, repeat: -1, yoyo: true ease: "power1.inOut", duration: 1 });