Jump to content
Search Community

pin with scrollTrigger kill the position to opacity

Lichay test
Moderator Tag

Recommended Posts

pin with scrollTrigger kill the position to opacity

When you scroll down it change to opacity to 0 and scroll up reback to 1

but the problem start when you change the screen size on smart phone to width instead height

when it go down you need to change to width and return to height and it start the problem it do opacity not on same point

and even don't do it a all

 

I add a video to show my problem

it very weird issue so plz help

See the Pen RwGvQbJ by lichaytiram (@lichaytiram) on CodePen

Link to comment
Share on other sites

@Lichay are you just saying that the markers aren't lining up? Those are purely for during development and of course they can actually affect the size of the containers/page, so when you're switching orientations that may be the cause there. But in terms of actual functionality, are you seeing any problems whatsoever? If you set markers: false, are there any problems? If so, can you please explain? 

 

Also, your case is a non-trivial one because you're trying to pin a container and have a totally different ScrollTrigger map the start/end of a child that would also be affected by the pinning. 

 

12 hours ago, Lichay said:

Because it feel so basic for that library must be a solution 

I saw your comment on the ScrollTrigger page too - it sounds like you think this stuff is just super basic and easy. Perhaps you'd like to craft a library that can do all this easily? I'm curious - do you know of any other library that can do even half of what ScrollTrigger does? On the other page, you said "too many bugs" - I'm not currently aware of even a single bug in ScrollTrigger, although maybe there is one here and I'm just not quite understanding what you're describing. Are there other "bugs" that you're aware of? Have you looked at the Github issues page for most other libraries that attempt to do the things ScrollTrigger does? ScrollMagic, for example, has 483 open issues. We have zero related to ScrollTrigger. And we pounce on any issues that come up pretty quickly. 

 

Also, I understand that sometimes when you've got a deadline looming and you can't figure something out, you might be eager to get an answer to any questions you post in a forum. Please just keep in mind that these forums are free and you haven't paid us anything or joined Club GreenSock to support development efforts, yet you have 126 posts here so far and you seemed frustrated that we didn't get you a solution here within a few hours, so you spam posted. Please avoid doing that in the future. 

 

We're eager to help users of our technology, but please adjust your expectations a bit. 

 

Anyway, back to your issue, when I look at it I'm not seeing any incorrect behavior aside from perhaps markers being off in the edge case where you switch orientations and change page size quite a bit in the process, but even that wouldn't be an issue real-world because you'd never leave markers on for deployment. They're purely for some developer convenience. Perhaps I'm missing a legitimate bug here, though, and I'm very open to that. I'm just having a hard time seeing it.

Link to comment
Share on other sites

41 minutes ago, GreenSock said:

@Lichay are you just saying that the markers aren't lining up? Those are purely for during development and of course they can actually affect the size of the containers/page, so when you're switching orientations that may be the cause there. But in terms of actual functionality, are you seeing any problems whatsoever? If you set markers: false, are there any problems? If so, can you please explain? 

 

Also, your case is a non-trivial one because you're trying to pin a container and have a totally different ScrollTrigger map the start/end of a child that would also be affected by the pinning. 

 

I saw your comment on the ScrollTrigger page too - it sounds like you think this stuff is just super basic and easy. Perhaps it'd be best for you to craft a library that can do all this easily? I'm curious - do you know of any other library that can do even half of what ScrollTrigger does? On the other page, you said "too many bugs" - I'm not currently aware of even a single bug in ScrollTrigger, although maybe there is one here and I'm just not quite understanding what you're describing. Are there other "bugs" you'd like to tell us about? Have you looked at the Github issues page for most other libraries that attempt to do the things ScrollTrigger does? ScrollMagic, for example, has 483 open issues. We have zero related to ScrollTrigger. And we pounce on any issues that come up pretty quickly. 

 

