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. Actually it looks like it doesn't like interrupting the tween fired in the leave event. I can't use xTo for that because it has a dynamic ease applied. I wonder why it doesn't overwrite it.
  2. Heya! Ok so there's a couple of things I can recommend here. First up - overwrite modes. You're using true which is killing the conflicting tweens. You don't want that. You only want to overwrite the conflicting parts 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. Next, no need for an open and close timeline. We can create one timeline and then manage it with control methods. like tl.play(0) and tl.reverse()- then the timeline is interruptible, if you click open and close really quickly it'll just change the direction the timeline is animating. Here's an adjusted demo. https://codepen.io/GreenSock/pen/ZErEZEK?editors=0010
  3. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. If I were you I'd approach this with single tweens per box and overwrite:true or auto. Maybe just focus on trying to swop one box between two different directions without scrollTrigger, then add some more boxes, then add in a ScrollTriggers with some callbacks and swop the direction over in the callbacks. Timelines are pre-calculated and a little less flexible for this sort of thing whereas tweens can be a bit more dynamic. Hope this helps a bit!
  4. Dear GSAP community, I’ve a question about an ‘overwrite’ feature and some timeline time aspects. If I set an animated parameter without changing the time, it works pretty well! Example: https://codepen.io/belyanskii/pen/vYLBZQE But once I am trying not only to set (or change) an animated parameter but to set delay and duration, overwriting doesn’t seem to occur: https://codepen.io/belyanskii/pen/XWXrgQy Is there a way to overwrite the whole animation w/o clearing or deleting the tweens/timelines?
  5. Here's how I'd simplify it: https://codepen.io/GreenSock/pen/ExEZxOz?editors=0010 document.addEventListener("keyup", function(e) { let x, y; if (e.keyCode == 37) { // left arrow x = 100; } else if (e.keyCode == 38) { // up arrow y = 100; } else if (e.keyCode == 39) { // right arrow x = -100; } else if (e.keyCode == 40) { // down arrow y = -100; } if (x || y) { // if anything changed... let vars = {overwrite: true}; if (x) { vars.x = gsap.utils.clamp(bigDraggable.minX, bigDraggable.maxX, gsap.getProperty(bigImage, "x") + x); } else { vars.y = gsap.utils.clamp(bigDraggable.minY, bigDraggable.maxY, gsap.getProperty(bigImage, "y") + y); } gsap.to(bigImage, vars); e.preventDefault(); } }); Does that help?
  6. Hey GSAP, first: you are awesome, thank you for these supercool libaries. We want to try out the new ScrollSmoother an got stuck on the following problem: We have a transform based animation with a scrollTrigger: let tl = gsap.timeline({ scrollTrigger:{ trigger: card, start: "top top", end: "bottom top", pinSpacing: false, pin: true, scrub: true, markers: false, }, defaults: { overwrite: "auto"} }); tl.fromTo(cardContent, {scale:1, opacity:1}, {scale: 0.8, opacity: 0.2}); tl.to(cardContent, {opacity:0}); To avoid conflicts with the transform values in the parent container animation (like "jumping" elements) , we use clearProps: true on the parent containers animation. This works like a charm, BUT: with using ScrollSmoother, the same effect of "jumping" elements ist back, as ScrollSmoother is based on transforms. I'm happy for any advice on how to deal with that. Thanks
  7. Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance
  8. Hi there! I have an issue using gsap. I'm using chakra and next on my project and i dont know why, but when I put the gsap to work it just make my svg weird, It look to overwrite something that should not happen. If you look at this little example and comment the line of useEffect you'll see what I mean. Hopeful for help, thanks https://codesandbox.io/s/portfolio-app-forked-20tos8?file=/components/projects.js
  9. Welcome to the forums @AFoeee You really don't have to call then, and using overwrite: "auto" only kills the property animations that are conflicting. Animations are set to resolve on complete, so it wouldn't make sense to resolve tween1 in the code below when the new animation starts as the x animation is still going to run its natural course. let tween1 = gsap.to(".box", { x: 100, y: 100 }); setTimeout(() => { gsap.to(".box", { y: 200, overwrite: "auto" }) }, 100) Maybe we can add in something to resolve if the entire animation is killed, but for now you would have to force it to complete, maybe like this. GSAP .then() interruption test (codepen.io)
  10. A few quick notes: Don't use "new" like that. // BAD: let tl = new gsap.timeline({}); // GOOD: let tl = gsap.timeline(); The overwrite value should either be "auto", true, or false - not the string "true". // BAD overwrite: "true" // GOOD overwrite: true I'd strongly recommend moving to the more modern string-based ease syntax: // OLD ease: Power0.easeNone // NEW ease: "none" If you're only adding one tween to the timeline, there's no reason to use a timeline (although it'll work just fine). // LONG let tl = gsap.timeline(); tl.fromTo(...); // SHORT gsap.fromTo(...); You'll have a SIGNIFICANTLY better chance of getting a good answer here if you take the time to create a minimal demo (like a CodePen). Like in your case, I don't really understand the context and I can't see anything being overwritten. I'm left to guess by glancing at a small excerpt of code. If my assumptions are correct, you're trying to call fader() on the ".spaceman" too? Thus you've got an infinitely-repeating x/y tween and you're ALSO trying to have fader() animate it to completely different x/y values simultaneously? That's a logic issue in your code. You could pause() your spaceman animation in that case until the new animation is done and then restart it. There are many ways you could approach this, actually. Here's one: let spaceman = gsap.fromTo('.spaceman', { x: 0, y: 0 } , { x: -2, y: -5, ease: "sine.inOut", duration: 1, repeat: -1, yoyo: true }); function fader(elementName, x, y) { let vars; if (x === 'out') { vars = { x: -150, y: -30, rotation: -15, scaleX: 0.1, scaleY: 0.1, opacity: 0, duration: 2.5, transformOrigin: (y === "left") ? "top left" : "top right", ease: "power4.out" }; } else { vars = { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, opacity: 1, duration: 1, transformOrigin: (y === "right") ? "top right" : "top left", ease: "power4.out" }; } if (elementName === ".spaceman") { spaceman.pause(); vars.onComplete = () => spaceman.restart(); } return gsap.to(elementName, vars); } If you still need some help, please provide a minimal demo in CodePen or something and we'd be happy to answer any GSAP-specific questions.
  11. Greetings... I have an animation that runs on load which makes my spaceman float up and down. When he gets hidden and returned that animation has been killed. Below are the 2 conflicting animations which both involve x & y. I have looked at overwrites but can't seem to get my head around it. I would like the spaceman animation to run indefinitely so whenever he is visible he is "hovering" var spaceman = new gsap.timeline({ }); spaceman.fromTo('.spaceman', { x: 0, y: 0 } , { x: -2, y: -5, ease: Power0.easeNone, duration: 1, repeat: -1, yoyo: true, overwrite: 'true' }, 2 ); function fader(elementName, x, y) { var tl = new gsap.timeline({}); if (x == 'out') { if (y == 'left') { tl.to(elementName, { x: -150, y: -30, rotation: -15, scaleX: 0.1, scaleY: 0.1, opacity: 0, duration: 2.5, transformOrigin: "top left", ease: "power4.out" }); } else { tl.to(elementName, { x: 150, y: -30, rotation: 15, scaleX: 0.1, scaleY: 0.1, opacity: 0, duration: 2.5, transformOrigin: "top right", ease: "power4.out" }); } } else { if (y == 'right') { tl.to(elementName, { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, opacity: 1, duration: 1, transformOrigin: "top right", ease: "power4.out", overwrite: 'auto' }); }else { tl.to(elementName, { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, opacity: 1, duration: 1, transformOrigin: "top left", ease: "power4.out", overwrite: 'auto' }); } } }
  12. Thank You Cassie and Jack, there's of course some problem on the logic I'm pursuing, I know that the height of the page plays a key role on the animation I'm working on so I ask u this: if you were to make this animation from that I tried to explain the beginning, where would you start from? I don't want to bang my head unnecessarily If u think there's a better way to approach this animation I'm all ears The only caveat is that the two divs must be 100vh, always, at least when they're visible. (I tried with observer, it seems more fitting but I'm having similar problems with the changing page height Observer.create({ target: window, type: "wheel,touch,scroll", onUp: () => { move('100vh') }, onDown: () => { move(0) } }); function move(value) { gsap.to("#bottom", { "top": value, duration: 1.3, ease: Quart.easeInOut, // overwrite:true }) } )
  13. It all depends on what behavior you want exactly (you could build this several different ways) but I'd probably just create those tweens dynamically and set overwrite: true (or "auto"). One of the problems in the way you've got it structured is that you're pre-creating just two timelines that will lock in their starting/ending values, thus they're not dynamic. So, for example, if you scroll quickly and some of the animations are halfway done but now you want those same elements to go to a different end value that's controlled by a different animation instance which you then .restart(), the values will jump. That's not a bug - it's a logic issue in the way you've got it coded. So I'd do something sorta like: onEnter: () => { gsap.to(".targets", {..., overwrite: true}); }, onLeave: () => { gsap.to(".targets", {..., overwrite: true}); }, ... That way, it's totally dynamic and the animations will pick up exactly where the other left off.
  14. Nope, that's fine because GSAP sets inline styles for maximum specificity. The only other thing I can think of is if maybe you accidentally killed the opacity animation? Like if after creating it, you did a DIFFERENT animation on that same element and set overwrite: true? I doubt it, but I'm just brainstorming. I would recommend setting an onUpdate on that particular tween so you know when it's being updated, and then open up Dev Tools and scroll to where it should be animating opacity and look in the console to see if it's firing. .to("#header-copy", { onUpdate: () => console.log("updated!"), opacity: 1, ease: "power1.inOut", duration: 30, }, 70); And is the opacity sticking at 0 or is it at 1 the whole time? I wonder if maybe it was not 0 when the tween rendered the first time, thus it's animating from 1 to 1 (no change).
  15. Hi! I'm sorry, but I have some issue with mouseleave, in demo as you can see image with overlay is not dissapearing, if I make tl.reverse() on mouseleave everything is fine, but I need my timeline to hide everything immediately. What am I doing wrong?
  16. GSAP Helper

    Animated cursor

    We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting and logic troubleshooting. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You need to adjust your value on scroll. You could do that in a "scroll" event handler and look at the deltaY of the event perhaps. I would also strongly recommend using the gsap.quickTo() for your tweens that are constantly getting recreated on each mousemove event. The way you've got them set up now, you're creating new instances every time and they're all conflicting with each other because you didn't set overwrite: true (or "auto"). That's bad for performance. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question, we'd be happy to try to help with that.
  17. Well, CodePen has been down for a while so I can't provide a forked demo but here's how I'd do the JS: let n = 15; let parallax = []; // we'll store the animations in here. let clamp = gsap.utils.clamp(0, 1); let currentX = 0; let snap = gsap.utils.pipe(gsap.utils.snap(450), gsap.utils.clamp(n * -450, 0)); // Set #slides width for draggable bounds gsap.set('#slides', {width:n*450}); // Populate slide boxes for (var i=0; i<n; i++){ var box = document.createElement('div'), img = new Image(), link = document.createElement('a'); gsap.set(box, { width:400, height:600, overflow:'hidden', position:'absolute', top:50, left:i*450, attr:{ class:'box b'+i }, background:'#333' }); gsap.set(img, { position:'absolute', left:-300,//-i*50, attr:{src:'https://picsum.photos/id/'+(i+10)+'/700/600/'} }); parallax[i] = gsap.to(img, {x: 300, ease: "none", paused: true}); gsap.set(link, { position:'absolute', textAlign:'center', width:105, height:70, paddingTop:'7px', top:490, left:-25, rotation:90, fontSize:'45px', color:'#000', background:'#fff', mixBlendMode:'lighten', textDecoration:'none', innerHTML:'<span style="font-size:20px">IMG </span>'+(i+1), attr:{ class:'imgLink', href:'https://picsum.photos/id/'+(i+10)+'/700/600/', target:'_blank' }, }); box.appendChild(img); box.appendChild(link); slides.appendChild(box); } // Make #slides draggable Draggable.create('#slides', { type:'x', bounds: {left: innerWidth/2, width:1}, zIndexBoost: false, onDrag:updateParallax, inertia: true, onRelease: function() { currentX = this.endX }, onThrowUpdate: updateParallax, snap: snap }) function updateParallax() { // parallax should start from the right edge of the screen and we know that the #slides starts with its left edge centered, thus we add innerWidth/2 let x = gsap.getProperty('#slides', 'x') + window.innerWidth / 2, // convert the position in the viewport (right edge of viewport to -400 because that's when the right edge of the element would go off-screen to the left) into a progress value where it's 0 at the right edge and 1 when it reaches the left edge normalize = gsap.utils.mapRange(window.innerWidth, -400, 0, 1); // apply the clamped value to each animation parallax.forEach((animation, i) => animation.progress(clamp(normalize(x + i * 450)))); } updateParallax(); // Update draggable bounds onResize window.addEventListener('resize', ()=>{ Draggable.get("#slides").applyBounds({left: innerWidth/2, width:1}) }); // Previous & next buttons $('#prev, #next').on('click', function(e) { let nextX = snap(currentX + (e.currentTarget.id === "next" ? -450 : 450)); if (nextX !== currentX) { gsap.to("#slides", {x: nextX, duration: 0.3, onUpdate: updateParallax, overwrite: true}) currentX = nextX; } }); $('#prev, #next').on('mouseenter', (e)=>{ gsap.to('#'+e.currentTarget.id + ' circle', {attr:{r:22}, ease:'expo', overwrite: true}) }); $('#prev, #next').on('mouseleave', (e)=>{ gsap.to('#'+e.currentTarget.id + ' circle', {attr:{r:20}, ease:'expo', overwrite: true}) }); // Img Link rollover/out behavior $('.imgLink').on('mouseenter', (e)=>{ gsap.to(e.currentTarget, {x:10, duration:0.3, ease:'power3', overwrite: true}) }); $('.imgLink').on('mouseleave', (e)=>{ gsap.to(e.currentTarget, {x:0, duration:0.3, ease:'power4.inOut', overwrite: true}) }); The general idea is: You only want the parallax effect to exist while each individual element is inside the viewport (not the entire movement of the #slides). I created a simple linear animation of x from 0 to 300 for EACH element. Paused. Dumped them into an Array. The updateParallax() function loops through each one and sets the progress() according to its position (which we know because they're 450px apart). It's all based on the viewport so that progress would be 0 when it's on the far right edge of the screen and 1 when the element's right edge reaches the left edge of the viewport. I also made the following improvements: I applied inertia with snapping directly on the draggable so it's super smooth and users can flick it. The logic in the next/previous buttons allows users to click the buttons quickly and it still works (instead of ignoring clicks while animation is running). Sorry, that's my pet peeve when the interface ignores user clicks. I hope that helps, Tom!
  18. That code/logic looks very strange to me. I suspect @SteveS is correct, that you're overcomplicating and over-engineering things. You've got an onUpdate that's handling things differently based on the progress (odd - it's probably much cleaner to just use two ScrollTriggers) and then if it's more than 25%, you're calling moveAnimate() on EVERY update, over and over again which is creating a new tween each time and there's no overwrite set, so you're creating a ton of conflicting tweens that are all trying to control the same properties of the same elements. That's definitely a problem. The same goes for your xPercent tween in there - you're creating a new one over and over again. If you still need some help, I'd strongly recommend just simplifying things using a few colored <div> elements in CodePen and then post back here with your GSAP-specific question and we'd be happy to take a peek.
  19. I have a long page with multiple scroll based simple animations, some of them use the same class name to run different places. At some point it seems the trigger position gets off for all the page and animations at the bottom of the screen are happening in the wrong place, If I open console in the browser the animations are back at the correct position. (function () { gsap.registerPlugin(ScrollTrigger); gsap.defaults({ease: "power4.out"}); ScrollTrigger.matchMedia({ // desktop "(min-width: 800px)": function () { mySplitText = new SplitText(".corona-hero-section h2", {type: "words,chars"}); chars = mySplitText.chars; //an array of all the divs that wrap each character gsap.set(".corona-hero-section h2", {perspective: 400}); var tl = gsap.timeline(); tl .from(".logo", {duration: 2, autoAlpha: 0, y: -60, stagger: 0.3}, 1) .from(chars, { duration: 0.8, opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50", ease: "back", stagger: 0.01 }, "+=0"); tl.restart(); scheneChange(5, 140, '.viewer', '.scene', false, 'bottom bottom'); scheneChange(4, 138, '.viewer2', '.scene2', false, 'bottom bottom'); scheneChange(1, 122, '.viewer4', '.scene4', false, 'bottom bottom'); scheneChange(3, 146, '.viewer5', '.scene5', false, 'bottom bottom'); scheneChange(2, 139, '.viewer6', '.scene6', false, 'bottom bottom'); animateImageReveal(); animateStaggerIcons('.icon-list', '.icon-list__item'); animateStaggerIcons('.icon-num', '.icon-num__item'); animateStaggerIcons('.icon-top', '.icon-top__item'); aminateStaggerLi('.map-wrap__item'); aminateStaggerLi('.program-list-wrap li'); }, // mobile "(max-width: 799px)": function () { // Icons and text animation gsap.utils.toArray('.icon-list__item').forEach((section) => { const tls = gsap.timeline({ scrollTrigger: { trigger: section, scrub: true, start: "top center", // markers: true, end: "+=20%", }, }); const delay = 0.5; const textIcon = section.querySelectorAll(".icon-list__icon"); const textTitle = section.querySelectorAll(".icon-list__title"); const textText = section.querySelector(".icon-list__text"); const textNum = section.querySelector(".icon-list__num"); tls .from(textNum, {duration: 3, autoAlpha: 0, y: -60, stagger: delay}, 0) .from(textIcon, {duration: 1, autoAlpha: 0, y: -60, stagger: delay}, 0.3) .from(textTitle, {duration: 1, autoAlpha: 0, y: -60, stagger: delay}, 0.6) .from(textText, {duration: 1, autoAlpha: 0, y: -60, stagger: delay}, 0.9) }); scheneChange(5, 140, '.viewer', '.scene'); scheneChange(4, 138, '.viewer2', '.scene2'); scheneChange(1, 122, '.viewer4', '.scene4', false); scheneChange(3, 146, '.viewer5', '.scene5'); scheneChange(2, 139, '.viewer6', '.scene6', false); scheneImageReveal(); animateIconNum(); scheneChange(1, 163.5, '.viewer3', '.scene3'); }, "all": function () { animateTitleSection(); morphImg('.scene3'); } }); function scheneChange(frames, offset, classToAnimate, action, pin = true, start = "center center") { var frame_count = frames, offset_value = offset; gsap.to(classToAnimate, { backgroundPosition: (-offset_value * frame_count * 2) + "px 50%", ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet scrollTrigger: { trigger: action, start: start, end: "+=" + (frame_count * offset_value), pin: pin, // markers: true, scrub: true, } }); } function morphImg(trigger) { const tls3 = gsap.timeline({ scrollTrigger: { trigger: trigger, scrub: true, start: "top center", // markers: true, end: "+=40%", }, }); tls3 .to('#inIsrael', {duration: 2, fill: "#9191a0", morphSVG: "#inMaoz"}, 0) .to('#israelText', {duration: 2, morphSVG: "#maozText"}, 0) .to('#israelUnderText', {duration: 2, morphSVG: "#maozUnderText"}, 0.2) } function animateIconNum() { const sections = gsap.utils.toArray('.icon-num__item'); sections.forEach((section) => { const tls = gsap.timeline({ scrollTrigger: { trigger: section, scrub: true, start: "top center", // markers: true, end: "+=20%", }, }); const delay = 0.5; const textIcon = section.querySelectorAll(".icon-num__icon"); const textTitle = section.querySelectorAll(".icon-num__title"); const textText = section.querySelector(".icon-num__text"); // const textNum = section.querySelector(".icon-list__num"); tls .from(textText, {duration: 3, autoAlpha: 0, y: -60, stagger: delay}, 0) .from(textIcon, {duration: 1, autoAlpha: 0, y: -60, stagger: delay}, 0.3) .from(textTitle, {duration: 1, autoAlpha: 0, y: -60, stagger: delay}, 0.6) // .from(textText, {duration: 1, autoAlpha: 0, y: -60, stagger: delay}, 0.9) }); } function animateTitleSection() { const sections = gsap.utils.toArray(".corona-header"); sections.forEach((section) => { const splitTimeline = gsap.timeline({ scrollTrigger: { trigger: section, scrub: true, end: "+=70%", // onToggle: self => gsap.to(".split-text", {opacity: self.isActive ? 1 : 0}), toggleActions: "restart pause restart none", //markers: true } }); const split = new SplitText(section); splitTimeline .to(section, {duration: 1, backgroundColor: '#fff', ease: "none"}, 0) .to(section, {duration: 1, backgroundColor: '#222241', ease: "none"}, 1) .from(split.chars, { duration: 2, opacity: 0, x: "random(-500, 500)", y: "random(-500, 500)", z: "random(-500, 500)", scale: .1, yoyo: true, stagger: 0.02 }); }); } function animateImageReveal() { let revealContainers = gsap.utils.toArray(".reveal"); revealContainers.forEach((container) => { let tlImage = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, start: "top 100%", end: "bottom 70%", } }); tlImage.from(container, {duration: 0.3, autoAlpha: 0, y: -60, stagger: 0.3}, 1); }); } function scheneImageReveal() { let revealContainers = gsap.utils.toArray(".reveal"); revealContainers.forEach((container) => { let image = container.querySelector('img'); let tlImage = gsap.timeline({ scrollTrigger: { trigger: container, start: "20% 70%", toggleActions: "restart none none reset", } }); tlImage.set(container, {autoAlpha: 1}); tlImage.from(container, 1.5, { xPercent: -100, ease: Power2.out }); tlImage.from(image, 1.5, { xPercent: 100, // scale: 0.7, delay: -1.5, ease: Power2.out }); }); } function aminateStaggerLi(trigger) { gsap.set(trigger, {y: 100}); ScrollTrigger.batch(trigger, { onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: {each: 0.15, grid: [1, 3]}, overwrite: true}), onLeave: batch => gsap.set(batch, {opacity: 0, y: -100, 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}) }); ScrollTrigger.addEventListener("refreshInit", () => gsap.set(trigger, {y: 0})); } function animateStaggerIcons(list, listItem) { gsap.utils.toArray(list).forEach(section => { const elems = section.querySelectorAll(listItem); // Set things up gsap.set(elems, {y: 50, opacity: 0}); ScrollTrigger.create({ trigger: section, start: 'top 60%', onEnter: () => gsap.to(elems, { y: 0, opacity: 1, duration: 1, stagger: 0.2, delay: 0.3, ease: 'power3.out', overwrite: 'auto' }), onLeaveBack: () => gsap.to(elems, { y: 50, opacity: 0, duration: 1, stagger: 0.2, delay: 0.3, ease: 'power3.out', overwrite: 'auto' }) }); }) } })();
  20. Hey is this a bug or a misunderstood feature. I have issue with overwrite. In this demo if we make {overwrite:true} The timeLineId 'action' should override the timeLineId 'pre' only at 3 seconde no ? And if we make {overwrite:false} The timeLine 'pre' will continue in background and make big spike after 'action'. https://codepen.io/djmisterjon/pen/VwwJeJQ would it be possible technically to make override only act when the child timeLine execute has 3 seconds? thanks for help or suggest.
  21. That's because you're creating a bunch of conflicting tweens that are fighting with each other for control on every mousemove event. Just set overwrite: true on your line tweens and that fixes it.
  22. You can't animate "x" and "y" properties on every element to multiple places at the same time You could, however, wrap each element in another <div> and have the pointer parallax animate that one, and the motionPath can animate the child. The way you're handling the parallax pointermove thing is extremely inefficient. On every pointermove event (which can fire over 60 times per second) you're creating a whole new tween for every single element, and you're also calling .getBoundingClientRect() twice. Since you didn't set overwrite: true or overwrite: "auto", it also means you're creating a bunch of conflicting tweens that are fighting with each other for control of the same properties of the same targets. You're also getting the offsetTop and offsetLeft on every element on every pointermove event too which is expensive. You're needlessly duplicating the calculation of speed too (speedX and speedY are identical). You could pre-calculate a lot of the values, store them in a data object along with a tween for each element that you then invalidate() and restart() after updating the x/y destination values, sorta like this: const data = elements.map(el => { return { left: el.offsetLeft, top: el.offsetTop, speed: 100 - el.dataset.size, tween: gsap.to(el, {x: "+=0", y: "+=0", ease: "expo", duration: 2, paused: true}) }; }); const onMouseMove = (event) => { let bounds = wrapper.getBoundingClientRect(), pageX = event.pageX - bounds.width * 0.5, pageY = event.pageY - bounds.height * 0.5; data.forEach(d => { d.tween.vars.x = -((d.left + pageX * d.speed) * 0.005) / 2; d.tween.vars.y = -(d.top + pageY * d.speed) * 0.005; d.tween.invalidate().restart(); }); }; The upcoming release is going to have a very cool feature that'll make this even easier and faster, so stay tuned for that Side note: GSAP has a gsap.utils.random() method that you can tap into instead of making your own. I'm not even sure you need to use MotionPathPlugin - are you just trying to make it go in a circular path? If so, there may be easier algorithms. Like put it in a wrapper <div>, offset the transformOrigin and then rotate it while rotating the inner element in the opposite direction. Just an idea. Have fun!
  23. Actually overwrite:auto is kinda easy than what akapowl but I think it necessarry to do that hahaaha..Thanks @akapowl @GreenSock
  24. Good afternoon, i have a very long page that utilizes scrolltriggers in several modules. one of the modules on my pages has a horizontal scroll with a few slides and within each slide is an animation. everything works pretty well except we have found during beta testing that the user can scroll and very quickly through and past the horizontal "slider" into the regular vertical page. overall the horizontal portion doesnt "feel" great and breaks the user experience. we've tried doing "snap" points- but they snapped in odd ways that didnt feel natural. i've googled this, searched the forums, tried on my own but nothing is working or is overly complex to the point of getting overwhelmed at the complexity of some of these other "snap" solutions. what im wondering is is there a way to add a bit of a "click" feel as each slide finishes. or some sort of anticipation and "pause" after each slide so the user doesnt whip trough the horizontal scroll? i''d be very thankful for any assistance i can get on this, as it's become quite frustrating. const tl2 = gsap.timeline({ scrollTrigger: { trigger: '.module_3_wrapper', start: "center center", end: "center center", pin: '.module_3_wrapper', scrub: 1, pinSpacing: true, } }); let container = document.querySelector('.module_3'); let sections = gsap.utils.toArray(".module_3 .slides"); let scrollTween = gsap.to(sections, { x: () => -(container.scrollWidth - document.querySelector('.module_3_wrapper').clientWidth) + "px", ease: "none", duration: .1, scrollTrigger: { trigger: ".module_3_wrapper", pin: true, start: "center center", scrub: true, invalidateOnRefresh: true, end: `+=${container.offsetWidth}`, } }); I found someone did something like this with a nest scrolltrigger, but i can't figure out how to merge what i have and what this does. but it has the exact effect im looking for. where it nicely locks between slides. let slides = gsap.utils.toArray(".slide"); slides.forEach((slide, i) => { if (i) { // skip the first one. ScrollTrigger.create({ start: () => ScrollTrigger.maxScroll(window) / (slides.length - 0) * i, end: "+=1", onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}), onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true}) }) } });
  25. Are you maybe looking for pinspacing:false Also - If you wanted to go with this type of a solution you'd need to tweak the calculation of the marker placement to be based around the slide container itself rather than the window. Something vaguely like this? This is just a guess so apologies if it doesn't work, I figure most things out by trial and error. But basically you'll want to be adding a little more offset to the start marker on each one. let slides = gsap.utils.toArray(".slide"); slides.forEach((slide, i) => { if (i) { // skip the first one. console.log('maybe?', myslides.offsetWidth / (slides.length - 0) * i) ScrollTrigger.create({ trigger: myslides, markers: true, start: () => `top+=${myslides.offsetWidth / (slides.length - 0) * i} top`, end: "+=1", onEnter: self => gsap.to(".slide", {x: (-100 * i) + "vw", ease: "none", overwrite: true}), onLeaveBack: self => gsap.to(".slide", {x: (-100 * (i - 1)) + "vw", ease: "none", overwrite: true}) }) } });