Responsive Design

[creomedia]

Hello,

 

i just started creating a new page and im having trouble making it responsive.

I work on a mac with a resolution of 2560 x 1440px and on that resolution the page mostly works fine.

when i scale the page the scrolltrigger start- and endpoint moves and the content which should be visible is shifted either down or up and not visible.

What exactly can i do to prevent this problem?

 

PS: I tried my very best to make a codepen demo but since im making the website on a wordpress installation there are multiple containers that get created by the theme itself and i couldnt replicate the page 1:1. Hopefully the demo still helps since i pasted in all the code i wrote for the page.

 

Link to current state of the page: https://www.ps-caring.de/wir-seite-neu-2/

See the Pen mdYMbwM by alexander-pohl (@alexander-pohl) on CodePen

[mvaneijgen]

GSAP is highly optimised and will calculate all the values on page load and then uses those values it got when it is ready to animate. If you just give it a value it is going to hold on to that value no matter what. There is however a function build in when you use function based values https://gsap.com/docs/v3/GSAP/Tween/#function-based-values that when ScrollTrigger.refesh() is called (which gets called when you for instance resize the browser) it will calculate the new values. 

 

In your case I would thus rewrite all values you want to get recalculated when the browser resizes.  eg x: "70vw" becomes x: () => window.innerWdith * 0.7 

 

Your demo is completely broken, there are several plugin that get used (or at least registered), but don't get loaded you also load a really old version of ScrollTrigger. We have a pen which loads all the latest version of all the plugins, which I find much easier to just fork instead of starting from scratch. 

 

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

 

I also working in Wordpress, but all my animation start out on Codepen, so I can just focus on creating the animations I want and I don't have to worry about my platform throwing errors and can just focus on the animation I want. Then when it comes time to implement it in the site this will be a breeze, because I have a known working version and I just have to replace some HTML with PHP. It also allows you to experiment a lot more, because you can easily fork your work and when something is not working as expected you have an easy version you can share on places like this. 

 

Hope it helps and happy tweening! 

 

[creomedia]

So i tried to fix the demo and removed my wrapper 1 and 3 since the real problem is with my wrapper 2. On my Page everything looks good but in codepen theres positioning problems (Margin-left and top values seem to act differntly). I tried to fix the values for codepen but i realized this will take a really long time to figure out the values and after fixing it in codepen it wont work like this on my actual website.

Anyway, my problem is that if i change the browser-size content is not visible like it is with the size i was working with. Since im struggeling to explain it properly i added a video which describes my problem.

If there is no real solution to this i guess i'll have to split up the content and put each inside a container with height: 100vh so everything will be visible for every device but i'd really like to have it the way i already started building it.

 

https://www.ps-caring.de/wir-seite-neu/

[Rodrigo]

Hi,

 

Is super difficult for us to debug a live site, there are far too many variables that we can't control, there is no way for us to tweak the code in order to do some checks and normally the code is far too much for us to handle it.

 

On top of that your site doesn't look like the video on my 1920x1080 screen, so you should check that further:

https://i.imgur.com/N3Hiz4T.mp4

 

There are a few things that caught my attention from your codepen. You  have these:

ScrollTrigger.create({
  trigger: "#wrapper2",
  start: "1%",
  end: "33%",
  pin: "#info-container",
});

ScrollTrigger.create({
  trigger: "#wrapper2",
  start: "34%",
  end: "66%",
  pin: "#info-container",
});

ScrollTrigger.create({
  trigger: "#wrapper2",
  start: "68.5%",
  end: "bottom bottom",
  pin: "#info-container"
});

Then you have this:

const tlGrid = gsap.timeline({
  scrollTrigger: {
    trigger: "#wrapper2",
    start: "top",
    end: "33%",
    scrub: 1
  }
});

const tlGrid2 = gsap.timeline({
  scrollTrigger: {
    trigger: "#wrapper2",
    start: "37%",
    end: "64%",
    scrub: 1
  }
});

const tlGrid3 = gsap.timeline({
  scrollTrigger: {
    trigger: "#wrapper2",
    start: "69%",
    end: "bottom bottom",
    scrub: 1
  }
});

Why are you creating different ScrollTrigger instances with the same trigger but with some offset in the start point? You can add some blank space in a timeline with the position parameter. Also you are pinning an element that is a child of the trigger, any particular reason for that? Why not pin the trigger, seems and sounds simpler and logical IMHO and could be the cause of the issues you're experimenting.

 

Hopefully this helps.

Happy Tweening!