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. 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...
  2. 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");
  3. 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..
  4. 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!
  5. // 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
  6. 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?
  7. 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
  8. 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); } }); } });
  9. I assume you want something like this: gsap.to(tl, { timeScale: 1, ease: "power1.inOut", duration: 2, overwrite: true }); ?
  10. 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?
  11. 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.
  12. 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), }); }, }, }); }, []) }
  13. 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 });
  14. Typing too fast - yep, I meant overwrite: 'auto' I'll edit that to avoid confusion.
  15. 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.
  16. 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
  17. 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):
  18. 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
  19. 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
  20. 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 }); } }
  21. 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
  22. @GreenSock thanks Jack, that clarifies several questions. I didn't realize I could set everything to a fixed height and hide the overflow -- I thought that would impact how ScrollTrigger behaves. That makes it much easier to calculate the position in different scenarios. I also see revert and refresh options are part of the self.enable() function but I didn't see those documented. @OSUblake I created as minimal of a Codepen demo as possible. I'm pretty sure this behavior is correct but I'm trying to find a work around for anchors. Within each section would be many other ScrollTriggers with their own timelines; each section is pinned for the duration of those animations. I also tried Jack's suggestion -- I am able to save and set a scrollTo position with overwrite: "all", after re-enabling the ScrollTriggers and it does move the viewport to that position (the position is off due to paddingBottom but this can be calculated/accounted for other ways), but several of the ScrollTriggers end up firing (timelines become overlapped). I looked at the self.enable function -- the viewport is reset when self.enabled is set to true; but as you know that's tied to a ton of logic. I'm hoping to just toggle the ScrollTriggers off, move the viewport, toggle them back on so the current section (and all other sections) continue pinning. Use case would be for anchors and other functionality that might require going through all of the ScrollTriggers very quickly --- another example: scroll to top button. https://codepen.io/steve-giorgi/pen/jOmeBwK I'm forking the demo to see if I can replicate the behavior described above when saving/restoring the position.
  23. Yeah, that's what loops are for. 😉 gsap.utils.toArray(".btn-rotated").forEach(btn => { const animation = gsap.to(btn, { paused: true, rotation: 360, repeat: -1, ease: "none", duration: 5 }).timeScale(0); btn.addEventListener("mouseenter", () => { animation.play(); gsap.to(animation, { timeScale: 1, duration: 1, overwrite: true }); }); btn.addEventListener("mouseleave", () => { gsap.to(animation, { timeScale: 0, duration: 1, overwrite: true, onComplete() { animation.pause(); } }); }); });
  24. the timescale example is what i was looking for. in the start there is smooth easing, in the middle(during hover) an infinite loop and at the end it kinds of fades out with easing. thanks @OSUblake – but i like the code more of @cassie 2nd codepen as i need to be sure to trigger animation for the current element if there are multiple with same classes at once. so this is my final code: $(".btn-rotated").mouseover((e) => { gsap.to(e.currentTarget, { duration: 5, ease: "none", rotation: "-=360deg", repeat: -1 }); }).mouseleave((e) => { gsap.to(e.currentTarget, { duration: 2, ease: "power.out", rotation: "-=50deg", overwrite: true }); }); only thing whats missing is the smooth easing start.
  25. Hi Julia! ThrowProps is deprecated. See the IntertiaPlugin docs. https://greensock.com/docs/v3/Plugins/InertiaPlugin Another change from v2 to v3 is the overwrite behavior. If we're animating the same properties with different durations, we should definitely overwrite those animations. GreenSock Slider with Skew v3 (codepen.io)