Jump to content

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 @amitr95 I think the problems you are having might just be related to the general processing of the code's logic you run inside your function, and not really to GSAP measuring the height incorrectly. Here is an approach, that is a bit different on the logic side of things, which works fine for me with regard to the height. I also added overwrite: 'auto' to the tweens, so GSAP can sort out conflicting tweens that might be created along the way. [Note: this approach is not meant to be 100% bullet-proof. It is mainly to show, that the height gets tweened to the proper value.] https://codepen.io/akapowl/pen/VwBqJmj Edit: Since getting the logic right for something like this can become a bit tricky, here's another example of your setup, using an approach by OSUBlake - which works a lot better. Hope that will help. https://codepen.io/akapowl/pen/BaPvXQM Based on this demo. https://codepen.io/osublake/pen/JYQqZr
  2. I'm not completely sure what you're asking. But I think your problem is that you have one element that is controlled by two ScrollTriggers and they will fight for control if the first one is not yet done and the other one is starting, so you either have to make sure the other one is done when the next one starts or make it one big ScrollTrigger that just triggers over the whole duration (this seems like the easiest solution) https://codepen.io/mvaneijgen/pen/GRBPbgr?editors=1010 You could also look in to the overwrite property https://greensock.com/docs/v3/GSAP/Tween/vars 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.
  3. Well, as with everything, the devil is in the detail, which is why it is very hard to give general recommendations for a more complex scenario like yours. Since you are concerned about things not working when reloading the page when it's scrolled down, you might want to reconsider the general approach of how you implement the change of the backgroundColor, too, because the way you are doing it in the demos you posted, things will not work as you might intend in that case. One logical problem is the following: You are changing the playstate of pre-built timelines with.to() tweens in callbacks of ScrollTriggers, when the page is loaded at the very bottom, ScrollTrigger will make sure that those callbacks get called. So now you have multiple tweens being called quickly one after the other, which are all tweening on the same property of the same element, so you are creating conflicting tweens. When you scroll back up then, the .to() tween is supposed to be reversed, but it will probably reverse back to the color that it was at the time when that tween was being created - which very likely is not the color you'd expect but some value of a color in between all those colors. Creating your tweens upfront can be quite the tricky scenario to begin with, when you are going to tween on the same property of the same element with multiple different instances. So one way you could prevent all those logical hurdles, would be to create the tweens in the callbacks directly instead of pre-building them. Then you could either use .fromTo() tweens to make sure you always tween from one specific color to another specific color, when the callback runs, or .to() tweens with overwrite set to 'auto' to prevent conflicts I mentioned above. In this pen with the lottie-scrolltriggers handling the pinning themselves, things seem to work fine even if I create those ScrollTriggers before all the lottie-scrolltriggers, but your mileage may vary. https://codepen.io/akapowl/pen/gOjKLqy
  4. I got animation like in the video attached that is triggered via the code below: // tab is the html div object of the clicked tab button // blue line is the html div object of the line below the buttons gsap.to( blueLine, { duration: 0.5, left: tab.offsetLeft, width: tab.offsetWidth, overwrite: false, lazy: false } ) As you can see on the video it looks like gsap is resetting the "left" property to 0 and animates it from there. Is there a way to not reset the value and instead animate from the current property value? I couldn't find anything about it in the docs or forum. Screen Recording 2023-01-24 at 00.43.10.mov
  5. Hi In my codepen example, when mouse enters the red area, I start 5 tweens, one on each grey bar in the green area. When mouse leaves the red area, I kill all the tweens. Each bar is supposed to grow/shrink to a random value (height css prop), and then when it's finished, repeat this to another random value. It is working almost correctly. The only thing that bothers me is, when you leave the mouse in for a few iterations, sometimes a tween will randomly change his From value before going to his To value. This is making some of the bars randomly "jumping". I am using repeatRefresh: true, and from what I understand, it is supposed to force the next loop using current values as From values. So why are some of these animations still "jumping"? I also tried to use immediateRender: true and overwrite: true, but it changed nothing. Any idea?
  6. Right here: gsap.utils.toArray("#menu a").forEach(el => { let linkTo = document.querySelector(el.getAttribute("data-link")), st = ScrollTrigger.create({trigger: linkTo, start: "top top"}); // create a ScrollTrigger just to track the location of the linkTo element, including pinning, etc. el.addEventListener("click", event => { event.preventDefault(); // don't let the browser jump to the link gsap.set("body", {overflow: "scroll"}); gsap.to(window, {scrollTo: st.start, overwrite: "auto"}); }); }); Jack is creating a ScrollTrigger instance for each section and then getting the start value of that particular ScrollTrigger instance. Finally it passed that to the ScrollTo plugin which creates the scroll animation. I updated the codepen example in order to close the menu as well: https://codepen.io/GreenSock/pen/MWBvVKa Let us know if you have more questions. Happy Tweening!
  7. Hi @Fabian W and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GSAP! 🥳 What you are looking for is the invalidateOnRefresh configuration option in the ScrollTrigger configuration object: Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. https://greensock.com/docs/v3/GSAP/Tween/invalidate() This seems to work the way you intend: let t1 = gsap.to(c1, { scrollTrigger: { scrub: true, start: () => 0, end: () => 'max', markers: true, invalidateOnRefresh: true,// <- HERE }, y: () => document.body.clientHeight - c1.clientHeight, ease: 'none', overwrite: 'auto' }); let t2 = gsap.to(c2, { scrollTrigger: { scrub: true, start: () => 0, end: () => 'max', markers: true, invalidateOnRefresh: true,// <- HERE }, y: () => document.body.clientHeight - c2.clientHeight, ease: 'none', overwrite: 'auto' }); Hopefully this helps. If you have more questions let us know. Happy Tweening!
  8. 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.
  9. Thanks for your further help @Rodrigo, I added overwrite, and it seems that the bubbling is stopped, but it still doesn't work correctly. When I scroll, sometimes it works but sometimes does not. How it doesn't work is that the scroll goes to the next panel and back. https://codepen.io/haruka1234/pen/eYjgGvW?editors=1010
  10. Hi, This should work: const roll1 = roll(".rollingText", {duration: 10}), roll2 = roll(".rollingText02", {duration: 10}, true), scroll = ScrollTrigger.create({ onUpdate(self) { if (self.direction !== direction) { direction *= -1; roll1.timeScale(direction * 3); roll2.timeScale(direction * 3); gsap.to([roll1, roll2], {timeScale: direction, overwrite: true, duration: 1}); } } }); Happy Tweening!
  11. Your overall timeline has a scrub: true, this makes it animate on the users scroll position, but you overwrite this scrub (TIL you can overwrite ScrollTrigger properties within a tween!? Edit: No you can't!) within the frame animation and set it to 0.5, this makes it lag behind 0.5 seconds, which will result in it still playing when the next animation is already in view. You could do a few things to resolve this: Set the scrub the same for all animations on the timeline. Have a delay of 0.5 on the next animation either with the position parameter or a delay: 0.5 on the tween Hope it helps and happy tweening!
  12. Hi, OK, thanks for that information, I can see the confusion now. There is no issue at all here, everything is working as expected. The difference between desktop and a touch device are these event handlers: container.addEventListener("mouseenter", () => { reversedOnPause = tl.timeScale() < 0; isOver = true; gsap.to(tl, {timeScale: 0, duration: 1, overwrite: true}); container.classList.add("paused"); }); container.addEventListener("mouseleave", () => { isOver = false; gsap.to(tl, {timeScale: reversedOnPause ? -1 : 1, duration: 1, overwrite: true}); container.classList.remove("paused"); }); So when there is a touch start event in a device it acts as a mouse enter, but the touch end doesn't act like a mouse leave, you actually have to touch elsewhere, outside the boundaries of the container element, to trigger the mouse leave. If you remove those event listeners or add a different logic for touch events it should work as expected. Happy Tweening!
  13. Hi @dhdbtkd welcome to the forum! By default ScrollTrigger selects the the body (or HTML) as the scroll element, eg the element that normally scrolls. If you want to overwrite that, you'll have to define what element is the scroller in your case scroller: ".myScroller", for it to work. (I gave your element a class of myScroller) String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. Read more on the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger https://codepen.io/mvaneijgen/pen/JjZEyVo Personally I wouldn't overwrite the normal browser behavior if you don't have a clear use case for it. In your case you can just set the header and footer to position: fixed; and have the browser behave like it normally does, but that is just my opinion. Hope it helps and happy tweening!
  14. Hi all, In the CodePen I've set up a basic toggle that opens and closes a div. As part of the animation, the padding also expands from 0px to 20px. The 20px is however currently hard coded. What's the best way to store the divs original padding and refer to this for future animations? As currently if for example the button is toggled before the animation completes, the padding would return for example 10px if it wasn't hard coded. I was wondering if gsap had any way to store such properties? Or just storing it in a data attribute on the div is a fine solution.
  15. we can play animations when we click on the Nav "Slides 1 2 3..." and i want it to start as Slides[0] index array element that is Slide A as already Played or Finished animation, and then we can click on Nav slides to play the animation the issue im having is, i want when i click on Slide 2 3 4 or 5 it should Overwrite gsap.set property Slides[0] by GSAPSlideTL or in other words Slides[0] is not working when click animation to play GSAPSlideTL thank you
  16. If you want it to happen for each of your images, then set the ScrollTrigger up in the forEach loop over the images. Adjust its start so it is the same as the start for the ScrollTrigger that is scrubbing the image-height plus half a window's height. Set your colors-array up, so that it also contains the initial color as the first value and then target the colors like this in your callbacks. // pseudo-code... const colors = [firstPanelColor, secondPanelColor, thirdPanelColor, fourthPanelColor ] onEnter: () => { gsap.to("body", { duration: 0.5, backgroundColor: colors[i+1], overwrite: 'auto' }); } onLeaveBack: () => { gsap.to("body", { duration: 0.5, backgroundColor: colors[i], overwrite: 'auto' }); } https://codepen.io/akapowl/pen/rNKORBb
  17. it seems I didn’t quite understand you, or I didn’t explain it well, I know how to change the background when the first panel reaches 50%, but how to change the background of the next ones so that each panel has its own color, I tried to do this, but the panel changes color only 1 time per black const colors = ['#F5EBFF','#EEF8FF', '#000000'] ScrollTrigger.create({ trigger: "section.black", scroller: ".scroller", start: () => "top -" + (window.innerHeight * 0.5), onEnter: () => { console.log('color', colors[i]) gsap.to("body", { duration: 1, backgroundColor: colors[i], overwrite: 'auto' }); }, onLeaveBack: () => { gsap.to("body", { duration: 1, backgroundColor: i === 0 ? '#ffffff' : colors[i-1], overwrite: 'auto' }); }, invalidateOnRefresh: true })
  18. Hi, In the animation, overwrite: true is not working with mask animation, works fine on other normal tweens. Works fine once animations are finished. Thanks for your help, always appreciated.
  19. Definitely. If you don't kill() that animation, it will keep running. So every time there's a resize event, it'll create a whole new infinitely-repeating tween and every one of them will be fighting for control of the same properties of the same targets. You don't notice it because basically the "last one wins". So you may have 100 animations all running and tweaking the same property, but the last one created is the last one that runs, thus the final render looks correct. You just have a bunch of unnecessary tweens doing unnecessary work. You could set overwrite: true or overwrite: "auto" if you prefer, but I think it's cleaner/faster to just kill() the old tween before you create the new one. Yep. Here's a technique I use: // reusable function that handles setting it all up for you... function callAfterResize(func, delay) { let dc = gsap.delayedCall(delay || 0.2, func).pause(), handler = () => dc.restart(true); window.addEventListener("resize", handler); return handler; // in case you want to window.removeEventListener() later } Usage: callAfterResize(loop); By default, it'll wait until 0.2 seconds elapses with no "resize" events before calling the function, but you can customize it, like if you want it to wait 0.5 seconds instead: callAfterResize(loop, 0.5); Done. ✅ Have fun!
  20. Hey, folks! My team over at The DataFace has this nifty Svelte action powered by GSAP that we've been using for the past few projects. It blends a few approaches that we've seen in the forums. I thought we'd share the wealth with a few key examples in this repl. We have a more complex version that handles timeline positioning that I can share once it's refined. import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger); export default (node, { type, children, scrollTrigger, ...args }) => { let targets = children ? node.children : node; let timelineArgs = scrollTrigger ? { scrollTrigger: { trigger: node, start: 'top center', ...scrollTrigger } } : {}; let timeline = gsap.timeline(timelineArgs)[type](targets, { ease: 'power2.out', overwrite: true, ...args }); return { update(params) { timeline.duration(params.duration); }, destroy() { timeline.killTweensOf(targets); } } };
  21. How do I overwrite scrollTrigger with an other timeline that also scrollTo the element on click, but keep the scrollTrigger alive to use the `onLeave` trigger? I have a page with videos and on scrollTrigger enter the videos should play and scale a bit (✅ working), but then when the user clicks the video should scale to 100% (❌ not working). I've set the property `overwrite: true` on the time line, but that doesn't seem to work in combination with scrollTrigger. In my demo you can see an orange box that scales to 100% on click, the video tries to do the same, but is taken over by the scrollTrigger timeline which I want to overwrite. I've tried killing all the scrollTriggers, but I need the `onLeave` trigger for when the user scrolls away again, so I can scale the video back and pause the video
  22. Hi, The issue is not really about overwritting, that's a completely different situation. Basically what's happening here is that you have different event handlers battling for control to play/reverse the same GSAP instance, nothing more. A simple boolean and some conditional logic seems to solve the issue, in order to prevent ScrollTrigger's update callback from controlling the instance: https://codepen.io/GreenSock/pen/Yzvdpog Here you can read more about overwrite: https://greensock.com/docs/v3/GSAP/Tween/vars Let us know if you have more questions. Happy Tweening!
  23. (In Animate CC) I have been at this for a while but cant figure out how to restart an animation from the beginning values when I use an overwrite. A basic example. On "tl2" timeline a symbol scales slowly from 0 to 100. After 3 seconds "tl" timeline overwrites and scales this symbol back to 0. Both of these timelines are nested inside a "maintl" that runs on a endless loop. In this case when "maintl" restarts the "tl2" symbol is not at 0 scale but at where it was cleared and scaled back to 0 by "tl". How to restart the "maintl" so that scaling starts again from 0. var maintl = gsap.timeline({repeat:-1}); var tl = gsap.timeline({repeat:0}); var tl2 = gsap.timeline({repeat:0}); //tl1 tl.to([this.ring],{duration:0.5, scale:0, ease:"none", overwrite:"auto"},"+=3"); tl2.to([this.ring],{duration:6, scale:2.5, ease:"none"},"+=0"); //maintl maintl.add(tl,0)//starts at time of 0 .add(tl2,0) Thanks in advance.
  24. I'm not entirely sure how you want it to work, but it may be as simple as: ScrollTrigger.create({ trigger: el, start: 'top 50%', end: (self) => '+=' + el.offsetHeight, onToggle: (self) => { if (self.isActive) { gsap.to('body', { backgroundColor: color || 'transparent', duration: 0.6, overwrite: 'auto', }); } }, }); The way it was set up in Rodrigo's demo made the ScrollTriggers overlap which would cause the tweens to fight with each other during the overlaps.
  25. 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?