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. I was looking at this reference link here: // 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 } }); Maybe I need to set the overwrite in a difference place than a the begining of the tween. Basically seems like the timelines are conflicting each other, and not terminating the movements of the previous timeline. There are other problems , but it is better to keep them in a separate thread.
  2. Looks to me, like what you are actually doing with that tween is to tween him to his final position on the y-axis again, which is below/outside of that section and since you have overwrite set to true that will overwrite any other tweens on that parachute-guy, thus he won't be visible anymore after that. Since you have a scrub set, the timeline will play in reverse anyway when scrolling back up, so I do not see a real necessity for that tween. Some sidenotes: the toggleActions you have in that same scrollTrigger does not do anything. toggleActions and scrub are exclusive properties, they don't work alongside each other. When you have both set, the scrub will always be the one taking control of your scroll-animations for that ScrollTrigger. ScrollTriggers do not have a duration property. The duration - i.e. the amount of scroll - is being defined by the start and end of a ScrollTrigger. So maybe what you meant instead of duration: "150%" is end: "+=150%" ? let parachute = new TimelineMax({ ... }) is old syntax. I would suggest using the newer GSAP3 syntax for timelines: let parachute = gsap.timeline({ ... })
  3. I read your question a few times and I'm lost. Sorry You'll significantly improve your chances of getting a good answer if you isolate things as much as possible in a minimal demo. You shouldn't need 100 lines of JS just to show the challenge you're struggling with. Just a couple of <div> elements and a timeline or two with minimal tweens is ideal, just to show the concept. Strip out everything you possibly can. You also might want to look at this (although since I don't understand your question it may not be relevant here): By the way, there's no such thing as overwrite: true on a timeline. That's a tween special property. You can set defaults on a timeline, though, that get passed to all the child tweens. gsap.timeline({defaults: {overwrite: "auto", ease: "none"}}) That can save you some typing.
  4. Saaaay.... Is there a way to tied the timeline to the START and the END of the first tween? If I use the fromTo method it seems as if cylrod jumps to the from position regardless of where he might be located. If I use the the to method and cylrod starts from a ramdon position, then the rest of tweens fall behind thinking cylrod is always starting from the begining. The "<" is good the start motions in relation to the first tween... but it doesn't do anything to tell the rest of the tweens that the first tween already reached his finished point.. var extend = gsap.timeline({paused: true, overwrite:true}); extend.fromTo(cylrod, {x:0, duration:5, ease: "none"}, {x:200, duration:5, ease: "none"}); extend.to(pline1, {opacity:0, ease: "none"}, "<"); extend.to(rvarrow, {y:0, duration: 0.1, ease: "none"}, "<"); extend.to(sola, {opacity:1, ease: "none"}, "<"); extend.to(aline1, {opacity:1, ease: "none"}, "<"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to(aline1, {opacity:0, ease: "none"}, "+=0.1"); extend.to(rvarrow, {y:-14, duration: 0.1, ease: "none"}, "<"); extend.to(aline2, {opacity:1, ease: "none"}, "<"); extend.to(sola, {opacity:0, ease: "none"}, "+=1"); extend.to(aline2, {opacity:0, ease: "none"}, "<"); extend.to (pline1, {opacity:1}, "<"); extend.to (bline1, {opacity:0}, "-=5"); extend.to (bline2, {opacity:0}, "-=5"); extend.to (solb, {opacity:0}, "-=5"); https://codepen.io/Elindo586/pen/xxrbWyY
  5. Do I need to wrap them in some sort of brackets? If so, how do I do that? The timing and sequence for each timeline is now exactly how I wanted it. I added overwrite:true for each timeline, so it would kill any conflicts with other timelines. and I added .kill() for each button so it would kill the other buttons. var start = gsap.timeline ({paused:true, overwrite: true}); btnstop.onclick = () => stop.play(); extend.kill retract.kill The problem is that the buttons and timelines are not killing the actions of previous timelines, even after I added specific details to do this job.. ALSO, for some reason the timelines are working only once per each loading of the page...
  6. Ok, this might sound silly, but I haven't been able to time the tweens properly. What would be the values to activate some tweens at the START, and some tweens at the END from the first tween in the timeline? The first tween has a duration of 4 seconds from start to end. I have an example below of 11 tweens. all which should be timed in relation to the start and and the end of the very first tween which has a duration of 4 seconds.... tweens 2,3,4, should activate at the same time as the START of tween 1 tweens 5, 6, 7 should activate at the same time as the END of tween 1 tweens 8,9,10,11 should activate at the START of tween 1 (These are items I want to keep OFF, but are included in this timeline because they might have been activated from previous timelines) var retract = gsap.timeline({paused:true, overwrite: true}); retract.to(cylrod, {x:0, duration:4, ease: "none"}); retract.to(solb, {opacity:1}, "-=4"); retract.to(bline1, {opacity:1},"-=4"); retract.to(rvarrow, {y:0, ease: "none", duration: 0.1}, "-=4"); retract.to(bline1, {opacity:0}, "+=4"); retract.to(bline2, {opacity:1}, "-=4"); retract.to(rvarrow, {y:-14, ease: "none", duration: 0.1}, "=4"); retract.to (pline1, {opacity:0}, "-=4"); retract.to(aline1, {opacity:0}, "-=4"); retract.to(aline2, {opacity:0}, "-=4"); retract.to(sola, {opacity:0}, "-=4");
  7. Thanks!!! I think the overwrite:true will help on some of the conflict. As far as turning the opacity off, I wrote another line in the same tween after turning it off after a few seconds of turning it on. extend.to(aline1, {opacity:1}, "-=5"); extend.to(aline2, {opacity:1}, "+=5"); extend.to(aline1, {opacity:0}, "+=01"); The timing still pretty bad, so I need to study how to adjust it to turn them on and off in relation to the movement of cylrod on top. This coding thing is taking longer than I was thinking, but if I get to work through some of these rules I would be able to do animate a few more circuits..
  8. You definitely shouldn't be using WebKitCSSMatrix like that - it would be much cleaner (and more compatible) to use a simple gsap.getProperty(".ticker-wrapper", "x") but you don't even need to do that. Here's a different approach that leverages a simple xPercent animation: https://codepen.io/GreenSock/pen/rNwaLvw?editors=0010 $(document).ready( function(){ $('ul li').wrapAll('<span class="ticker-items">'); var tickerWidth = $('ul').width(); var spanWidth = $('ul span').width(); $('ul span').clone().appendTo('ul'); $('ul span').wrapAll('<span class="ticker-wrapper">'); var speed = 50, tl = gsap.timeline(); tl.fromTo(".ticker-wrapper", { // intro (from far right edge) xPercent: tickerWidth / spanWidth / 2 * 100 }, { xPercent: 0, duration: tickerWidth / speed, ease: "none" }).to(".ticker-wrapper", { // loop xPercent: -50, ease: "none", duration: spanWidth / speed, repeat: -1 }); $('ul').on('mouseenter', () => gsap.to(tl, {timeScale: 0, overwrite: true})); $('ul').on('mouseleave', () => gsap.to(tl, {timeScale: 1, overwrite: true})); }); Notice that in the mouseenter/mouseleave I'm actually animating the timeScale of the timeline so that it gradually slows down or speeds up instead of suddenly stopping/starting. I just think that feels nicer, but you're welcome to do a simple tl.pause() and tl.play() if you prefer. However, I think the problem you mentioned in your previous post has to do with the fact that only one clone is done in that code because it assumes your content fills the container. You could add a loop in there to clone it multiple times but I was inspired to create a gsap.effect.ticker that should help with this: https://codepen.io/GreenSock/pen/rNwaMPo?editors=0010 gsap.registerEffect({ name: "ticker", effect(targets, config) { let master = gsap.timeline(); buildTickers(targets, config); function clone(el) { let clone = el.cloneNode(true); el.parentNode.insertBefore(clone, el); clone.style.position = "absolute"; return clone; } function nestChildren(el, className) { let div = document.createElement("div"); while (el.firstChild) { div.appendChild(el.firstChild); } el.appendChild(div); className && div.setAttribute("class", className); div.style.display = "inline-block"; div.style.boxSizing = "border-box"; return div; } function buildTickers(targets, config, isResize) { if (isResize) { // on window resizes, we should delete the old clones and reset the widths targets.clones.forEach(el => el && el.parentNode && el.parentNode.removeChild(el)); gsap.set(targets.chunks, {x: 0}); } else { targets.clones = []; targets.chunks = []; } master.clear(); let clones = targets.clones, chunks = targets.chunks; targets.forEach((el, index) => { let chunk = chunks[index] || (chunks[index] = nestChildren(el, config.className)), chunkWidth = chunk.offsetWidth + (config.padding || 0), cloneCount = Math.ceil(el.offsetWidth / chunkWidth), chunkBounds = chunk.getBoundingClientRect(), elBounds = el.getBoundingClientRect(), right = (el.dataset.direction || config.direction) === "right", tl = gsap.timeline(), speed = parseFloat(el.dataset.speed) || config.speed || 100, i, offsetX, offsetY, bounds, cloneChunk, all; el.style.overflow = "hidden"; gsap.getProperty(el, "position") !== "absolute" && (el.style.position = "relative"); // avoid scrollbars for (i = 0; i < cloneCount; i++) { cloneChunk = clones[i] = clone(chunk); if (!i) { bounds = cloneChunk.getBoundingClientRect(); offsetX = bounds.left - chunkBounds.left; offsetY = bounds.top - chunkBounds.top; } gsap.set(cloneChunk, {x: offsetX + (right ? -chunkWidth : chunkWidth) * (i + 1), y: offsetY}); } all = clones.slice(0); all.unshift(chunk); tl.fromTo(all, { x: right ? "-=" + (chunkBounds.right - elBounds.left) : "+=" + (elBounds.right - chunkBounds.left) }, { x: (right ? "+=" : "-=") + elBounds.width, ease: "none", duration: elBounds.width / speed, overwrite: "auto" }).to(all, { x: (right ? "+=" : "-=") + chunkWidth, ease: "none", duration: chunkWidth / speed, repeat: -1 }); master.add(tl, 0); }); // rerun on window resizes, otherwise there could be gaps if the user makes the window bigger. isResize || window.addEventListener("resize", () => buildTickers(targets, config, true)); } return master; } }); Once that effect is registered, all you have to do is: let tl = gsap.effects.ticker(".ticker", { speed: 100, className: "ticker-content", //direction: "right" }); So you can tweak the speed, direction, and the class name that's added to the wrapper <div> elements around the chunks. It dynamically figures out how many clones to make. It even handles resizes. You can even add data-speed or data-direction attributes to the elements instead of passing that in through the config object. I hope that helps!
  9. // you don't need 'new' let TL_mouseleave = new gsap.timeline({ id: 'TL_mouseleave' }); // no need to 'add' you can just call TL_mouseleave.to() & overwrite: false is the default TL_mouseleave.add(gsap.to('#btn', { backgroundColor: 'white', color: 'black', delay: 0, duration: 3, overwrite: false, ease: "ease.in" })); TL_mouseleave.pause(); // so it becomes... let TL_mouseleave = gsap.timeline({paused: true}); TL_mouseleave.to('#btn', { backgroundColor: 'white', color: 'black', delay: 0, duration: 3, ease: "ease.in" }); Some notes on things I changed in your pen
  10. Hey there! It's hard to help by looking at this example because I would do this completely differently - this is a really good case for creating a tween or timeline and then playing it forward/on reverse on hover. e.g. https://codepen.io/GreenSock/pen/zYzYGeN?editors=0011 In general this sounds like it's going to invite conflicts and confusion if you're animating the same properties. There wouldn't be a one case fits all approach - it would depend on which properties you're animating and what you want to happen when they conflict. overwrite:true or overwrite:'auto' will be your friends. Do you envisage the timelines being more complex than these examples? Maybe you could put together a more fleshed out example for us to see?
  11. You have conflicting tweens here, setting overwrite:true on the exit tween seems to fix the issue. Is this what you're after? https://codepen.io/GreenSock/pen/QWgWwda?editors=0010
  12. If it works on CodePen, then it's an issue with your WordPress setup. There's really not a lot we can say beyond that. Just make sure it's not messing with the scroll. It would be the same as creating a standalone trigger. ScrollTrigger.create({ start: "top top", end: "bottom bottom", snap: 1 / (3 - 1), onUpdate({ progress }) { sketch.model.rotation.y = 2 * 3.14 * progress; sketch.model.position.z = -2.6 * Math.sin(3.14 * progress); } }); Also not that the progress value isn't include in the scrub. If you want to "scrub" it, you can do something like this. let proxy = { progress: 0 }; ScrollTrigger.create({ start: "top top", end: "bottom bottom", snap: 1 / (3 - 1), onUpdate({ progress }) { gsap.to(proxy, { progress: progress, ease: "power3", overwrite: true, onUpdate() { sketch.model.rotation.y = 2 * 3.14 * proxy.progress; sketch.model.position.z = -2.6 * Math.sin(3.14 * proxy.progress); } }); } });
  13. I assume you want something like this: gsap.to(tl, { timeScale: 1, ease: "power1.inOut", duration: 2, overwrite: true }); ?
  14. Thanks nicofonseca, I have "circ.out" in my code, just an error in my message. Still doesn't seem to have any affect in the transition from the updated velocity to the default gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true, ease: 'circ.out' }); Is there a way to achieve a smoother transition?
  15. Hi, I was wondering if there is away to make a smoother transition from where I'm setting the scroll velocity to when I revert back to gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true }); I added a delay with "duration: 3" which makes it a bit smoother however adding a an ease gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true, ease: 'circa.out' }); doesn't seem to make any difference. Any help would be greatly received.
  16. Thanks for the tips, Blake. It still doesn't seem to scrub without setting markers to true. Here is a better example on the current development link: https://verhaal.netlify.app/ For full context, I am trying to mimic the behavior on this site: https://fuzzco.com/ if (typeof window !== `undefined` && location) { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.refresh(); useEffect(() => { var direction = -1 var mod = gsap.utils.wrap(0, window.innerHeight); gsap.set('.container-marquee',{yPercent:100}) var anim = gsap.to('.container-marquee', { yPercent: (100 * direction), ease: 'linear', overwrite: true, duration: 20, repeat:-1, }) function infiniteReverse() { tl.totalTime(tl.rawTime() + tl.duration() + tl.repeatDelay()); } var tl = gsap.timeline({ pause: false, repeatDelay:0.5, onReverseComplete: infiniteReverse, scrollTrigger: { trigger: document.body, start: "top top", // When the top of the trigger reaches the top of the viewport end: "bottom top", // When the bottom of the trigger reaches the top of the scroller markers: false, scrub: true, toggleActions:"restart complete reverse reset play", onUpdate: self => { direction = self.direction gsap.to(anim, { overwrite: true, timeScale: self.getVelocity() / 5, yPercent: (100 * direction), }); }, }, }); }, []) }
  17. Hi @kcarp Welcome to forums! You're not missing anything obvious, you just stumbled upon a quirk when going backwards. This post gives an explanation and helper function for onReverseComplete. Also, for a smoother transition when changing direction, you can animate the timeScale. gsap.to(anim, { overwrite: true, timeScale: self.getVelocity() / 5 });
  18. Typing too fast - yep, I meant overwrite: 'auto' I'll edit that to avoid confusion.
  19. I think perhaps you meant overwrite: "auto" on the second tween. overwrite: true immediately kills all other tweens of the same target (even if there aren't any overlapping properties). The "auto" mode only runs the first time the tween actually renders, and isolates only the individual properties that overlap. Also keep in mind that once a tween (or a property in a tween) is killed, it's dead. It doesn't come back the next time you run it. I personally favor the finishOnFastLeave() helper function approach because it avoids killing things so that if the user scrolls back up and goes slowly, things still work the way you intended.
  20. Hey @Nysh, There's still going to be a conflict between the tweens, you just can't see it as the first tween is playing too fast to notice. If we slow it down and you scroll down fast it will still be there. The magic combo in this case will be immediateRender:false and overwrite:'auto' on the second tween. This will result in the behaviour I think we were both expecting! ScrollTrigger tweens render immediately so that all the positioning can be precalculated. We want to wait and only run overwrite as the second tween plays, that way any conflicts occurring at that point will be killed. https://codepen.io/GreenSock/pen/GRmzWob?editors=0010 Here's a simplified demo with some console logs to show the start, end and when the tween's interrupted! https://codepen.io/GreenSock/pen/c298bc17db96f11251efc1740a4d10e4?editors=0011
  21. Another option: use an onToggle that checks the velocity and if it's adequately fast, it just forces the animation to its end with a reusable helper function like this: function finishOnFastLeave(self) { !self.isActive && Math.abs(self.getVelocity()) > 2500 && self.animation.progress(self.progress === 1 ? 1 : 0).pause(); } Usage: onToggle: finishOnFastLeave https://codepen.io/GreenSock/pen/eYWbZxN?editors=0010 No, overwrite logic runs ONCE for a tween (for performance reasons): overwrite: true - runs immediately when the animation is created - it finds all other tweens of the same target(s) and kills them in their entirety. overwrite: "auto" - runs the first time the tween renders; it isolates and kills only the conflicting individual properties in other tweens that are active at that moment. If you invalidate() a tween, then the first time it renders after that, it'll re-run the overwrite: "auto" routine at that point too. Here's another thread where we discussed several options for handling fast scrolling and overlapping scroll-driven animations (skip to the final few pots):
  22. Interesting. I would have thought overwrite true would have worked here too. 👀 When the box tween in the box2 timeline has overwrite true set, the first box tween doesn't play at all... I'm definitely missing something. https://codepen.io/cassie-codes/pen/f73a2dfc64470853d40c7540cb8996fd?editors=1010
  23. Hey guys, I'm running into problems when i scroll down or up too quickly. It must be something quite simple, I'm missing. If you scroll down slow, then box 1 appears, and then as you go further down, box-2 appears. But if you scroll down quickly, past both triggers, box 1 doesn't disappear quick enough and all the boxes appear on top of each other. I'm using fromTo's and I've tried "immediate render: false" and "overwrite" but, have not been able to work out what is causing this issue. Hope that all made sense. I've made a minimal codepen demo to show what's going on. Any help is greatly appreciated. Cheers
  24. You can animate the progress of a timeline. onUpdate({ progress }) { // add this if you want it to stop it when scrolling up // gsap.killTweensOf(tl); if (tl.progress() < progress) { gsap.to(tl, { progress: progress, duration: 3, overwrite: true }); } }
  25. Indeed That's what I tried but there are always new errors and it doesn't seem to overwrite what is done in the private function so... Just making a search replace in all files before delivery with sublime text is much faster