[Detecting onWheelEnd while using Observer]

6 hours ago, Rodrigo said:

Hi,

 

In your latest demo there is nothing related with deltaY. I mentioned that the wheel event only reports a deltaY value and you're still using deltaX in your demo.

 

Please create a minimal demo that actually reflects the issue you're having. The demo I added in my previous post is working fine with the wheel event on the latest chrome and firefox.

 

Happy Tweening!

Oh. Sorry, I think I did a bad job on explaining. I was trying to do this https://gsap.com/community/forums/topic/37731-horizontal-scroll-on-trackpads/

[Detecting onWheelEnd while using Observer]

36 minutes ago, Rodrigo said:

Mhhh.... what's weird about it? If the Observer event has a variation on the X axis the deltaX value will be different than 0. When using the mouse wheel, the variation of the Observer event will only be on the Y axis, so deltaX will always be 0. That's the way it should be.

 

Here is a fork of your codepen that shows a simple way to achieve what you're looking for (just for the wheel event):

 

 

 

For the rest of the events, better create a different event handler.

 

Hopefully this helps.

Happy Tweening!

oh this got closer to result. it's still triggering the function 2-3 times before `isTweening` state is changed. I cleaned it up a bit, created different handler

See the Pen JjzyjqQ?editors=0010 by PixeledCode (@PixeledCode) on CodePen

[Detecting onWheelEnd while using Observer]

10 minutes ago, Rodrigo said:

Hi,

 

There is no such event (wheel end) on the browsers native API so there is no way for Observer to actually check for that.

 

If you want to prevent the natural scrolling you can prevent the default event with Observer as shown in this demo:

 

 

 

 

 

 

