Jump to content
Search Community

gn90

Members

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Posts posted by gn90

    Different scroll jumps - horizontal ScrollTrigger

    in GSAP

    Posted

    Ohh ok this is the scrollspeed and its based on the end value. That makes sense thank you. But how do i do this when both use the same Scrolltrigger functionality? Is there a way to make the scrollspeed the same? I have this value of an example and i thought this needed for the horizontal ScrollTrigger to work.

      

    end: () => `+=${maxWidth / 3}`,

     

    Different scroll jumps - horizontal ScrollTrigger

    in GSAP

    Posted

    Hi sry its bit hard for me to explain because i am not an english native speaker. I will try it with some screenshots. Its not about the animation or anything else. It's just about the distance when u scroll

     

    When i scroll on my mousewheel just "one" step/click the viewport jumps a bit -> thats a normal behaviour. The thing I don't understand is that depending on the "pagesize" (how long the page is) the jump is different. As you can see on the screenshots i attached the page with less content has a smaller "jump" than the one with more content when i scroll the mousewheel just one step. Is it more clear what I mean?

     

    Thanks in advance,

    Gui

     

    small-page.png

    wide-page.png

    Different scroll jumps - horizontal ScrollTrigger

    in GSAP

    Posted

    Hi Thank you for the link.

     

    I created a demo of the 2 pages: https://codesandbox.io/s/magical-jackson-8fsy6n?file=/test.html

     

    index.html is the "short" page and test.html the "longer". If you just scroll once with the mouse on both sites you can clearly see that on test.html it jumps way further than on index.html because the page itself is longer.

     

    Btw i have a mediaQuery on this testpage. Viewport width should be 992px+ 

     

    Thanks in advance

    Different scroll jumps - horizontal ScrollTrigger

    in GSAP

    Posted

    Hi, i don't know if this belongs here but i have a strange behaviour on my site. I made a horizontal scroll website with ScrollTrigger. The (sub)pages have different lengths/widths but everything uses the same JS. If I scroll once with the mouse, you jump different distances depending on the length of the page. I really don't know how to fix this. Is there any parameter i could use to handle this?

     

    I don't have a Codepen link due the fact u cant have 2 different pages. I can post the link to my testserver with the actual page if this is allowed.

     

    But this is my ScrollTrigger code: 

    ScrollTrigger.matchMedia({
    "(min-width: 992px)": function () {
        ScrollTrigger.normalizeScroll(true);
    }
});

const getMaxWidth = () => {
    maxWidth = 0;
    sections.forEach((section) => {
        maxWidth += section.offsetWidth;
    });
};

