Search the Community

Hi! I'm running into a problem using scrolltrigger and I would hope anyone can point me into the right direction. I already tried to recreate it locally, but it does not happen there. So it is likely a CSS or third party script interfering. However I'm lost and perhaps someone else had the same problem and could help me out. So I'm using scrolltriggers on this website: https://www.ng-engineering.nl/home/ Same from this page: https://www.ng-engineering.nl/test/ which has almost nothing on it. However every time I resize all the triggers jump to the top of the page, like it does not account for me already having scrolled down. When I resize at the top of the page all triggers get back to the right position. What could I do differently? My current JS code is this: // Wait until DOM is ready document.addEventListener("DOMContentLoaded", function () { // Wait until images, links, fonts, stylesheets, and js are loaded window.addEventListener( "load", function () { // Check if GSAP is defined console.log("local loaded"); if (typeof gsap === "object") { // Register ScrollTrigger plugin gsap.registerPlugin(ScrollTrigger); window.addEventListener("resize", function () { ScrollTrigger.refresh(); console.log("ScrollTrigger refreshed due to window resize"); }); let mm = gsap.matchMedia(); //all mm.add("(min-width: 0px)", () => { //end all }); //desktop mm.add("(min-width: 991px)", () => { console.log("GSAP desktop"); const dienstenTl = gsap.timeline({ scrollTrigger: { trigger: "#Cards_diensten", start: "top 80%", toggleActions: "play none none reverse", markers: false, invalidateOnRefresh: true, }, onStart: function () { gsap.set("#Cards_diensten .card", { pointerEvents: "none" }); }, onComplete: function () { gsap.set("#Cards_diensten .card", { pointerEvents: "auto" }); }, }); dienstenTl.to("#Cards_diensten .card", { opacity: 1, y: "0%", duration: 0.3, ease: "power1.inOut", stagger: 0.05, }); }); //mobile mm.add("(max-width: 990px)", () => { console.log("GSAP mobile"); }); //end gsap defined } //end load }, false ); //end dom ready });

It is necessary to make that at scrolling of the page at one moment the animation of emergence of the image was started, and at another moment the image was fixed and changed during scrolling. The problem is that when I scroll through the image gallery to the end, the block following the gallery overlaps the gallery.

Hi GSAP newbie here. I came to GSAP because I want to achieve one specific animation. But I can't get my head around it yet. Maybe someone can give me an example I can build upon and learn? The site should have sections with 100vh, each with a centered container. The first container should stay pinned once the wrapping section reaches the top of the viewport (or when the container is centred in the viewport). Then the next section should scroll up until this one reaches the top, then the first should unpin and both scroll up together. I didn't manage to come up with a working example so far. Can you help me? Thanks! Devi

Is there any way to less this code? var tl = new TimelineMax({delay: 1}), visible = 1, hidden = 0, aveDur = 1; tl.to("#txt1", aveDur, {alpha: visible}) .to("#txt1", aveDur, {alpha: hidden, delay: 1}) .to("#txt2", aveDur, {alpha: visible}) .to("#txt2", aveDur, {alpha: hidden, delay: 1}) .to("#txt3", aveDur, {alpha: visible}) .to("#txt3", aveDur, {alpha: hidden, delay: 1}) Any suggestions are welcome!