Also, I understand that sometimes when you've got a deadline looming and you can't figure something out, you'd be eager to get an answer to any questions you post in a forum. Please just keep in mind that these forums are free and you haven't even purchased a Club GreenSock membership to support development efforts, yet you have 126 posts here so far and you seemed frustrated that we didn't get you a solution here within a few hours, so you spam posted. Please avoid doing that in the future. 

 

We're eager to help users of our technology, but please adjust your expectations a bit. 

 

Anyway, back to your issue, when I look at it I'm not seeing any incorrect behavior aside from perhaps markers being off in the edge case where you switch orientations and change page size quite a bit in the process, but even that wouldn't be an issue real-world because you'd never leave markers on for deployment. They're purely for some developer convenience. Perhaps I'm missing a legitimate bug here, though, and I'm very open to that. I'm just having a hard time seeing it.

It because I create a full page that use Gsap and it doesn't work well because of that bug and yes I found another bug and ask for it early like 6 months ago and that issue isn't fix yet but it not important like this one.

I can tell you about the second bug later or private but for now the main problem.

 

Yes we don't need really markers for production I know it, I did it only for one reason to show you the bug that happened in my website.

What it doing? just loss he start position with or without markers and I must fix that issue

I can't upload my real website like that.

yes you are right greensock good library and my problem not easy to fix but on real word use on iPhone and change from height to width it very basic stuff

and any library must support this basic stuff.

 

 

You can see that problem without markers on my real project

website

https://temp-89055.web.app

code

https://github.com/lichaytiram/AngularRepo/tree/master/Projects/WayLife/src/app

 

some element from parallaxContainer is gone and stay with opacity 0 after change look at smartphone (height to width and back - you can see what I mean on video above)

 

Link to comment
Share on other sites

1 hour ago, Lichay said:

What it doing? just loss he start position with or without markers and I must fix that issue

I cannot seem to reproduce the problem even one time. I have tried on my iPhone, switching orientations many times, scrolling down, scrolling up, etc. - it works exactly as I'd expect every time. I must be missing something obvious. 

 

Even in your video, it appears to work correct (except that the markers were off after you changed orientation a few times, but I explained why that may be happening above). In other words, it always faded at the proper time according to the scroll position. Right? 

 

I forked your demo and changed the background of the container so that it's a grid to make it easier to see when it's actually scrolling: 

See the Pen 5242443ac35a116b710dbe8c2661532d by GreenSock (@GreenSock) on CodePen

 

Are you able to break that on your phone at all? I can't seem to break it even once. But again, I could be misunderstanding something you're trying to say. 

 

It looks like there are various logic flaws in your real project that are likely causing the problems, but it's beyond the scope of help we can provide for free in these forums to diagnose and troubleshoot a live site like that. But I noticed, for example, this faulty code: 

const pillowsTimeline = gsap.timeline();
  pillowsTimeline.to('.pillows', {
    scrollTrigger: {
      trigger: '.pillows',
      start: 'top 70%', end: 'center 40%',
      scrub: true
    },
    x: '-=200%', rotation: 360, visibility: 'visible', scale: 1, opacity: 1
  })
    .to('.pillows', {
    scrollTrigger: {
      trigger: '.pillows',
      start: 'center 40%', end: 'center 10%',
      scrub: true
    },
    opacity: 0, x: '+=150', immediateRender: false
  });

