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 Jose and welcome to the GreenSock forums. There are several ways to handle this sort of thing, the best depends on the effect that you want. If you want it to be smooth (no jumps) no matter what you have a couple of options: Use a single timeline to animate between the various states. Inside of the callbacks you animate the timeline's progress to a certain location. You should probably use overwriting on that tween. It'd look something like this: // helper function function getProgressOfLabel(tl, label) { return tl.labels[label] / tl.totalDuration(); } // in the ScrollTrigger onEnter: () => gsap.to(tl, {progress: getProgressOfLabel(tl, "myLabel"), ease: "none", overwrite: "auto"}) Create tweens when you need to use them (instead of using ones created in the past). That way they can use the current value as the start value. You should use overwriting on that tween. This is probably the method that I'd use. It'd look something like this: onEnter: () => gsap.to(box, { duration: 3, x: 350, y: 30, rotation: 45, ease: "expo.inOut", overwrite: "auto" })
  2. If you use a timeline you would create a timeline with two tweens with some space between (probably using the position parameter of the second tween). The ScrollTrigger's start value would be the start value of your current entry ScrollTrigger. The end would be the end value of your current exit ScrollTrigger. Does that make sense? Alternatively you could use the onEnter and onLeave callbacks to fire entry and exit animations. Just make sure they have overwrite: 'auto' to kill off each other if you do that.
  3. There is a timeline type. No need to do gsap.core.Timeline. (tl: GSAPTimelime, animData: Animation[]) I don't think you should be using Animation as class name. That already exists. https://developer.mozilla.org/en-US/docs/Web/API/Animation If you want to use a class like that, then you should provide default values. class MyAnimation { x: number = 0 y: number = 0 rotation: number = 0 duration: number = 0 constructor(...) {} } But I would recommend just using plain old JavaScript objects. GSAP adds properties to the object, like delay, ease, and overwrite.
  4. Just add on both your #outer_circle tweens overwrite: true after scale, that should take care of it
  5. Hey Phd and welcome to the GreenSock forums. In terms of GSAP, if you want an animation to be replay-able you should save it to a variable. Then you can use control methods on that animation to affect its play state: // gsap, not gasp ;) var slideIn = gsap.fromTo(".text", {xPercent: -100}, {xPercent: 0, duration: 2, ease: “none”, overwrite: “auto”}); // later slideIn.restart(); // simple! However, how you call that method in Adobe Captivate is a question completely unrelated to GSAP. Unfortunately I'm not aware of any regulars here who use Adobe Captivate. I recommend asking that question in Adobe's forums.
  6. I have been trying to get a text rollout animation working in Adobe Captivate. A kind person on the Adobe forums responded with an example making use of GSAP library using the fromTo command, which largely resolves the problem. The animation is dropped into a Captivate slide as a zipped up .html file to animate the text at a certain point on the timeline, only compatible with HTML5 output, which is fine. The problem is that if the slide is replayed, e.g. by restarting the timeline or rewinding and replaying, the fromTo animation does not replay, it only works by refreshing the whole browser page and restarting the player. The question is, how can I get the fromTo to replay correctly if the player timeline is rewound? Gsap code is: gsap.fromTo(“.text”, {xPercent: -100}, {xPercent:0, duration: 2, ease: “none”, overwrite: “auto”});
  7. That's because it will create a new tween every time that the count state updates. Sorry, I don't really use React and this is 100% a React question so I'm probably not the best equipped person to do it If this is all you're doing then you could just use a tween with overwrite: true https://stackblitz.com/edit/react-nempcw With that being said, @OSUblake, @Rodrigo, or @elegantseagulls will probably come by and correct my ignorance. Also FYI there was a recent article made about hooks + GSAP by @Ihatetomatoes that might be useful: https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/
  8. Definitely include overwrite: "auto", or overwrite: true, on your tweens. You can set that as a global default if you want: gsap.defaults({overwrite: "auto"});. Besides that nothing sticks out.
  9. Yep, the problem is that you've got competing scrubs (as you know). Also, you're breaking each "section" into individual tweens so if you scroll really fast from section 2 to 3 but due to the delayed scrubbing, the one from section 2 is barely into its progress, but you're also asking #3 to start scrubbing its (separate) tween simultaneously which goes from completely different progress values. I'd suggest just using ONE overall linear tween, and then animate the progress of that tween in an onUpdate of the ScrollTriggers like this: https://codepen.io/GreenSock/pen/pogpYVa?editors=0010 let sections = gsap.utils.toArray(".step"), // do the entire ball tween (across all), linearly ballTween = gsap.fromTo(".ball", {scale: 0}, {scale: sections.length * 2, ease: "none", paused: true}), // we'll tween the playhead of ballTween with this separate tween. This creates the delayed scrub (2 seconds to catch up, or whatever duration you define) tween = gsap.to(ballTween, {duration: 2, ease: "power3", paused: true}), // progress incremenet inc = 1 / sections.length; sections.forEach((step, i) => { ScrollTrigger.create({ trigger: step, start: "bottom bottom", end: "+=1000", pin: true, onUpdate: self => { tween.vars.progress = (i * inc) + self.progress * inc; tween.invalidate().restart(); } }); }); I'm reusing the same "tween" instance over and over and simply altering its vars.progress and then invalidating it solely to improve performance. A simpler (but less performant) option would be to gsap.to(ballTween, { progress: (i * inc) + self.progress * inc, duration: 2, ease: "power3", overwrite: true}) in the onUpdate but that creates a new tween instance each time (somewhat wasteful memory-wise). Now you get a perfectly smooth delayed scrub across everything. 👍 Is that the effect you're after?
  10. Thanks Zach. I used the onUpdate method and tweens per tick with overwrite. I initially used the same values for duration that I had used for the scrub, which should then theoretically take the same amount of time (without a performance drawback and infinite ticks per second). I had to change the values a bit because it got a bit slower after all, i think. But maybe that's just subjective because of the blinking before. https://codepen.io/Skadi2k3/pen/RwrjqWP?editors=0010
  11. Hi guys, I am using ScrollTrigger batch like this: gsap.set(".column", {opacity: .5, y: 20}) var scroll = ScrollTrigger.batch(".column", { batchMax: 6, interval: .3, onEnter: batch => { gsap.to(batch, { opacity: 1, stagger: .3, duration: .5, y: 0, overwrite: true, }); }, onLeaveBack: batch => { gsap.to(batch, { opacity: 0.5, duration: .3, y: 20, overwrite: true }); }, start: "center bottom", end: "center top", }); scroll.getAll().kill(); And I tried to kill it like in example above, but it doesn't work. I am trying to be able to overwrite ScrollTrigger instance that I created - say that this code exists in my base.js file, now I am wondering if there is a way of overwriting all of those animations or simply get rid of them in my project.js file?
  12. .then() function helps in solving my first issue, just that it came with another - tweens with .then callbacks breaks repeat settings for parent timeline. Regarding your question: If someone clicks the left button, do you want both cubes to rotate? Or just one? If just one, are there going to be buttons for every cube? In my case, I do not have buttons, but rather a scroll event when mouse is being hovered on any cube. So for simplicity, let's say, buttons for each cube. What I want is that when user clicks a button (of any cube, or scrolls on any cube in my case) for master timeline keep its' time settings so that when clicking and calling rotate(). rotate(dir = 1, origin) { this.iteration += dir; let delay = origin === "mouse" ? 0 : 2; console.log("rotate", this.iteration % 4, "wall data"); let tl = gsap.timeline(); console.log(this.iteration); tl.to(this.productCube, { rotateY: this.iteration * 90, delay: delay, duration: 2, overwrite: true, }); return tl; } it wouldn't interfere (make any changes in regards to time) with: startRotation() { console.log("start rotation"); let tl = gsap.timeline(); tl.add(this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()); return tl; Any help is appreciated.
  13. I appreciate your help a lot. The full idea of what I want to achieve can be seen at the codepen below, although there is a lot of smelly code not related to GSAP so I do not recommend diving into it. The idea is several cubes or more, where everyone rotates from 0 to 360, or does any animation of any sort by 0.5 delay from the previous cube, and repeats the cycle after all cubes have finished the animation. In addition, the animation must be playable by outside interactions. So I at the moment I have a rotate method (in ProductCube) which rotates the cube by 90 degrees to a given direction: rotate(dir = 1, origin) { this.iteration += dir; let delay = origin === "mouse" ? 0 : 2; console.log("rotate", this.iteration % 4, "wall data"); let tl = gsap.timeline(); console.log(this.iteration); tl.to(this.productCube, { rotateY: this.iteration * 90, delay: delay, duration: 2, overwrite: true, }); return tl; } Furthermore, I have a method to start initial timeline for one single cube, to rotate the cube from 0 to 360 degrees. startRotation() { console.log("start rotation"); let tl = gsap.timeline(); tl.add(this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()) .then(() => this.rotate()); return tl; Lastly, I have another class and method (in ProductShowcase) which starts rotations for all cubes. init() { let tl = gsap.timeline({ repeat: this.repeat, repeatDelay: this.repeatDelay, delay: this.delay, }); tl.addLabel("start") .add(this.cubes[0].startRotation(), "start") .add(this.cubes[1].startRotation(), "start+=0.5") .add(this.cubes[2].startRotation(), "start+=1"); this.animation = tl; } Additionally, I have a function for user interactions which upon scroll rotates any cube additionally. function cubeScroll(target, event) { window.clearTimeout(isScrolling); isScrolling = setTimeout(function () { console.log("Scrolling has stopped.", event.deltaY); console.log(target); if (event.deltaY < 0) { target.rotate(-1, "mouse"); } else if (event.deltaY > 0) { target.rotate(1, "mouse"); } }, 200); } My Issues: The main timeline "init" does not repeat if any child tween has .then() callbacks If I use .add() instead .then(), then all tweens starts from 0, which basically ends up with the last one, from 0 to 360 running instantly rather than by slice, 0-90, 90-180, so on. Will try ".fromTo" in the meantime, by remembering the last degree. any rotate from anywhere else than the main timeline ( in "init" method) breaks the timeline. If you would try to to scroll on the second cube, it would fall out of the chain, and later on, would be the last rotating cube. Will try to have a seperate tween for it. https://codepen.io/affkatron/pen/yLezLGm?editors=0010 Thanks for your ideas in advance.
  14. Hello, I wanted to overwrite the properties of same element on page animated in two different functions. e.g hover function: $(".showcase-item").hover(over, out); function over(){ var hoverAnimation = new TimelineMax(); hoverAnimation.to($(this).find(".showcase-background"), 0.5, {backgroundPosition: '50% 50%',ease: Power1.easeOut}); } function out(){ var hoverAnimation = new TimelineMax(); hoverAnimation.to($(this).find(".showcase-background"), 0.5, {backgroundPosition: '25% 50%',ease: Power1.easeOut}); } click function: $('.showcase-item').on("click", function(){ var showcaseOpen = new TimelineMax(); showcaseOpen.to($(this).parent(), 0.5, {width: '100%',position:'absolute',zIndex:9,ease: Power1.easeOut}) showcaseOpen.to($(this).find(".showcase-background"), 0.5, {scale:1.3,backgroundSize:'contain',backgroundPosition:'0% 50%',ease: Power1.easeOut,'-=0.2'); }); In above code, 'backgroundPosition' has two different values. I want backgroundPosition on hover to be overwritten by one on click.
  15. I don't think it's actually possible to get the behavior you're expecting. Allow me to explain... The "auto" overwriting occurs the first time the tween renders (it looks for other overlapping tweens at that point and kills them). Once a tween (or a portion of a tween) is dead, it's permanent. GSDevTools forces the playhead of the root to the end initially and then back again in order to ensure the accuracy of the duration. For example, a timeline.tweenTo() may be embedded somewhere, and it can only discern its duration once there's a render and it can sense where the playhead is. In other words, if we DON'T force the playhead to the end and back again, the duration may suddenly change once that tweenTo() begins. Plus doing a progress(1).progress(0) allows all those instantiation tasks to run initially, thus you get better performance during the animation. So in your example, the overwrite would happen right away (when the progress(1).progress(0) happens), thus you'd never see the initial y: "-=20" animation because it's dead as a doornail. So it's more of a logic issue than a bug (unless I'm totally missing something). In the next version of GSAP/GSDevTools, I will fix that issue that prevented "auto" overwriting from occurring, but that doesn't solve your example as I explained above. It'll just nuke that first tween right away (which is the proper behavior from what I can tell). I'd generally advise NOT to build animations like that where they overlap. I suppose sometimes it's tough to avoid - it's not like you're breaking a cardinal rule, but as you see here it can create some logic problems in some scenarios. It'd be better to build your sequence properly so that the "y" value goes up with one tween, and then down with another, and don't overlap them. Does that clear things up at all? Sorry about any confusion there. It's quite an edge case. And again, it'd only affect overwrite: "auto" when GSDevTools is run on the root.
  16. Hello guys, I'm trying to use ScrollTrigger.batch with typescript, but I can't set the markers nor the triggers, when I try yo put the markers for instance it says: Argument of type '{ onEnter: (batch: Element[]) => Tween; markers: boolean; }' is not assignable to parameter of type 'ScrollTriggerBatchVars'. Object literal may only specify known properties, and 'markers' does not exist in type 'ScrollTriggerBatchVars'.ts(2345) my code so far: gsap.set(".work", { y: 100 }); ScrollTrigger.batch(".work", { onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true, }), markers: true, }); am I doing something wrong?
  17. Hey Sonya and welcome to the GreenSock forums. You should use your developer tools console (F12) to check for errors. Opening it up for your pen I see "Uncaught TypeError: ALL_FUNCTIONS.sectionOne is not a function". I'm guessing those are additional animations that you took out for the sake of the demo (thanks for doing that). FYI we recommend using the GSAP 3 way of formatting. For more about that check the GSAP 3 migration guide. The main issue is that you're using an older version of ScrollTrigger that has a bug related to zero duration timelines with ScrollTriggers. Update the file to version 3.3.3 and it will animate some. But you'll still need to change your code a bit because you need a way to animate back to the previous section on reverse. I might do it by calling your method with the previous item - something like this: tl.call(ALL_FUNCTIONS.styleTheNav, [prevmenuitem]); - before you call the item that shows for that section. That way when you reverse it it'd call the previous one second. If you have overwrite: "auto" on those tweens, it should animate the way you want. I'd also recommend a toggleActions of toggleActions: "play none none reverse". I noticed that you tried to use the position parameter on non-timeline tweens. That won't work because the tweens have nothing to position them in regards to. Happy tweening.
  18. Hi, I'm getting many warnings in console while using gsap.from() with immediateRender: false on DOM elements (CSSPlugin). gsap.from(".box", { opacity: 0, y: 100, duration: 1, immediateRender: false }); warnings: "Invalid property" "duration" "set to" 0 "Missing plugin? gsap.registerPlugin()" "Invalid property" "repeat" "set to" 0 "Missing plugin? gsap.registerPlugin()" "Invalid property" "delay" "set to" 0 "Missing plugin? gsap.registerPlugin()" "Invalid property" "ease" "set to" 1 "Missing plugin? gsap.registerPlugin()" "Invalid property" "overwrite" "set to" false "Missing plugin? gsap.registerPlugin()" "Invalid property" "data" "set to" "isFromStart" "Missing plugin? gsap.registerPlugin()" "Invalid property" "lazy" "set to" false "Missing plugin? gsap.registerPlugin()" "Invalid property" "immediateRender" "set to" false "Missing plugin? gsap.registerPlugin()" "Invalid property" "stagger" "set to" 0 "Missing plugin? gsap.registerPlugin()" it started with version 3.3.0
  19. If i use two timeline for one element, second timeline overwrite attributes Timeline on view: tl_inview .fromTo('.slide01 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}) .fromTo('.slide01 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "-=0.5") Timeline for chage slides: tl_slides .fromTo('.slide01 .box1', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'}) .fromTo('.slide01 .box2', {autoAlpha: 1, y: 0}, {autoAlpha: 0, y: '+=50'}) .addLabel('start') .fromTo('.slide02 .box1', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start") .fromTo('.slide02 .box2', {autoAlpha: 0, y: "+=50"}, {autoAlpha: 1, y: 0}, "start") On page load i have <div class="slide01"> <div class="box1" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div> <div class="box2" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;"></div> </div> https://codepen.io/-greg-/pen/qBbqvPQ I want that tl_inview play only once (only if scroll from top)
  20. Hi together, i only wanted to know how it's possible to manipulate/skip a single stagger element, which was already defined on a whole stagger object. The thing is, i have to stagger objects inside a timeline. The stagger runs through around 14 objects, start to make them move and after they're in move the playhead is jumping directly to the fadein. Doing a single stagger which different times and props i'm not aware of. Most of the objects fadein to autoAlpha 1 but 1 one of them should be manipulated further later on and the single asset need to fade only to .25. So my question is how is the best solution to manipulate that property. I'm not sure at the moment how to change/overwrite a prop onStart, or to exclude a single dom object by class name instead of an array not:filter. This is a raw in between code by me, but maybe it gives an idea what i try to figure out. Thx Peter const contact_profile = '.hero-home-introduction__contact-profile'; const female_02 = '.hero-home-introduction__female-02'; let tl_home_introduction = gsap.timeline(); // Scene 1 - Show conversation const tl_scene_1 = gsap.timeline({ id: "Scene 1"}) tl_scene_1.to(contact_profile, { duration: 5, y: '-=20', stagger: { each: .5, from: 'random', delay: -.5, repeat: -1, yoyo: true }, ease: "power1.inOut", delay: .2 }); tl_scene_1.to(contact_profile, { duration: 2, autoAlpha: 1, stagger: { each: .2, from: 'random', onStart() { let className = this.targets()[0].getAttribute('class'); if (className === 'hero-home-introduction__contact-profile hero-home-introduction__female-02') { // Overwrite here // Or } } } },14); // tl_scene_1.to(female_02, { duration: 2, autoAlpha: .25},15); tl_home_introduction.add(tl_scene_1); tl_home_introduction.play(14);
  21. Hey capa. You've got a lot of code for a pretty simple effect. I recommend rewriting your code to be more concise and understandable. Here's the outline of what I'd do: Make a function that receives an index as a parameter and fades in the appropriate image and makes the relevant dot more opaque while at the same time does the opposite to the currently active image and dot (perhaps using a stored index to know which one is currently active). Make sure that overwrite is set to "auto" or true for those tweens. Create a delayedCall that calls the function from 1 after a set period of time but make sure that you save a reference to the delayedCall. Modify the function from #1 to cancel and create a new delayedCall similar to #2 but based on the index after the given one. This is what you're not doing in your demo. Add click functions to the dots to call the function from #1. Simple
  22. Hello, I have setup a react codesandbox, and the same problem happens https://codesandbox.io/s/91ct7 to see really the problem go to the full screen url https://91ct7.csb.app/ as sometimes it works in the sandbox until you reload the browser It doesn't happen in basic html https://codepen.io/alexadark/pen/QWyGNZj it also happens on other animations onEnter, for ex here https://cadell.netlify.app/more I did a batch animation on the 3 boxes in the middle , taking example here https://codepen.io/GreenSock/pen/zYrxpmb like that useEffect(() => { if (typeof window !== `undefined`) { gsap.registerPlugin(ScrollTrigger) gsap.core.globals("ScrollTrigger", ScrollTrigger) } gsap.defaults({ ease: "power3" }) gsap.set(".confWrap", { y: 50 }) ScrollTrigger.batch(".confWrap", { onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15 }, overwrite: true, }), onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }), onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 100, overwrite: true }), }) }, [])
  23. Like I said, I try a few things but nothing works. I think problem is in Pixi Plugin. Without Pixi Plugina, but with Pixi.js and only gsap, you can overwrite tween (make function which recreate that same tween) and this way dynamically update certain value in onComplete. In my example I chose the easiest way, change value through PIXI.js. https://codepen.io/isladjan/pen/pogjGNa
  24. 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).
  25. Wow Zach, things can be so simple!! This is what totally solved it for me: tweenMousePosition(newPos) { gsap.to(this.mousePos, 0.8, { x: newPos.x, y: newPos.y, onUpdate: () => this.adjustMask(), ease: "power4.out", overwrite: "auto" }); } Thanks so much for your help!!