const setupScrollTrigger = () => {
    ScrollTrigger.matchMedia({
        "(min-width: 992px)": function () {
            sections = gsap.utils.toArray("section");
            getMaxWidth();
            ScrollTrigger.addEventListener("refreshInit", getMaxWidth);

            scrollTween = gsap.to(sections, {
                x: () => `-${maxWidth - window.innerWidth}`,
                ease: "none",
                scrollTrigger: {
                    trigger: ".wrapper",
                    pin: true,
                    scrub: 0.5,
                    end: () => `+=${maxWidth/3}`,
                    invalidateOnRefresh: true
                }
            });

        }
    });
}

     

    Thanks in advance

    Gui

    Horizontal Scrolltrigger Scrollbar & Mac/iOS overscrolling

    in GSAP

    Posted

    Oh wow normalizeScroll works perfect for the overscrolling. But i have a really weird bug since i built it into my page (just in Safari on a Mac). I have a fixed sidebar (navigation) and now when i scroll the page the sidebar is flickering like hell. i already found out that this flickering is only on pages where i have scrolltrigger contentanimations where i animate elements from y:100% or y:-100% to 0. When the animations are done the flickering gets not that bad (but still sometimes on scroll it flickers)  Is this a common problem and is there a way to fix this? (i uploaded the testpage: https://www.edgeobject.com/gsap_test/)

     

    Regarding to "remove scrollbar": thank you i will have a look at it

    Horizontal Scrolltrigger Scrollbar & Mac/iOS overscrolling

    in GSAP

    Posted

    Hi there, i don't know if this is the right place to ask those questions. I came across this page which is also made with GSAP https://www.sixsocks.studio/en

     

    I built a similar horizontal page with Scrolltrigger. But I struggle with 2 problems (which this site mangaged to fix)

    - Get rid off the overscrolling on Mac and iOS (especially when u reach the end of a webpage)

    - Remove the Scrollbar (even on Windows).

     

    Thanks in advance,

    Gui

    Horizontal ScrollTrigger on mobile

    in GSAP

    Posted

    Hi again,

     

    just wanted to ask if there are any solutions to get a horizontal Scrolltrigger to work on mobile? Or are there any good concepts on how to approach this? Haven't found something in the forums about this. I am not an javascript pro so i hope there is some easy going solution for this.

     

    Thanks in advance,

    Gui

    See the Pen KKZBprM by gn90at (@gn90at) on CodePen

    ScrollTo in horizontal ScrollTrigger problem

    in GSAP

    Posted

    Hi there,

     

    so i am quite new to the GSAP community but so far i created a few, cool small things. Since yesterday i struggle with the scrollto functionality. I discovered in other posts of this forum how to do it (also with a fixed navigation on the left side). In every section i have some "prev" and "next" buttons. As u can see it always scrolls to the end of the page if u click them. I am not really that good in plain javascript so its quite hard for me to understand the target calculation i copied from another post. I just thought it would be enough to set the element as target. But i guess since we are in a horizontal scrolltrigger it handles it different.

     

    Thanks in advance,

    Gui

    See the Pen KKZBprM by gn90at (@gn90at) on CodePen

    Horizontal Scrolltrigger breaks after page transition (with barba.js)

    in GSAP

    Posted

    Oh one more thing to the main problem:

     

    I have a small Tween Animation that works fine.

      

    gsap.to(".ball", {
    y: -120,
    backgroundColor: "#1e90ff",
    ease: "none",
    scrollTrigger: {
        trigger: ".sec-md-vid",
        containerAnimation: scrollTween,
        start: "left center",
        toggleActions: "play none none none"
    }
});

    But as soon as i switch to the other page and come back afterwards the animation doesnt trigger anymore. But i re-created the scrollTween variable again. Do i need to call something else?

    Horizontal Scrolltrigger breaks after page transition (with barba.js)

    in GSAP

    Posted

    Hi there, thank you for your help. I got most of it to work now thanks to you. The "kill" functionality was the part missing. I only have one problem i can't seem to fix. Everything works fine when i stay in place and navigate to another place. But as soon as i scroll and then try to navigate my scrollcontainer is completely broken after the transition.

     

    i tried this:

      

    async enter(data) {
    animLoaderOut(); // hide page transition
    window.scrollTo(0, 0);
},

     

    But it does not scroll back to the "top" (left) position of the new page. Does window.scrollTo() do not work inside a horizontal ScrollTrigger?

     

    You can see it here (btw thanks for the link): https://stackblitz.com/edit/web-platform-xainhm?file=assets/js/master.js

     

    To your second answer regarding the animation: 

    Yeah i already did a animation with the containerAnimation. The thing i don't understand is which trigger i should use when the element (that needs to be animated) is already in the viewport when the page loads. In this case its the "connecting people" text which already has a animation when the page loads but needs a second when the page scrolls.

     

    Thank you,

    Guillermo

    • Like 1

    Horizontal Scrolltrigger breaks after page transition (with barba.js)

    in GSAP

    Posted

    Hi,

    i am quite new to GSAP but i love it so far. I build a small horizontal scrolling dummy where everything works fine. My page transitions are made with the help of barba.js. But as soon my new content is loaded my Scrolltrigger breaks and now it scrolls vertically. I tried to call the getMaxWidth function and initiate the ScrollTween again as soon  the new content is loaded but now its not scrolling in any direction.

     

    Is there any solution to recreate the Scrolltrigger when a new page is loaded?

     

    The page transition in codepen doesnt work because i cant create a second page. (enter function of barba where i try to initiate the gsap stuff again is on line 102)

     

    And another question down the line:

    Is it possible to animate the whole text (like a fadeout) as soon as i scroll to the right side and fade it in as soon as i come back? maybe the opacity based on the scrollposition.

     

    Thanks in advanced,

    Guillermo

    See the Pen JjMMJKR by gn90at (@gn90at) on CodePen

×
×
  • Create New...