Jump to content
Search Community

Resizing Resets to create unexpected results

Steve Eldridge test
Moderator Tag

Recommended Posts

This is my first big project with GSAP.

 

Made it this far but hitting one last wall.

 

When this animation is resized the y values of the animation don't recover.

 

The animation no longer fails, thanks for the advice here on that, but it still doesn't continue to work after a few resizing events.

 

Best steps going forward?

See the Pen poWGyRq by drs-nyc (@drs-nyc) on CodePen

Link to comment
Share on other sites

Hey @Steve Eldridge - cool animation! Love it. 

 

I wasn't sure what exactly you meant by "y values of the animation don't recover". Can you elaborate a bit? 

 

Unfortunately there are almost 500 lines of just JavaScript in that CodePen - we just don't have the resources to offer free consulting services like that here in the forums. It takes a LONG time to dig in and understand everything that's going on. 

 

Are you saying you think this is a GSAP issue? I noticed you're using several other libraries like Three.js - I wonder if it's more related to those. 🤷‍♂️ Let us know why you think it's a GSAP issue. If there are any bugs, of course we'd want to fix them. 

 

I see two options here:

  1. You provide a greatly reduced minimal demo, ideally with less than 50 lines of code. The best tip I can give anyone for troubleshooting is "isolate, isolate, isolate". Rip everything out that isn't absolutely essential to showing the issue. You don't need to use your actual project files - simple <div> elements or whatever is fine. Nothing fancy. 
  2. Post in the "Jobs & Freelance" forum to see if you can find someone to hire on a consulting basis. Or you could reach out to us (GreenSock) directly if you'd like to explore paid consulting service options. 

Again, nice work on the animation. Let us know when it's out in the wild and perhaps it could make it into the showcase. 

Link to comment
Share on other sites

Thanks for the response. Perhaps it would be easier to understand when you load animation. Run it once, then resize the viewport by resizing your window and scroll the animation again. The question is not about the webgl animation, that works just fine when resized - more or less - the issue is that the scrollTrigger animation that progresses up or down by a y value of 120px to create the scrolling list then stops working correctly by the y value, hence why I said "y values of the animation don't recover."

 

 

I've removed all the code not required to show the GSAP portion that is not resizing by the Y value of the scrolling box in the animation.

See the Pen XWeOeer by drs-nyc (@drs-nyc) on CodePen

 

So we're only talking about this code - .to(".qualities", { y: "-=120px",

 

Here's the full reference in the CodePen.

 

 triggers.forEach((triggers, i) => {
    var tl = gsap
      .timeline({
        scrollTrigger: {
          trigger: "section.animationSection",
          start: () => "top -" + window.innerHeight * (i + 0.5),
          end: () => "+=" + window.innerHeight,
          scrub: true,
          markers: true,
          toggleActions: "play none none reverse",
          invalidateOnRefresh: true,
          onLeave: (self) =>
            updateElement((currentCount += self.direction), "onLeave"),
          onEnterBack: (self) =>
            updateElement((currentCount += self.direction), "onEnterBack"),
          onUpdate: (self) => updateAnimation(self.progress)
        }
      })
      .to(".qualities", {
        y: "-=120px",
        duration: 0.75,
        ease: "power1.inOut"
      });
  });

 

 

Before Resize:

 

435130418_Screenshot2022-01-1508_00_08.png.f9f58b76cd64a73e089e6240534e8fa2.png

 

After resize the "Y" value of the scrolling text list jumps up by a new value and no longer progresses correctly. Hard refresh at this size recovers immediately and correctly, so this is just limited to the interactions with the GSAP portion of the code and the 24 lines specific to the scrollTrigger.

 

953514108_Screenshot2022-01-1508_01_08.png.e528be406e5dd69d92e2c3e6c8563c67.png

 

 

 

Link to comment
Share on other sites

It looks like you are animating the same targets for each of your timelines, so when you resize it's going to apply the relative animation several times to the qualities depending how far down the page is scrolled.

 

 .to(".qualities", {
      y: "-=120px",
      duration: 0.75,
      ease: "power1.inOut"
    });

 

You might need to rework it to be a single timeline, at least for the qualities animations.

 

Link to comment
Share on other sites

Sounds easy for you and many more hours for me. Now I know this approach is never going to work and I'll have to start over.

 

This animation would seem easy to understand, scroll the page to a section, scroll that section and while doing so add to the list position so that it appears to scroll up and then release the scroll to the following sections.

 

Since the sample code I located on the greensock site lead me in the current direction, I guess I'll need to start over again.  Having extensive experience with a library of code provides the confidence to know why things won't work and what will work, sadly I don't have that knowledge yet so I'll just keep on banging my head against the wall.

 

Thanks for confirming I got it wrong.

Link to comment
Share on other sites

7 minutes ago, Steve Eldridge said:

Sounds easy for you and many more hours for me.

 

Oh, it's definitely not easy. Having years of experience with GSAP does not make ScrollTrigger any easier. I struggle with nearly every single ScrollTrigger question we get on this forum because almost every question is doing something truly unique and something I've never seen before. What makes it even more complicated is there are usually a bunch of interconnected pieces all trying to work at the same time. It took me a good 30+ minutes to just to figure out what your issue was.

 

What was the sample code you were basing this off of?

 

Link to comment
Share on other sites

Scrolling to section, animating within that section and then scrolling to the next section.

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

 

