Jump to content
GreenSock

Search the Community

Showing results for 'overwrite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hello! Is it intended that the Promise object, which is returned by a Tween's .then() method, isn't terminated when the animation has been overwritten? At first I planned on using it in combination with the async/await syntax, which sometimes resulted in a permanent halt of the respective function. (In my tests the status of the Promise remains "pending" after the animation has been overwritten.) But even when I use it with a then-catch-structure, no clause is executed. In the end I promisified the GSAP animations myself: // for example function hide(elmnt, duration = 0) { return new Promise((resolve, reject) => { gsap.to(elmnt, { duration: duration, autoAlpha: 0, overwrite: 'auto', onComplete: resolve, onInterrupt: reject }); }); } I feel like this undermines the usefulness of the .then() method (at least for some usecases). Have a good one!
  2. This is my demo link https://tool.baotramcompany.com/animation/v2/ and this my Gsap Code so 1. Can i reduce the space between point A -> B ? 2. Can i reduce the speed of the character movement ? Thanks for you times. Sory i cant push my code to codepen (something was wrong!) var animation; gsap.registerPlugin(MotionPathPlugin, ScrollTrigger); gsap.set("#cat", { scale: 1, autoAlpha: 1 }); gsap.set("#cat", { transformOrigin: "50% 50%" }); animation = gsap.to("#cat", { scrollTrigger: { trigger: "#motionPath", start: "top left", endTrigger: "body", end: () => ScrollTrigger.maxScroll("html"), scrub: true, markers: false, timeScale: 10, onUpdate: self => { gsap.to("#cat", { rotationY: () => self.direction === 1 ? 0 : 180, overwrite: 'auto', onscroll: function () { if (self.direction === 1) { jQuery("#increaseTrans").trigger('click'); //console.log("progress", self.progress); } else { jQuery("#increaseTrans").trigger('click'); } }, //=> self.direction === 1 ? jQuery("#increaseTrans").trigger('click'); jQuery("#moveDown").trigger('click'); : console.log("up"), }); } }, duration: 0.5, ease: "none", immediateRender: true, motionPath: { path: "#text-curve", align: "#text-curve", alignOrigin: [0.5, 0.5], autoRotate: true, } });
  3. Hi @OSUblake, sorry for the delay in responding, the past two weeks have been hectic. I took what you suggested on board and spent some more time re-reading the docs, I have a habit of trying to run before I can walk... The whitespace bug has been resolved by killing the scrollTrigger and I've set up a wrapper element. Everything is working as intended. let el = useRef(); useLayoutEffect(() => { const q = gsap.utils.selector(el); const wrapper = el.current; gsap.set(q(".fancy-text"), { opacity: .2 }); gsap.to(q(".fancy-text"), { y: -50, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: wrapper, start: "top+=100px center", scrub: .5, markers:true } }); return () => ScrollTrigger.getAll().forEach(t => t.kill()); }, []) Thanks for your help, much appreciated
  4. I have confirmed it. But what I want is that the next section(wrapper enclosing sections 3, 4, 5), which is longer than the previous section(section 2), covers the previous section, and then scrolls. that example, the height of the sections is the same. plz check my pic Section 2 is overwritten by Section 3. However, Section 3 is smaller than Section 2, so I tried to overwrite Section 2 with the wrappers wrapped around Section 3, 4, and 5. Subsequently, sections 3, 4, and 5 proceed to normal scrolling.
  5. The scrub value is just the duration of that tween, so put in whatever value you want. gsap.to(tl, { progress: 1 - self.progress, ease: "power3", overwrite: true, duration: 0.25 });
  6. Hey, I'm new to GSAP and absolutely loving it! I'm currently working on my first commercial Gatsby React site and while experimenting with the useLayoutEffect hook I came across an issue. managed to rectify it and now I was just wondering if I could get a little context. When I started setting up my animations I was nesting each animation into a separate useLayoutEffect hook like so: const h2Ref = useRef(null); const contentRef = useRef(null); useLayoutEffect(() => { const el = h2Ref.current; gsap.set(el, { y: -30, opacity: 0 }); gsap.to(el, { y:0, opacity:1, delay:.25 }); gsap.to(el, { y: -50, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el, start: "top+=100px center", scrub: .5, } }); }, []) useLayoutEffect(() => { const el2 = contentRef.current; gsap.set(el2, { y: -30, opacity: 0 }); gsap.to(el2, { y:0, opacity:1, delay:.25 }); gsap.to(el2, { y: -30, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el2, start: "top+=100px center", scrub: .5, } }); }, []) Everything works fine just like this. As an experiment, I had a shift around and dropped several animations into a single useLayoutEffect hook to see if I could clean up my code a little bit. Like this: const h2Ref = useRef(null); const contentRef = useRef(null); useLayoutEffect(() => { const el = h2Ref.current; gsap.set(el, { y: -30, opacity: 0 }); gsap.to(el, { y:0, opacity:1, delay:.25 }); gsap.to(el, { y: -50, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el, start: "top+=100px center", scrub: .5, } }); const el2 = contentRef.current; gsap.set(el2, { y: -30, opacity: 0 }); gsap.to(el2, { y:0, opacity:1, delay:.25 }); gsap.to(el2, { y: -30, opacity: 0, immediateRender: false, overwrite: 'auto', scrollTrigger: { trigger: el2, start: "top+=100px center", scrub: .5, } }); }, []) When I did that, I was ending up with masses of white space appearing at the bottom of the page whenever I changed to a new route. So really my question is more out of curiosity, why did this happen? Is this something to do with how hooks work or how GSAP works? Just hoping to get a little enlightened Many thanks, and thanks for such an awesome animation tool!
  7. 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!
  8. I don't have much time to dig into this but from a quick glance... You're likely creating a bunch of overlapping/conflicting tweens because you're trying to animate the exact same property of the same object every time you enter or leave a section. So imagine when you go from a red section to an orange section...you leave the red AND enter the orange at the same time, thus it's trying to animate to red AND orange simultaneously. That's a logic issue in your code. You've gotta choose one or the other. My guess is you only need it to happen onEnter and onEnterBack. I'd recommend setting overwrite: true or "auto" on your tweens to prevent conflicts. With the helper function that's doing the smooth scrolling, you can't have the sub-ScrollTriggers also have a scrubbed value other than true due to order-of-operation challenges with the current version. Watch for the next release for some exciting news. https://codepen.io/GreenSock/pen/popoPoN?editors=0010
  9. 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}) }) } });
  10. Hi Cassie, thank you so much for responding. i think what needs to happen it's basically putting each slide in a scrolltrigger and giving it a pin (stays on screen for a second before releasing to the next slide) effect. right now the continuous scroll of the horizontal slider doesnt feel very good. and snapping doesnt either. But i found a post buried here, that i can no longer find that had a solution that was exactly what i needed. and it's the below code. my only problem is i couldnt figure out how to integrate into my page flow like you see in my codepen. because the below code acts as if the horizontal slider is the only main element on the page. 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}) }) } });
  11. 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}) }) } });
  12. Yes, it's generally not a good idea to reuse an animation that might be competing with another animation. The left timeline doesn't know you are changing stuff in the right timeline. Also, I'm not sure what these from statements are for. .from(logoRef.current, { transform: "none" }, "<") It's best to always use GSAP transform properties like x, y, scale, etc instead of transform. If you need to remove one, you can just use a set. .set(logoRef.current, { scale: 1 }, "<") I would suggest reworking your animation into a single animation, kind of like this. A Pen by GreenSock (codepen.io) If some of the stuff isn't easy to control inside a single timeline, you can also make a timeline that does the progress and whatever else you want. gsap.timeline() .to(animation, { overwrite: true, progress: 0.5 }) .to(myLogo, { ... }, 0) Outside of that, the best way to handle competing animations is to just not use them and create your animations on the fly, like in the mouseenter/mouseleave events.
  13. See if this gets you going in the right direction. I just used standalone ScrollTrigger to toggle the nav items. The back ease looks a little bit weird in reverse, so if you wanted a different ease when hiding the items, you should just create a new animation in that if/else. if (self.isActive) { gsap.to(boxes, { overwrite: true, ease: "back.out", // or whatever exit ease you want y: -64, opacity: 0, stagger: { amount: 0.25 } }); } else { gsap.to(boxes, { overwrite: true, ease: "back.out", y: 0, opacity: 1, stagger: { amount: 0.25 } }); } Multiple GSAP Animations in React (codepen.io)
  14. GreenSock

    Unregister Effect

    You don't have to unregister - if you want to replace one, you can just registerEffect() a new effect with the same name and it'll overwrite the previous one.
  15. Hello guys, I am in need of some dire help. I am trying to implement a scrolltrigger effect with snapping exactly like the GSAP codepen demo here, but in React / Next JS. I been working on it for days trying to implement on a website. I also created a mini codesandbox demo with the effect, but as you see, the behavior snapping and scroll is not the same. I was wondering if I could get some assistance. Sandbox link: https://codesandbox.io/s/festive-babycat-b8lh74?file=/pages/_app.js useEffect(() => { let panels = gsap.utils.toArray(".panel"); let scrollTween; function scrollTo(arg) { return { y: arg * innerHeight, autoKill: false }; } function goToSection(i) { scrollTween = gsap.to(window, { scrollTo: () => { scrollTo(i); console.log(i); }, duration: 1, onComplete: () => (scrollTween = null), overwrite: true }); } panels.forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top bottom", markers: true, onToggle: (self) => self.isActive && !scrollTween && goToSection(i) }); ScrollTrigger.create({ start: 0, end: "max", snap: 1 / (panels.length - 1) }); }); }, []);
  16. I don't quite understand your question here - can you please be more specific? I didn't see anything jerky. You should definitely switch to the more modern GSAP 3 syntax: // OLD TweenMax.to(".bar", 0, {width: "-=3%"}); // NEW gsap.set(".bar", {width: "-=3%"}); If you want to animate things instead of suddenly setting them, you could use a small duration on a gsap.to() call, and make sure to set overwrite: true so that you're not creating conflicting tweens. If you're setting the same value over and over again, you might want to look into using gsap.quickSetter() for performance reasons.
  17. I didn't totally follow your explanation there, @mjray, but my guess is that you were creating conflicting tweens. Did you try simply setting overwrite: true or overwrite: "auto" on your animation? Also, did you know about this method?: https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll() It's relatively new.
  18. I'm having a very difficult time understanding what you mean. It looks like that ScrollTrigger doesn't have any animation associated with it, so when you self.scroll(...) it won't have an effect on any animation. Did you intend to link an animation to that ScrollTrigger? Currently it's pointless to have toggleActions or scrub (those are mutually exclusive, by the way) on that ScrollTrigger because those only apply if an animation is attached to the ScrollTrigger. It actually looks like you're trying to manually apply a scrub: 0.5 to the "tl" animation in the onUpdate. Why not simply assign that to the ScrollTrigger itself? That'll perform better anyway. You should definitely set overwrite: true if you're gonna keep that manual tween in there. If you still need some help, please provide a minimal demo that clearly illustrates the problem and we'd be happy to answer any GSAP-specific questions.
  19. Welcome to the forums, @Sooova. Would you please provide just a minimal demo that more clearly demonstrates the issue? I'm pretty lost when I look at that demo, especially with all the missing images. You can just use simple colored <div> elements instead maybe. It shouldn't take 100+ lines of code to show the issue. There are a lot of setTimeouts/Promises and delays and stacked up strings of logic - perhaps you could just eliminate any randomization, isolate a single state change of one or two elements, and only focus on that in your demo(?) And please keep in mind that these forums aren't really for general troubleshooting of logic issues, but we're happy to answer any GSAP/Flip questions. A few quick comments: I assume this was a mistake: // BAD onComplete: isComplete(), // <- executes immediately and assigns whatever isComplete returns to the onComplete. // GOOD onComplete: isComplete, And this: // BAD overwrite: "false", // GOOD overwrite: false, You can use gsap.utils.random() instead of your getRandomInt() function.
  20. Hi guys, So, I've done an Horizontal Scroll on Elementor but I'm getting really frustrated with horizontal scroll (anchors) because nothing really works.. Can you please advise what I'm doing wrong? This is the Elementor site. I've tried the bellow code: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js"></script> <script>gsap.registerPlugin(ScrollTrigger); let sections = gsap.utils.toArray("section"), nav = gsap.utils.toArray(".menu-item a"), getMaxWidth = () => sections.reduce((val, section) => val + section.offsetWidth, 0), maxWidth = getMaxWidth(), scrollSpeed = 4, snapProgress, lastScrollTween = 0, tl = gsap.timeline(); tl.to(sections, { x: () => window.innerWidth - maxWidth, duration: 1, ease: "none" }); ScrollTrigger.create({ animation: tl, trigger: ".elementor-section-wrap", pin: true, scrub: 1, snap: {snapTo: directionalSnap(tl), duration: 0.5}, end: () => "+=" + maxWidth / scrollSpeed, invalidateOnRefresh: true }); function init() { gsap.set(sections, {x: 0}); maxWidth = getMaxWidth(); let position = 0, distance = maxWidth - window.innerWidth; // add a label for each section to the timeline (for "labelsDirectional" functionality): tl.add("label0", 0); sections.forEach((section, i) => { let progress = position; position += section.offsetWidth / distance; tl.add("label" + (i+1), position); nav[i].onclick = () => { // link clicks should trigger a scroll tween to the appropriate spot snapProgress = progress; // save the current progress so that if we can return it in the directionalSnap() when called right after the scrollTo tween is done (because ScrollTrigger would normally look at the velocity and snap, causing it to overshoot to the next section) lastScrollTween = Date.now(); // for checking in the directionalSnap() if there was a recent scrollTo that finished, in which case we'd skip the snapping (well, return the current snapProgress) gsap.to(window, {scrollTo: maxWidth / scrollSpeed * progress, duration: 1, overwrite: "auto"}); }; }); } init(); ScrollTrigger.addEventListener("refreshInit", init); // on resize, things must be recalculated // a helper function for doing "labelsDirectional" snapping, but we can't use that directly since we're doing some special things with scrollTo tweens, and we need a way to skip the snap if a scrollTo recently finished (otherwise it'll overshoot to the next section) function directionalSnap(timeline) { return (value, st) => { if (Date.now() - lastScrollTween < 1650) { // recently finished doing a tweened scroll (clicked link), so don't do any snapping. return snapProgress; } let a = [], labels = timeline.labels, duration = timeline.duration(), p, i; for (p in labels) { a.push(labels[p] / duration); } a.sort((a, b) => a - b); if (st.direction > 0) { for (i = 0; i < a.length; i++) { if (a[i] >= value) { return a[i]; } } return a.pop(); } else { i = a.length; while (i--) { if (a[i] <= value) { return a[i]; } } } return a[0]; }; }</script> With this CSS (working fine on scroll): @media only screen and (min-width:768px){ .elementor-inner .elementor-section-wrap{ display: inline-flex; } .elementor-section{ width:100vw; } .custom-width{ width: 100px; } .custom-width2{ width: 100vw; } body{ overflow-y: hidden; overscroll-behavior-y: none; } .elementor-inner { width: 100vh; height: 100vw; overflow-x: hidden; overflow-y: scroll; transform: rotate(-90deg) translateX(-100vh); transform-origin: top left; position: absolute; scrollbar-width: none; -ms-overflow-style: none; } .elementor-inner .elementor-section-wrap { transform: rotate(90deg) translateY(-100vh); transform-origin: top left; display: flex; flex-direction: row; width: 600vw; } /*section { width: 100vw; height: 100vh; }*/ ::-webkit-scrollbar { display: none } } @media only screen and (max-width:768px){ .elementor-inner .elementor-section-wrap{ display: block; } body{ overflow-y:auto; } } Thank you
  21. There is no kill method. That's why I was saying that you would need to write that yourself. Maybe something like this. export default class AnimationServicesHomePage { constructor(animationEl) { this.triggers = []; this.DOM = { animationEl: animationEl }; this.DOM.scrollColorElems = [ ...this.DOM.animationEl.querySelectorAll("[data-bgcolor]") ]; if (this.DOM.scrollColorElems) { this.DOM.scrollColorElems.forEach((colorSection, i) => { const prevBg = i === 0 ? "" : this.DOM.scrollColorElems[i - 1].dataset.bgcolor; this.animationBgImgScroll(colorSection, prevBg); }); } /* ScrollTrigger.addEventListener("resize", () => locomotive.update()); ScrollTrigger.refresh(); */ } kill() { this.triggers.forEach((t) => t.kill()); } /* Animation Scroll Bg Color Change Services Apparitions Home */ animationBgImgScroll(colorSection, prevBg) { /* ScrollTrigger.config ({ limitCallbacks: true }) */ const body = document.querySelector("body"); let st1 = ScrollTrigger.create({ trigger: ".services", start: "top 12.5%", end: "bottom 12.5%", markers: true, toggleActions: "play none none none", onEnter: () => body.classList.remove("bg-black"), onLeaveBack: () => body.classList.add("bg-black") }); let st2 = ScrollTrigger.create({ trigger: colorSection, start: "top 50%", end: "bottom 50%", markers: false, invalidateOnRefresh: true, immediateRender: false, preventOverlaps: true, fastScrollEnd: true, onEnter: () => gsap.to("body", { backgroundColor: colorSection.dataset.bgcolor }), onLeaveBack: () => gsap.to("body", { backgroundColor: prevBg, overwrite: "auto" }) }); this.triggers.push(st1, st2); } }
  22. @Septrios we can't effectively troubleshoot live web sites - if you can't provide a minimal demo in CodePen or something like that, you'll probably need to secure paid consulting services. My advice: try to reproduce the issue in the most basic way possible (a few simple <div> elements in a CodePen) and then post that here. I think part of the problem is likely that you're just doing tweens inside a callback which don't get reverted when ScrollTrigger.refresh() is called (like on resize). I'd probably just use a regular tween that has a ScrollTrigger, like this: // OLD ScrollTrigger.create({ trigger: colorSection, scroller:'.js-locomotive', start: "top 50%", end:'bottom 50%', markers:false, toggleActions : "play none none reverse" , onEnter: () => gsap.to("body", { backgroundColor: colorSection.dataset.bgcolor, }), onLeaveBack: () => gsap.to("body", { backgroundColor: prevBg, overwrite: "auto", }), }); // NEW gsap.to("body", { backgroundColor: colorSection.dataset.bgcolor, scrollTrigger: { trigger: colorSection, scroller:'.js-locomotive', start: "top 50%", end:'bottom 50%', toggleActions: "play none none reverse", immediateRender: false, preventOverlaps: true, fastScrollEnd: true } });
  23. Yes, that's exactly it. Thank you Jack. Why is the overwrite:true important in this case?
  24. Maybe preventOverlaps could help you? Alternately maybe looking into overwrite modes? However - as Blake said, if you use one timeline you won't run into these issues. It's by far the easiest solution If you have four sections in the DOM, make sure that your tweens are equally distributed (timing-wise) into four equal parts and then that'll map to the sections!
  25. Hello, I'm a new Gsap's fan in this place . I'm a french Developper, so sorry for my english. I have a problem with GSAP. I have a scrollTrigger.create, where I add and remove a class ('bg-black) depending on the trigger. Also, I change the colors of the background in another scrolltrigger, when scrolling the page. On the first load it works!, but when, I switch to the mobile or switch the page and come back to the first page in desktop(when i m resize the window) , the bg-black class is automatically deleted and the background has the last color of the effect. By debugging, the problem would come from the OnEnter function, but I can't find an answer, thank you for your help I used NUXT, locomotive scroll and GSAP ScrollTrigger.create({ trigger: ".services__content", scroller:'.js-locomotive', start: "top 30%", end:'bottom 30%', markers:true, toggleActions : "play none none reverse" , onEnter: () => body.classList.remove("bg-black") , onLeaveBack: () => body.classList.add("bg-black") }) ScrollTrigger.create({ trigger: colorSection, scroller:'.js-locomotive', start: "top 50%", end:'bottom 50%', markers:false, toggleActions : "play none none reverse" , onEnter: () => gsap.to("body", { backgroundColor: colorSection.dataset.bgcolor, }), onLeaveBack: () => gsap.to("body", { backgroundColor: prevBg, overwrite: "auto", }), });
×