Jump to content
GreenSock

OSUblake last won the day on June 4

OSUblake had the most liked content!

OSUblake

Moderators

  • Posts

    9,196

  • Joined

  • Last visited

  • Days Won

    706

 Content Type 

Posts posted by OSUblake

    gsap-bonus.tgz file installs old version

    in GSAP

    Posted

    Welcome to the forums @Tada AS

     

    Is very answer hard to local dev questions, but assuming you've nuked your node_modules folder and the latest tgz is in your project, then it's probably some sort of caching issue with the package manager you are using. Try googling for how to clear the cache of whatever package manager you are using. It usually seems to be yarn that does kind of stuff.

     

    • Like 1

    Scroll Triggered Card Stack without the loop!

    in GSAP

    Posted

    Welcome to the forums @Studio7

     

    To prevent it from looping, you just need to get rid of the wrapForward/wrapBackward calls.

      

    onUpdate(self) {
			if (self.progress === 1 && self.direction > 0 && !self.wrapping) {
				// wrapForward(self);
			} else if (self.progress < 1e-5 && self.direction < 0 && !self.wrapping) {
				// wrapBackward(self);
			} else {
        scrub.vars.totalTime = snap((iteration + self.progress) * seamlessLoop.duration());
				scrub.invalidate().restart(); // to improve performance, we just invalidate and restart the same tween. No need for overwrites or creating a new tween on each update.
				self.wrapping = false;
			}

     

    See the Pen PoEgOOm by GreenSock (@GreenSock) on CodePen

     

    But that's a rather complicated demo to learn from. It might be easier to start out small and build up to what you want following this article. And, of course you can ignore the looping parts, but the animations might still be helpful.

     

    Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling | CSS-Tricks - CSS-Tricks

     

    • Like 3

    Moving elements in React

    in GSAP

    Posted

    3 minutes ago, Shuriken said:

    As the From tween do not work as well. I must use a fromTo

     

    If you're using React 18, that just a new feature that is causing those issues. We're looking at ways to fix that, but for now it is what it is. It seems like every new version of React throws some new feature into the mix that makes doing animations increasingly more complex and tedious.

     

     

    Scrollable area on a page with ScrollSmoother

    in GSAP

    Posted

    Currently normalizeScroll does not support nested scrollers, but it's something we're investigating. For now you'll just have to disable that feature.

      

    ScrollSmoother.create({
            content: "#smooth-content",
            wrapper: "#smooth-wrapper",
            smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
            effects: false, // looks for data-speed and data-lag attributes on elements
            // normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies
            smoothTouch: 0,
        })

     

    • Like 1

    Nodes + Draggable with GSAP

    in GSAP

    Posted

    14 minutes ago, PointC said:

    I can't find anything on CodePen. 🤷‍♂️

     

    Haha, I can't either, but luckily someone brought that demo up to me in a DM a couple of weeks, so it was easy to find.

     

    • Like 1

    Nodes + Draggable with GSAP

    in GSAP

    Posted

    28 minutes ago, PointC said:

    Here's a cool pen from resident guru @OSUblake. It's a few years old, but he may have an updated version - I'm not sure.

     

    Nope. I don't want to touch that again. It brings up way too many questions that I don't want to answer. 😉

     

    But here is a bezier connector isolated. 

     

    See the Pen GMrExO by osublake (@osublake) on CodePen

    • Like 2

    ScrollTrigger timeline not valid when resizing window

    in GSAP

    Posted

    24 minutes ago, Apnw2 said:

    when I saw it doesn't work on field. I think that's because getBoundingClientRect gives me the value with transform at each time.

     

    What do you mean by field? It's doing getBoundingClientRect correctly as you can see in the logs there are no transforms when it's called.

     

    See the Pen GRyLgYP by GreenSock (@GreenSock) on CodePen

     

    If you're trying to have it match up exactly with size and position, it would be probably be better to calculate and animate to the center of each element. The scaling is going to mess up the x and y coordinates if you use the elements top left corner because the transform origin is in the center.

     

    • Like 1

    ScrollTrigger timeline not valid when resizing window

    in GSAP

    Posted

    Hi Apnw2,

     

    One issue is that you forgot to put invalidateOnRefresh inside the scrollTrigger object. Another issue is that getBoundingClientRect includes transform, which is going to mess up your calculations if there are any transforms applied. It's best to compute all that when animation is invalidated as it will reset those transforms, allowing you to get the correct getBoundingClient values.

     

    See the Pen GRyLgYP by GreenSock (@GreenSock) on CodePen

     

    • Like 2

    Horizontal Scrolling Page with Navigation Anchors on Side

    in GSAP

    Posted

    Hi PixelPixie,

     

    It's best to keep your demos as simple as possible, that just focus on the issue at hand. So based on the question in that previous post, is this what you were going for? All I really did is move the nav to side and added a the same onlick listener that the nav uses for each section, so when click on a section it does the same thing as click on the nav links.

     

    See the Pen WNdWbvP by GreenSock (@GreenSock) on CodePen

     

    • Like 3

    ScrollSmoother in Next.js breaks ScrollTrigger upon page navigation from ScrollSmoother page to non ScrollSmoother page

    in GSAP

    Posted

    Yeah, I can edit it. I think one of the issues is that that nesting needs to be different, kind like this.

      

    <div id="smooth-wrapper">
          <div id="smooth-content">
            <PageTransition route={router.asPath}>
              <Component {...pageProps} />
            </PageTransition>
          </div>
        </div>

     

    And we need to kill some ScrollTriggers and effects when navigating to a new page. We also need to refresh ScrollSmoother on new routes. I just put it inside a timeout for now. How would I go about calling ScrollTrigger.refresh() at the end of the page transition?

     

    It's looking better, but there are still issues with it, like that black area when you scroll down. Is that part of the wipe?

     

    https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-forked-demo-459fmr?file=/pages/_app.js

     

    I'm going to tinker around with make a ScrollSmoother component similar to what I did with this nuxt.js one. 

     

     

     

    • Like 2

    ScrollTrigger only works correctly when console is open 🤔

    in GSAP

    Posted

    Hi serotininene,

     

    That scroll animation looks the same to me whether the console is open or closed. What browser and OS are you seeing this on?

     

    The only weird thing I noticed is that when that contact form at the bottom appears, it's changing the scroll position, probably because it's changing the height of the document, but I don't know if that is related to what you are seeing and you are properly handling that change like doing a ScrollTrigger refresh.

     

    If you could try to make a demo that reproduces the issue, that would be really helpful because it's really to troubleshoot a live site, especially when can't interact with the code and make changes to it. You can use CodeSandbox if you need to use React.

     

×
Login Create Account