The original code for scrolling sections sample also broke with resizing but was updated to fix that break. I was hopeful that I would be able to fix my animation with that code as a template but alas that was just another dead end.

 

Scrolling a list of items:

See the Pen poeBgJO by mikeK (@mikeK) on CodePen

 

The scrolling list sample code also breaks - the items should be center of screen every time - but I didn't notice it because I wasn't assuming that the GSAP library would be so difficult to use with resizing and I should have tested it before I started down that path - now I know.

 

Nothing is easy to understand with this library and worse, nothing you use will work without extensive testing and knowledge of every possible nuance.

 

I'm stuck in an infinite loop right now.

 

After an entire week of lost time, I'm going to go back to plain javascript to find a way to do this the good old fashion way.  I'll perhaps come back to GSAP when I have 100 spare hours or more to learn this thing.

Link to comment
Share on other sites

I hear the frustration in your posts, @Steve Eldridge. So sorry! I'd hate feeling like I just wasted a week of work!

 

I try very hard to build the tools to "just work" and solve all kinds of browser bugs, logic issues, etc. automatically behind the scenes so you don't have to worry about them. Some things, however (especially when it comes to scroll effects) are inherently thorny and basically impossible to solve without major negative tradeoffs. 

 

For example, by default any tween with a ScrollTrigger will immediately render (basically record the start/end values) so that when you get to that scroll position it can instantly jump into action instead of parsing/reading values which takes a little extra time (that's why the first render is the most expensive). It's a performance optimization because scrolling can be one of the most expensive operations for the browser. HOWEVER, in that 2nd demo (scrolling list of items), you're animating the same property of the same element with multiple tweens and you set it up in a way that'd allow them to overlap. I they each record the starting value immediately, they'll all start at 0 of course but you're using relative values like "-=40vh", so you're trying to make them build on top of each other. That'd be totally fine if they were all in a timeline so that as the playhead advances things are locked into place accordingly and build on one another, but you've got independent tweens that don't know about each other. 

 

So from an engineering standpoint, the ONLY solution inside GSAP would be to force ALL tweens to look through ALL other tweens and try to piece together scenarios, like "does that other animation handle the same property? Does it have a ScrollTrigger that's further down on the page? If so, force that one to render first at startup, then record the starting values, then rewind that other tween", etc. It gets VERY expensive performance-wise (and kb-wise) so that tradeoff definitely doesn't seem worth it. That'd force every GSAP user to pay that performance penalty to run through all that logic just to try to solve this one edge case instead of simply explaining how things work and letting people structure their code appropriately to avoid rare edge cases like that. I place a big priority in performance because animation is so sensitive to that. 

 

If you've got better ideas, please let me know - I really hate hearing about anyone being frustrated with the tools. Normally we hear exactly the opposite - that GSAP solves all kinds of problems that other tools don't, and that it "just works".

 

Let's revising that "scrolling list" example - you can set immediateRender: false and preventOverlaps: true so that the independent tweens don't step on each other's toes if the user scrolls quickly. Does this work better? 

See the Pen JjrxBXN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

As for your original question, here's a simplified approach: 

See the Pen eYGxjQW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And here's the way I'd do it with a single timeline and I also adjusted the timing of when the active class gets added because I personally think it's more intuitive: 

See the Pen oNGmMQM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side notes: 

  • A ScrollTrigger can have either toggleActions or scrub - logically, it can't be both. So if you set a scrub value, it'll simply ignore the toggleActions. 
  • If you only have one tween in your timeline, there's no reason to even create a timeline. You can simply do an independent tween (and add the ScrollTrigger to that tween). It's fine if you want to wrap it in a timeline - I'm just saying it's unnecessary to create that extra object.
  • Ideally, you should always create your ScrollTriggers in they order they appear on the page (well, in the order they'd trigger) so that things refresh properly. You were creating your overall ScrollTrigger that pins the section AFTER you created all the ScrollTrigger animations for inside that section. If you can't do it in order, then you need to set refreshPriority on them accordingly so that ScrollTrigger sorts them. 
  • There's no need to set invalidateOnRefresh: true on a ScrollTrigger that doesn't have any animation associated with it (like the one you're using to just pin the section). invalidating is for the animations to force them to re-record their starting/ending values. Same for scrub and toggleActions.

Does that help clarify things? 

 

Again, I think you'll find that if you roll your own solution, there are all kinds of edge cases you'll need to accommodate and building something like ScrollTrigger is inherently tricky. If you've got ideas for improvement in terms of ScrollTrigger, I'm all ears. 

  • Like 2
Link to comment
Share on other sites

Thank you for all your help on this and for posting these answers. 

 

I did solve the issue by using jQuery to calculate the progression of the count. Next week I'll figure out the new animation unique to the mobile - horizontal v. vertical.

See the Pen dyVajVm by drs-nyc (@drs-nyc) on CodePen

 

I'll come back to your updates. But, of course, the resizing issue with the sample posted with the two changes would have saved days of trying to figure out how to do it. Oh well, lessons learned.

 

I agree that this library and the samples you have are terrific. I'm going to spend the hours on becoming proficient with this tool. I'm very impressed with what it can do. Unfortunately, I was not planning to hit so many snags, first realizing that scrolling sections would need a completely new approach and that resizing would break using published samples.

 

This is a fantastic resource, and I'll soon get up over that learning curve. But, right now, I know too little to offer practical ideas. 

 

Again thank you for the prompt responses. Just knowing I wasn't doing it right was enough to power through to a new approach that did work.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...