But beware that preventing the normal wheel event after the user can actually scroll through your page, would result in some odd looking behaviour and odd UX (personally I wouldn't enjoy it). It would be far better to enclose that in a particular container that is clearly delimited by some specific color/border so the user can infer that interactions in that particular section work in a different way, make your UI as intuitive as possible.

 

Finally this seems odd to me:

function handleMouseUp(e, isScrolled) {
  const { x, startX, deltaX } = e;
  console.log("wheel handler");
  console.log(deltaX, startX, isScrolled);
  if (isScrolled) {
    if (deltaX < -15) {
      updateSlides("prev");
      return;
    }
    if (deltaX > 15) {
      updateSlides("next");
      return;
    }
  }
  if (x > startX && x - startX > 50) {
    updateSlides("prev");
    return;
  }
  if (x < startX && startX - x > 50) {
    updateSlides("next");
    return;
  }
}

If you're checking for the mouse wheel event, the deltaX value will always be 0 because the mouse wheel works on the Y axis by default unless you hold the shift key while moving the wheel, so regardless of the isScrolled boolean, the rest of your conditions will never met and nothing will happen.

 

Happy Tweening!

Yes that deltaX things is indeed weird. I only added it to showcase what issue I am facing. I only want the wheel to trigger when swiping on a trackpad from laptop

[Detecting onWheelEnd while using Observer]

So I tried looking through docs but I couldn't find a way to detect when the wheel event ends when using Observer. Is it possible through GSAP or there needs to be a custom solution to detect when it ends?
 

I only need the function to trigger when the scrolling ends, otherwise it will go to the end on a single wheel scroll. 

 

Thank You

See the Pen RwdVvPY?editors=0010 by PixeledCode (@PixeledCode) on CodePen

[Setting a rotationY gives big vertical scroll]

1 hour ago, akapowl said:

Hello there.

This forum is actually meant for GSAP specific questions - like e.g. about the API etc. - Everything you mention really just are CSS styling issues though.

If you want to know what's causing that huge vertical overflow, uncomment the 'backface-visibility: hidden' on your boxes and you will see that the perspective is sort of odd (I scaled your .stage down in this example so it becomes more apparent on first look), so you might want to change your perspective value.
 

 

 

 

 

 

 

To change that, you will need to position your boxes properly within that perpective - that is within the container that holds the perspective.
So to make it look 'symmetrically tilted' for bottom and top, logically they will need to be in the vertical center of the element that has the perspective.

Here is your example with all that (and some more CSS styling on nav and body) changed.
 

 

 

 

 

 

 

If you are having problems understanding how to work with 3D transforms to set things up as you wish in the first place, I would suggest having a look at this guide for example.

https://3dtransforms.desandro.com/



And since I mentioned it earlier, here's one thing about the GSAP API;

You don't need to wrap everything in a css object inside the vars object; you can just target the properties directly in the vars object like so.
 

// no need to do this
  
gsap.set(stage, {
  css: {
    perspective: 1800,
    transformStyle: "preserve-3d"
  }
});

// you can just do this instead

gsap.set(stage, {
    perspective: 1800,
    transformStyle: "preserve-3d"
});

But I'll leave it up to you to change that in your codebase.

Cheers.
 

Thank you for your detailed thoughts on this. Can you also recommend some more resources on 3d transformations?

[Setting a rotationY gives big vertical scroll]

Trying to create a 3d carousel thingy and this is one of the approaches which is kind of working. Except that setting rotationY is giving scroll. First it was both side scroll but setting overflow-x: clip fixes one side but drastically increases the other one. 
Also, the rotation is not looking natural. Bottom side of card is tilted but top is straight.

Any help is appreciated

See the Pen RwdVvPY?editors=0010 by PixeledCode (@PixeledCode) on CodePen

[Creating a 3D Carousel with dragging and snapping]

3 hours ago, mvaneijgen said:

Sounds like you're looking for the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ with the dragMinimum property. So instead of Draggle, which is made to drag something use the Observer plugin and watch for the drag event and do something based on that. Hope it helps and happy tweening! 

 

 

Thanks for replying. This sets in the right direction I think. I used Observer and dragEnd to remove a lot of code and rely on GSAP which was good. Although I am still not sure how to add the final touch of a carousel. I think it will need toLeft/toRight or dragStart and then checking how many pixels are moved. Ideally it should be more than 50% of the card width to trigger the move to next slide.
and then there is also the snapping back to original position if drag is not eligible for move.

[Creating a 3D Carousel with dragging and snapping]

So I am creating a 3D carousel which goes to next slide on button click/mouse drag/arrow keys. I first tried to merge carousel libraries like splide and embla but couldnt get them to work properly. Now I have moved to custom solution which kind of works but lacks some features.
https://svelte.dev/repl/e33b47c769bf49278094746a3af3c547?version=4.2.8

Is it possible to add dragging and snapping to axis using gsap? Unless user drags the slide till a certain number, it wont go to the next one and snap back to it's position, just like how normal carousel works.

[Remove/Hide an element and adjust the parent element accordingly on scroll]

1 minute ago, GreenSock said:

I read your question a few times, @PixeledCode, but I'm still totally lost about what you're asking. Can you please elaborate a bit? What do you mean by "but on scroll" (isn't it already happening on scroll?) 

 

If you're rearranging things in the DOM (like removing something), you might want to look at Flip plugin because it solves a lot of those challenges. 

Thanks for replying and sorry for not making it clear.

Currently, the timeline is starting as soon as the page loads and is really glitchy on scroll for some reason.

And I'll definitely look into FLIP plugin. 

[Remove/Hide an element and adjust the parent element accordingly on scroll]

Hi, I am trying to achieve something like in the CodePen but on scroll. Currently I'm decreasing opacity, translating to top a bit and reducing height of parent.

But Ideally, I need to remove the element so that parent can adjust height according so it's responsive.

 

Any help is appreciated.

See the Pen wvrRKvL by PixeledCode (@PixeledCode) on CodePen

[Align scrollTrigger end with the start of next trigger on same id]

32 minutes ago, Cassie said:

This shouldn't be an issue, there's plenty of time to add a class to a different element, you can use the onToggle callback to run some custom logic.

If you still want to space them out, you can use start and end positions to move the markers - You could also use different start and end triggers?

Something like this?
 

 

Thanks Cassie, that's exactly what I was looking for. I should definitely go through Carl's GSAP course again haha

[Align scrollTrigger end with the start of next trigger on same id]

Hi,

I'm trying to create a scrolltrigger where I can only target the heading of before a paragraph. On each trigger, I am supposed to add class to some other element. but currently, since I am only targeting h3 tags, scrolltrigger ends just as soon as it starts, as you can see in demo. Since all the trigger belong to same id, I was hoping if there was some way to align end of each trigger just before the start of next one?

 

Thank You

See the Pen VwbXGrE by PixeledCode (@PixeledCode) on CodePen

[Android resize event issue]

13 hours ago, GreenSock said:

Yeah, what I mean is try reproducing just the HTML/CSS structure of what ScrollTrigger is doing for the pinning. Remove ScrollTrigger completely. See if that HTML/CSS structure is causing the problem (it must be). Then try to isolate further. See what properties you can alter to correct the behavior. 

 

ScrollTrigger doesn't do anything with focus. Feel free to check the source code. If you can't reproduce the problem apart from ScrollTrigger, my best guess would be that Android has a bug related to merely checking the scroll position or something like that (perhaps that causes it to lose focus). Try running this and seeing if it helps at all: 

ScrollTrigger.config({syncInterval: 999999999});

I kinda doubt that'll do anything, but if it does solve things that means that merely checking the scroll position is triggering the bug. 

wow, so this worked! I tried searching docs for syncInterval but couldn't find anything. What exactly is it doing? Should I be using it in production? Thank You!!

[Android resize event issue]

18 minutes ago, GreenSock said:

I have a vague memory of some bug in Android (not GSAP/ScrollTrigger) that caused the browser to basically treat the hit area for position: fixed elements as if it isn't position: fixed. In other words, the interactive hit area scrolls up out of the viewport even though the element itself doesn't! Super weird, right? And I could be remembering incorrectly here, but I simply cannot imagine how ScrollTrigger could have anything to do with this issue. I'd bet that if you remove ScrollTrigger from the equation but just nest your element inside another one (similar to what pinning does) and set your element to position: fixed and you'll see the issue happen (proving it's not ScrollTrigger). 

 

Have you tried wrapping your element in another <div> or something? I wonder if Android's bug is specific to inputs that have position: fixed or something, but if you put them in a parent <div> that's position: fixed instead, maybe it'll help? If not, try doing that and adding a slight transform, even if it's y: 0.01. The key is to find something that triggers the browser to render properly. 

yeah, it's really weird. I tried removing scrolltrigger and tried both scenarios:

1. Put the input inside a div and gave that div position: fixed. 

2. Give position: fixed to input itself without any enclosing div.

In both cases, input  field worked on android. So I'm not sure position is messing with input anymore...

[Android resize event issue]

7 minutes ago, GreenSock said:

Howdy, @PixeledCode. Are you saying you think this is a ScrollTrigger issue? If you remove ScrollTrigger from the equation, do you still see the issue? We really try to keep these forums focused on GSAP-specific questions, that's all. We spend an inordinate amount of time helping people for free here and we have limited resources

ah yes, I understand and I really appreciate what you guys are doing. And yes, if I remove the scrolltrigger from input field, I lose the pinning ability but then it works perfectly on android as well. So what I think is that there is some issue in android maybe and gsap scrolltrigger is triggering it?

[Android resize event issue]

Hi, I'm actually facing some issue that's only reproducible on android phones. I have tested on iPhone, iPad and desktop but there is no issue there.

Problem: While using scrolltrigger pin on an input field, android devices loses the ability to keep their focus on that field. I found some related issues on Stackoverflow, here and here. I am fighting this issue for a week and after losing the battle, I need some help regarding it.

 

Here is the codesandbox to check code and to open output on android.

 

Any help is appreciated. Thanks!

[GSAP ScrollTrigger issue on page change]

15 minutes ago, OSUblake said:

I added chapter(s) to the dependency array, and now it looks like it's working. I also used v3.6.1.

 

https://codesandbox.io/s/jovial-chaplygin-t3b86?file=/pages/[chapter].js

 

You're right. It's working now. Thanks a lot!

[GSAP ScrollTrigger issue on page change]

15 minutes ago, OSUblake said:

I'm having trouble understanding how your app even works, and it's really slow to navigate, but it looks like it you're not creating new scroll triggers when going to a different page.

 

I added a line to log out the number of scroll triggers, but it only fires once.

function handleSidebarAnimation() {
  console.log("TRIGGERS 1", ScrollTrigger.getAll().length);

  ...
}

 

And the cleanup never fires.

useEffect(() => {
    setTimeout(handleSidebarAnimation, 100);

    window.addEventListener("scroll", handleScroll);
    return () => {
      const t = ScrollTrigger.getAll();
      console.log("TRIGGERS 2", t.length);
      t.forEach((t) => t.kill());
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

 

So that means ScrollTrigger doesn't know the new layout. You need to find a way to recreate your triggers on a new page, and kill the old ones.

 

I would also use v3.6.1 for the time being as we are investigating a possible issue when navigating pages.

 

I would also avoid using setTimeout as something could change in between that time period. If you need ScrollTrigger to recalculate, just use .refresh().

 

 

 

Thank you for this. My problem looks similar to the post you shared. Using normal <a> instead of next/link is working fine. I'll also try with v3.6.1 and see how it goes.

And yeah, sorry for slow speed. I connected it with my strapi backend which is hosted on a really slow server so it's taking time for each navigation.

[GSAP ScrollTrigger issue on page change]

19 minutes ago, OSUblake said:

Hi @PixeledCode

 

You codesandbox link isn't working, it's show a 502 error. Can you provide another one?

 

 

Hi, sorry about that. That was production mode build I made on Codesandbox, I think they don't keep them running for long. Here's the code: https://codesandbox.io/s/mystifying-nash-pp4kd?file=/pages/_app.js

[GSAP ScrollTrigger issue on page change]

58 minutes ago, PixeledCode said:

Hi @Cassie thanks for replying. So I tried to setup but wasn't able to import css files, I'm ashamed. Here is the codesandbox link: mystifying-nash-pp4kd - CodeSandbox

Anyway, I was testing and noticed something. The problem is not on the pages without images and so I believe that the images are being loaded late and then the ScrollTrigger is not refreshing on that change... Could this be an issue, and if yes, any idea on how to fix it?

 

Thank You

ok so this post helped. ScrollTrigger doesn't work properly on page with lazy load images - GSAP - GreenSock. I'm listening to images being loaded and then refreshing now. 

 

Fixing this I found another issue. Next.js have next/link for routing which makes routing possible without reloading. Kind of hot reloading but that also crashes gsap. You can possibly reproduce it by going to the link https://pp4kd-3001.sse.codesandbox.io and selecting first box 'Introduction', go to the bottom and selecting, 'read more'. Next page will be broken with total height similar to previous page but all of it is whitespace.

 

Either removing scrolltrigger or removing next/link and using regular <a> tags fixes it.

[GSAP ScrollTrigger issue on page change]

Hi @Cassie thanks for replying. So I tried to setup and here is the codesandbox link: mystifying-nash-pp4kd - CodeSandbox

I was testing and noticed something. The problem is not on the pages without images and so I believe that the images are being loaded late and then the ScrollTrigger is not refreshing on that change... Could this be an issue, and if yes, any idea on how to fix it?

 

Thank You

[GSAP ScrollTrigger issue on page change]

Hi, I'm trying to implement a basic ScrollTrigger animation on Nextjs. It's basically changing sidebar background based on current position of scroll. You can check it's implementation here: Introduction - Budget Basics | Open Budgets India. 

Problem is initial load of page, which messes up the the start/end of scrolltrigger but resizing the browser fixes the position. I tried some solutions from this post: ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs - GSAP - GreenSock but they are not working in my case.

 

All of the code is available here: budget-basic-next/[chapter].js at main · PixeledCode/budget-basic-next (github.com) but basically what I'm doing is

 

 useEffect(() => {

        gsap.registerPlugin(ScrollTrigger)
        setTimeout(handleSidebarAnimation, 100)



        return () => {

            ScrollTrigger.refresh()
            if (ScrollTrigger.getById('st-id')) {
                ScrollTrigger.getById('st-id').kill()
            }
        }
    }, [])

and the function is 

 

function handleSidebarAnimation() {
    const articles = gsap.utils.toArray('article')

    articles.forEach((article) => {
        let sideLink = document.querySelector(
            `li[keyid=${article.getAttribute('id')}]`
        )
        gsap.to(sideLink, {
            scrollTrigger: {
                markers: true,
                trigger: article,
                id: 'st-id',
                start: 'top 22%',
                end: 'bottom 18%',
                refreshPriority: 1,
                toggleActions: 'restart complete reverse reset',
                onEnter() {
                    sideLink.classList.add('activeSidebar')
                },
                onLeave() {
                    sideLink.classList.remove('activeSidebar')
                },
                onEnterBack() {
                    sideLink.classList.add('activeSidebar')
                },
                onLeaveBack() {
                    sideLink.classList.remove('activeSidebar')
                },
            },
        })
    })
}

 

I know I'm probably doing something wrong and it's dom order which is creating issues on initial load (eg: coming from home page to the page with sidebar and animation.) but I am not able to find where. Any help is appreciated!

[Scrolltrigger inside div and transformOrigin animation not working]

3 minutes ago, GreenSock said:

You might be interested in my answer to another recent post: 

 

haha, looks like alot of people are into this thing right now. Thanks again!

[Scrolltrigger inside div and transformOrigin animation not working]

Thank you for the detailed answer. I'll try all of these!

[Scrolltrigger inside div and transformOrigin animation not working]

Hi, I am trying to create something like this What a Tiny Masterpiece Reveals About Power and Beauty - The New York Times (nytimes.com) I think it's possible with scrolltrigger but I am facing few issues. Scrolltrigger is not really working for me, since it's inside another div. I think I am using it wrong.

Also transformOrigin works after scaling and animation does not work, even though it's applied in css.

 

Any help is appreciated, Thank You

See the Pen qBRJbvV by PixeledCode (@PixeledCode) on CodePen