You're making one of the most common ScrollTrigger mistakes by creating ScrollTriggers in individual tweens nested in a timeline. Notice the logic issue in your code - you've got a timeline that controls the playhead position of its child tweens (that's the nature of timelines), and then you've ALSO set up ScrollTriggers to control the playheads of both simultaneously. So the timeline would fight with the scrollbar for control of the child tweens' playhead position. That's not a bug in ScrollTrigger. 

 

1 hour ago, Lichay said:

and yes I found another bug and ask for it early like 6 months ago and that issue isn't fix yet

I'm very curious about this - can you please tell us more about this and provide a minimal demo? In all your previous posts from what I've seen it has always been logic issues in your code, not bugs in ScrollTrigger but perhaps there is a legitimate bug that we need to fix. I just need some evidence to go on, so a minimal demo and succinct explanation would be greatly appreciated. 

  • Like 1
Link to comment
Share on other sites

15 hours ago, GreenSock said:

I cannot seem to reproduce the problem even one time. I have tried on my iPhone, switching orientations many times, scrolling down, scrolling up, etc. - it works exactly as I'd expect every time. I must be missing something obvious. 

 

Even in your video, it appears to work correct (except that the markers were off after you changed orientation a few times, but I explained why that may be happening above). In other words, it always faded at the proper time according to the scroll position. Right? 

 

I forked your demo and changed the background of the container so that it's a grid to make it easier to see when it's actually scrolling: 

 

 

 

Are you able to break that on your phone at all? I can't seem to break it even once. But again, I could be misunderstanding something you're trying to say. 

 

It looks like there are various logic flaws in your real project that are likely causing the problems, but it's beyond the scope of help we can provide for free in these forums to diagnose and troubleshoot a live site like that. But I noticed, for example, this faulty code: 




const pillowsTimeline = gsap.timeline();
  pillowsTimeline.to('.pillows', {
    scrollTrigger: {
      trigger: '.pillows',
      start: 'top 70%', end: 'center 40%',
      scrub: true
    },
    x: '-=200%', rotation: 360, visibility: 'visible', scale: 1, opacity: 1
  })
    .to('.pillows', {
    scrollTrigger: {
      trigger: '.pillows',
      start: 'center 40%', end: 'center 10%',
      scrub: true
    },
    opacity: 0, x: '+=150', immediateRender: false
  });

You're making one of the most common ScrollTrigger mistakes by creating ScrollTriggers in individual tweens nested in a timeline. Notice the logic issue in your code - you've got a timeline that controls the playhead position of its child tweens (that's the nature of timelines), and then you've ALSO set up ScrollTriggers to control the playheads of both simultaneously. So the timeline would fight with the scrollbar for control of the child tweens' playhead position. That's not a bug in ScrollTrigger. 

 

I'm very curious about this - can you please tell us more about this and provide a minimal demo? In all your previous posts from what I've seen it has always been logic issues in your code, not bugs in ScrollTrigger but perhaps there is a legitimate bug that we need to fix. I just need some evidence to go on, so a minimal demo and succinct explanation would be greatly appreciated. 

I update it in my project but still have same problems and bugs it happened only inside that container with Gsap when I change screen size

I am sure it bug with Gsap and no something else.

The problem opacity stay 0 or X posotion start -=200% instead back to normal so it must be Gsap start points change for some reason.

 

The second bug on cssruleplugin later ill find all information from my history page.

 

This is right code?

 

    const totalScroll = 2600;
 
    gsap.to(".parallaxContainer", {
      scrollTrigger: {
        pin: ".parallaxContainer",
        end: `+=${totalScroll}`
      }
    });
 
    gsap.to(".parallax-bg-up", {
      scrollTrigger: {
        trigger: ".parallaxContainer",
        start: 'top 70%'end: `+=${totalScroll} top`,
        scrub: true
      },
      y: (itarget=> -totalScroll * target.dataset.speed,
      ease: "none"
    });
Link to comment
Share on other sites

1 hour ago, Lichay said:

I update it in my project but still have same problems and bugs it happened only inside that container with Gsap when I change screen size

Let's focus on the minimal demo for now - we can't troubleshoot your live project with all your other code in it (which I already mentioned has logic flaws in the code from what I saw). 

 

Are you saying that this CodePen does NOT work for you? Do you see ANY bug in its behavior?: 

See the Pen 5242443ac35a116b710dbe8c2661532d by GreenSock (@GreenSock) on CodePen

 

I've tested it a bunch of times and it never broke even once for me. I wonder if we're looking at different things or if I'm misunderstanding what you think the "bug" is. 

 

1 hour ago, Lichay said:

I am sure it bug with Gsap and no something else.

You could be right, but here's the data I have at this point:

  1. I can't get the minimal demo to break at all. I see no problems. I must be able to verify the "bug" before I can fix it. 
  2. You have logic flaws in your project code, as I pointed out previously.
  3. In every other case in the past when you've claimed there was a "bug" in GSAP, it ended up being problems in your implementation, not a bug in GSAP/ScrollTrigger.
  4. Nobody else has reported a similar bug, yet many thousands of people are using ScrollTrigger. I'd think that if there was a bug in what you're calling "basic" functionality of ScrollTrigger, many other people would be running into it as well and reporting problems. There are no such reports. 

Again, I'm not saying you're wrong for sure or that there aren't any bugs, but based on the data I have it seems far more likely that it's a flaw in your implementation somewhere.

 

1 hour ago, Lichay said:

This is right code?

I can't say for sure without seeing it in context with your HTML/CSS too. I can say, however, that your logic would definitely cause things to line up in different spots based on the orientation of the screen because you're using a hard-coded "totalScroll" value but your start/end values would shift around based on the viewport height. 

 

If you still think there's a bug and you want help, you'll need to provide a minimal demo and specific instructions about how to consistently reproduce the problem. Please confirm that the demo I provided works for you. If not, please record a video and show us how/where you think it's breaking. 

  • Like 1
Link to comment
Share on other sites

1 hour ago, Lichay said:

The second bug on cssruleplugin later ill find all information from my history page.

Oh, I thought you said there were multiple bugs in ScrollTrigger. Okay, well if you think there's a bug in CSSRulePlugin, I'd love to take a peek at that. Please provide more details and a minimal demo. Thanks.

  • Like 1
Link to comment
Share on other sites

1 hour ago, Lichay said:

The second bug on cssruleplugin later ill find all information from my history page.

I assume you're talking about this thread:

As was pointed out multiple times in that thread, it was NOT a bug in CSSRulePlugin. At first there were problems in your code and then you admitted it did work for you, and then it looks like you and Zach discovered Angular was switching things around under the hood to make the CSS rule undiscoverable by normal means which, again, has nothing to do with a bug in GSAP or CSSRulePlugin. 

 

If I misunderstood, please clarify. And if you think there's a bug, PLEASE provide a minimal demo and we'd be happy to take a look. We certainly want to fix any bugs in our code. 

  • Like 1
Link to comment
Share on other sites

1 hour ago, GreenSock said:

Let's focus on the minimal demo for now - we can't troubleshoot your live project with all your other code in it (which I already mentioned has logic flaws in the code from what I saw). 

 

Are you saying that this CodePen does NOT work for you? Do you see ANY bug in its behavior?: 

 

 

 

I've tested it a bunch of times and it never broke even once for me. I wonder if we're looking at different things or if I'm misunderstanding what you think the "bug" is. 

 

You could be right, but here's the data I have at this point:

  1. I can't get the minimal demo to break at all. I see no problems. I must be able to verify the "bug" before I can fix it. 
  2. You have logic flaws in your project code, as I pointed out previously.
  3. In every other case in the past when you've claimed there was a "bug" in GSAP, it ended up being problems in your implementation, not a bug in GSAP/ScrollTrigger.
  4. Nobody else has reported a similar bug, yet many thousands of people are using ScrollTrigger. I'd think that if there was a bug in what you're calling "basic" functionality of ScrollTrigger, many other people would be running into it as well and reporting problems. There are no such reports. 

Again, I'm not saying you're wrong for sure or that there aren't any bugs, but based on the data I have it seems far more likely that it's a flaw in your implementation somewhere.

 

I can't say for sure without seeing it in context with your HTML/CSS too. I can say, however, that your logic would definitely cause things to line up in different spots based on the orientation of the screen because you're using a hard-coded "totalScroll" value but your start/end values would shift around based on the viewport height. 

 

If you still think there's a bug and you want help, you'll need to provide a minimal demo and specific instructions about how to consistently reproduce the problem. Please confirm that the demo I provided works for you. If not, please record a video and show us how/where you think it's breaking. 

I update my example 

you can see this on same link 

if you look precise you can see he isn't start on same lines, and on big website it change with big diff.

 

yes I talk about that that tread ill check  last comment and hope it will work 

as I remember it was bug on angular and work on bad condition (not possible on big website) Ill check last comment and update you

edit: update it really work 

encapsulation:ViewEncapsulation.None

must it for use CSSRulePlugin in angular

I am recommend to update it to tip page

 

Link to comment
Share on other sites

18 minutes ago, Lichay said:

if you look precise you can see he isn't start on same lines, and on big website it change with big diff.

I don't see any unexpected behavior. Sorry, I have no idea what you're talking about. I tried on my iPhone and switched orientations multiple times. Works as I'd expect. Can you please be more clear? Maybe a video explanation? 

 

Does anyone else see a problem? Perhaps I'm missing something obvious.

  • Like 1
Link to comment
Share on other sites

Just now, GreenSock said:

I don't see any unexpected behavior. Sorry, I have no idea what you're talking about. I tried on my iPhone and switched orientations multiple times. Works as I'd expect. Can you please be more clear? Maybe a video explanation? 

 

Does anyone else see a problem? Perhaps I'm missing something obvious.

I update my last comment ill send a video for it

Link to comment
Share on other sites

18 minutes ago, GreenSock said:

I don't see any unexpected behavior. Sorry, I have no idea what you're talking about. I tried on my iPhone and switched orientations multiple times. Works as I'd expect. Can you please be more clear? Maybe a video explanation? 

 

Does anyone else see a problem? Perhaps I'm missing something obvious.

 

You can see it on that link 

 

 

moreover I open in on on my iPhone 125 pro max with bigger screen and it was smaller gap but still have gap

you can watch it in your iPhone and see it slowlly the gap exist and with difference screen it change

like you see in my website

Link to comment
Share on other sites

Oh, I think I see the problem in your code: you're creating things in the wrong order and you're not defining a refreshPriority to compensate for that. 

 

Despite your claim that this is all "basic" stuff, it's actually quite complex because things must happen in a very particular order logically, especially when you're doing pinning. If you've got other ScrollTriggers inside a container that also has a ScrollTrigger that's pinning it, that pinning would push down the scroll positions of those nested elements, etc. And when the page resizes, it must revert things in reverse order, rewind the tweens, restore the page to the "original" state so that all your native CSS rules get applied appropriately before all the measurements are taken by ScrollTrigger, and then it must apply thing in forward order. 

 

In your case, you're creating your ".container" in FIRST even though that's the thing that gets triggered last (largest scroll position). As we state in the docs, you should create ScrollTriggers in the order they'd get triggered but if you can't do that, you should define a refreshPriority to ensure things get refreshed in the proper order. 

 

So your options are to either just move your ".container" pinning ScrollTrigger code down so it's last, or you could define its refreshPriority to -1 for example. 

 

Does that clear things up for you? 

  • Like 1
Link to comment
Share on other sites

18 hours ago, GreenSock said:

Oh, I think I see the problem in your code: you're creating things in the wrong order and you're not defining a refreshPriority to compensate for that. 

 

Despite your claim that this is all "basic" stuff, it's actually quite complex because things must happen in a very particular order logically, especially when you're doing pinning. If you've got other ScrollTriggers inside a container that also has a ScrollTrigger that's pinning it, that pinning would push down the scroll positions of those nested elements, etc. And when the page resizes, it must revert things in reverse order, rewind the tweens, restore the page to the "original" state so that all your native CSS rules get applied appropriately before all the measurements are taken by ScrollTrigger, and then it must apply thing in forward order. 

 

In your case, you're creating your ".container" in FIRST even though that's the thing that gets triggered last (largest scroll position). As we state in the docs, you should create ScrollTriggers in the order they'd get triggered but if you can't do that, you should define a refreshPriority to ensure things get refreshed in the proper order. 

 

So your options are to either just move your ".container" pinning ScrollTrigger code down so it's last, or you could define its refreshPriority to -1 for example. 

 

Does that clear things up for you? 

 

I work hard for it and I get a result bug+low performance you can see it on that video from my iPhone

 

I use  refreshPriority and change some code to match so when i change screen it work after 10-70 sec it refresh or something 

from my computer it work well but from smart phone it isn't you can see the link to try yourself

https://temp-89055.web.app

 

and code her 

html

https://github.com/lichaytiram/AngularRepo/blob/master/Projects/WayLife/src/app/app.component.html

gsap

https://github.com/lichaytiram/AngularRepo/blob/master/Projects/WayLife/src/app/app.component.ts

under parallaxContainer only that function do all problem with gsap

I don't know what to tell you anymore...  it feel gsap broken

Link to comment
Share on other sites

We really can't troubleshoot a whole live site for you like that. If you'd like help, please provide a minimal demo

 

I glanced at your code and it looks like you're still doing things incorrectly. You put refreshPriority: -1 on the wrong scrollTrigger (you were supposed to put it on the one that's doing the pinning because that happens later). 

 

I would strongly recommend creating your ScrollTriggers in the order they'll be triggered. Then you won't even need to define a refreshPriority. 

 

3 hours ago, Lichay said:

I don't know what to tell you anymore...  it feel gsap broken

Again, these issues are caused by problems in your code, not GSAP/ScrollTrigger bugs. 

 

It looks like you're using Angular and I've noticed that in some frameworks (Angular/React/Vue), they delay updates to the DOM until at least another requestAnimationFrame passes. It's probably fine, but just so you know, ScrollTrigger automatically listens for "resize" events and calls ScrollTrigger.refresh() accordingly which is what does all the plotting of scroll positions, etc. So if Angular is delaying the rendering of any DOM changes so long that it's AFTER the refresh(), that would of course cause issues. It'd be an easy fix for you, though - you can call ScrollTrigger.refresh() after you're confident that Angular has finished making any changes. I don't really think this is the root of any problems here, but I wanted to mention it just so you understand some of the underlying mechanics and could be on the lookout for Angular-related delays. 

 

Regarding performance, by FAR the biggest performance drain is almost always graphics rendering (totally unrelated to GSAP/ScrollTrigger). I noticed that you're applying some filters which are a HUGE performance problem in many cases. Again, that's a browser issue, not GSAP. I would strongly recommend avoiding filters whenever possible. You'll get much better performance if you just use a PNG that has the blur done in Photoshop or something, and you could crossfade a blurred and non-blurred version of the photo, for example. 

 

Like I said, if you still need help please make sure you provide a minimal demo and a very clear explanation of what's going wrong. Or if you'd like an expert to look through your code for your live site and find specific issues, you can hire a consultant. It's beyond the scope of the help we provide in these free forums. 

  • Like 2
Link to comment
Share on other sites

34 minutes ago, GreenSock said:

We really can't troubleshoot a whole live site for you like that. If you'd like help, please provide a minimal demo

 

I glanced at your code and it looks like you're still doing things incorrectly. You put refreshPriority: -1 on the wrong scrollTrigger (you were supposed to put it on the one that's doing the pinning because that happens later). 

 

I would strongly recommend creating your ScrollTriggers in the order they'll be triggered. Then you won't even need to define a refreshPriority. 

 

Again, these issues are caused by problems in your code, not GSAP/ScrollTrigger bugs. 

 

It looks like you're using Angular and I've noticed that in some frameworks (Angular/React/Vue), they delay updates to the DOM until at least another requestAnimationFrame passes. It's probably fine, but just so you know, ScrollTrigger automatically listens for "resize" events and calls ScrollTrigger.refresh() accordingly which is what does all the plotting of scroll positions, etc. So if Angular is delaying the rendering of any DOM changes so long that it's AFTER the refresh(), that would of course cause issues. It'd be an easy fix for you, though - you can call ScrollTrigger.refresh() after you're confident that Angular has finished making any changes. I don't really think this is the root of any problems here, but I wanted to mention it just so you understand some of the underlying mechanics and could be on the lookout for Angular-related delays. 

 

Regarding performance, by FAR the biggest performance drain is almost always graphics rendering (totally unrelated to GSAP/ScrollTrigger). I noticed that you're applying some filters which are a HUGE performance problem in many cases. Again, that's a browser issue, not GSAP. I would strongly recommend avoiding filters whenever possible. You'll get much better performance if you just use a PNG that has the blur done in Photoshop or something, and you could crossfade a blurred and non-blurred version of the photo, for example. 

 

Like I said, if you still need help please make sure you provide a minimal demo and a very clear explanation of what's going wrong. Or if you'd like an expert to look through your code for your live site and find specific issues, you can hire a consultant. It's beyond the scope of the help we provide in these free forums. 

I put it on pin one (refreshPriority: -1) and it doesn't work so i change it to the another with parallax-bg and on there it work nice but on my iPhone it isn't

 

What do you mean create my own ScrollTrigger?

 

and nah Angular render very fast everything work well without Gsap or parallax-bg in my project i try everything in my project and nothing work if i turn off all that container (parallaxContainer) my project work perfectly

 

Link to comment
Share on other sites

40 minutes ago, Lichay said:

What do you mean create my own ScrollTrigger?

I'm not sure what you're referring to - I never said "create your own ScrollTrigger" (except earlier in the conversation I said that if you think this functionality is so "basic", perhaps you should create your own tool like ScrollTrigger). Maybe you're talking about where I advised that you write your code so that the ScrollTriggers are created in the order they'll be triggered in the viewport (top to bottom). Do you need more clarification than that? 

 

46 minutes ago, Lichay said:

and nah Angular render very fast everything work well without Gsap or parallax-bg in my project i try everything in my project and nothing work if i turn off all that container (parallaxContainer) my project work perfectly

Of course - if you only apply a filter once and there's no animating of the filter values, the load on the browser only happens on that initial render so it'd seem fast. But you're animating a filter value which forces the browser to re-calculate and re-render all those pixels 60 times per second. Trust me - you're paying a large performance penalty by using filters. And again, that's totally unrelated to GSAP. 

 

If you need any more help, feel free to create a minimal demo (like in CodePen) and provide a clear explanation of what's going wrong and we'd be glad to take a peek. 

  • Like 1
Link to comment
Share on other sites

55 minutes ago, GreenSock said:

I'm not sure what you're referring to - I never said "create your own ScrollTrigger" (except earlier in the conversation I said that if you think this functionality is so "basic", perhaps you should create your own tool like ScrollTrigger). Maybe you're talking about where I advised that you write your code so that the ScrollTriggers are created in the order they'll be triggered in the viewport (top to bottom). Do you need more clarification than that? 

 

Of course - if you only apply a filter once and there's no animating of the filter values, the load on the browser only happens on that initial render so it'd seem fast. But you're animating a filter value which forces the browser to re-calculate and re-render all those pixels 60 times per second. Trust me - you're paying a large performance penalty by using filters. And again, that's totally unrelated to GSAP. 

 

If you need any more help, feel free to create a minimal demo (like in CodePen) and provide a clear explanation of what's going wrong and we'd be glad to take a peek. 

you can see it 

https://www.apple.com/iphone-12-pro

full parallax page huge performance and still work well 

Link to comment
Share on other sites

 

18 minutes ago, Lichay said:

you can see it 

https://www.apple.com/iphone-12-pro

full parallax page huge performance and still work well 

 

Did you think I was saying that you can't do parallax in a performant way? My comments were merely about the blur filters you were animating because you said you were seeing performance problems on your page. 

 

I don't have a lot of time, so I'm going to stop replying in this thread unless/until you provide a minimal demo and a specific GSAP-related question. 

 

I wish you all the best with your project. 

  • Like 1
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...