Multiple Resolution issue

[B. Ihab]

Hi,

I hope you're doing great and you have a nice day.

I'm facing a problem and I need some help to know the exact things I should search for:

1. Every time I resize the page on my website - using GSAP Scrolltrigger on it - I need to refresh the page to show the correct animation.

2. I can't get my animation correct for all resolutions, even when using .matchMedia, I know that I'm using it wrong.

3. Should I use  specific number or % ...  to specify the position of the scroll? example:  end: "+=720", start:'center-=270 center', I can't get it correct for all resolutions with fix number.

 

In term of resolution, I wanna achieve something like that : https://www.samsung.com/n_africa/smartphones/galaxy-note20/ that work perfectly in all devices and all resolutions

 

Here is an example of my gsap code, I can't write the whole page in CodePen it's quite long.

 

 

See the Pen mdmXzpR by B-Ihab (@B-Ihab) on CodePen

[GreenSock]

We'd love to help with any GSAP-specific questions, but it's virtually impossible for us to troubleshoot effectively by just looking at an excerpt of the JS code. If you want help, please provide a minimal demo in CodePen. DO NOT put your whole project in there - it's always a best practice for your own troubleshooting to get in the habit of reducing things down to the absolute basics first. Then build it up until it breaks and you'll see much more clearly what the problem is. So, for example, just a few <div> elements that are laid out somewhat like in your project. 

 

I can tell you for sure that you've got some unnecessary timelines in there. You only need a timeline if you're actually animating something. I noticed you've got tlFixedPin and tlFixed that are completely empty - just use ScrollTrigger.create() in that case. 

 

Another tip: put a console.log() in each of your matchMedia breakpoints. I bet you'll see that you've got MULTIPLE breakpoints that are overlapping but you're assuming that only one at a time is active. In most cases, you probably want to write your breakpoints so that only ONE is active at any given time. 

 

If you still need some help, please post that minimal demo and we'd be happy to take a peek. 

[B. Ihab]

Thanks for your reply, and thanks a lot for the advice you give to me, I edited my post and I added a demo from CodePen, as you can notice even with a small change in the resolution - adding the same animation from my code to codepen - the animation broke.

Don't know if I can post external Url's but here is my staging link

The animation in codePen is the same as in my Website

Link: http://deb.debtechnology.com/solution-gps

User: user_guest

Password: Welcome!

 

You can just change the resolution to something like 900 * 7xx to notice that:

1. I need to refresh page when manually resizing it, I think it can be done automatically, I just don't know how.

2. The start/end point is wrong in most resolutions, how can I specify a dynamic start/end point.

 

If you notice any things that I should improve/learn to optimize my GSAP code don't feel a shame to notice it to me, it will help me a lot.

[GreenSock]

I noticed a few things:

1. In general, it's a bad idea to animate the same element you're pinning in another ScrollTrigger. It throws off the start/end values. It's much cleaner to just wrap it in a different element that you pin instead. 
2. You can EITHER have scrub OR toggleActions (not both). Logically they are mutually exclusive.  
3. You still didn't follow my advice about using regular ScrollTrigger.create() instead of empty timelines. And there's no point in having "scrub" nor "toggleActions" on those since there's no associated animation anyway.
4. You're pinning the same thing multiple times and you've set up your start/end values to overlap so it doesn't make any logical sense (conflicting pins). I don't understand what you're trying to do.
5. You ended one of your lines with a comma instead of a semicolon. 
6. Since you're not using pinSpacing and your pinned element had display: inline-block, you probably need to set line-height of the container to 1 to avoid a 6px shift when it becomes unpinned. 

I just focused on the desktop breakpoint in this fork: 

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

 

Hopefully that gets you on your way. I still don't really understand what you were trying to do with those extra ScrollTriggers, so I didn't know what to do there. I commented them out. 

[B. Ihab]

Hi Jack,

Thanks for your quick reply, for sure it'll be really helpful for me, I'll follow your advice step by step.

For the third point, It was midnight in my country, I just copied the code I has in my editor without any update ^^, I understand for "scrub" and "toggleActions" now that you said that, it's clear that they're exclusive.

For the fourth point, the effect I want to achieve is having the pin moving down until he reaches the top of the car then pinning the whole section ( Car and text ) + the pin which isn't a part of the second section, don't know if my approach is the best way to get the effect done.

 

What about the approach I should use in end/start? It will be beneficial to use px or should I replace that to get the correct effect in all the breakpoint?

 

[GreenSock]

If I understand your correctly about the effect you want, I would probably put the whole animation into a single timeline where ALL the assets are in a single container (pin, truck, text) that gets pinned and then I'd animate the truck's y from a large number to 0 so that it looks like it's coming in from the bottom but it isn't the actual scroll that's doing it directly - it's merely a scrubbed animation. That way you don't have to try to juggle multiple pinning actions and handoffs, etc. 

 

Good luck!