Scrolling Framework problems on different resolutions

[hannah_hey]

Hey,

Im new here and i have two (probably very simple) questions. Would be nice if someone could help with a not to complicated solution.

What we are trying to do:

We want a scrolling framework where the background doesn't move and as a foreground theres a curtain opening with scroll trigger. In between the fore- and background there are three people coming in from the side, one by one also with scroll trigger.

 

Our first problem:

We have a repository on Github and work on three different screen sizes. On my Laptop everything looks fine and works. But if the others open it the position of the curtains change. The animation is still the same but starts on a different position.

 

Our second problem:

When I on my Laptop add one of the persons and/or change the size/position/etc. the curtains move to the left or right. Again the animation still works but the position is different. We tried to define the position with px and percent but it didn't work.

 

PS: I hope it worked and you can see the files if not please tell me how i can add them correctly. Thank you!

See the Pen XWxRWgM by hannaaaahp (@hannaaaahp) on CodePen

[Rodrigo]

Hi @hannah_hey and welcome to the GreenSock forums!

 

There are a few issues in your example, starting with the version of GSAP and ScrollTrigger you're using (3.8, now we're currently on 3.11.5), some names in your classes and code and finally your CSS as well.

 

In this cases is far better to just create the animation and add ScrollTrigger to the code after your animation works the way you expect. Keep in mind that ScrollTrigger just updates the progress of an animation based on the scroll position, nothing more. You can learn more about it in this video:

I created a fork of your codepen with some changes in it:

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

 

Hopefully that's enough to get you started.

Happy Tweening!

[hannah_hey]

27 minutes ago, Rodrigo said:

Hi @hannah_hey and welcome to the GreenSock forums!

 

There are a few issues in your example, starting with the version of GSAP and ScrollTrigger you're using (3.8, now we're currently on 3.11.5), some names in your classes and code and finally your CSS as well.

 

In this cases is far better to just create the animation and add ScrollTrigger to the code after your animation works the way you expect. Keep in mind that ScrollTrigger just updates the progress of an animation based on the scroll position, nothing more. You can learn more about it in this video:

I created a fork of your codepen with some changes in it:

 

 

 

Hopefully that's enough to get you started.

Happy Tweening!

Thank you Rodrigo!
this is exactly what I imagined. In the time i also found a solution for the issue with the wrong positions with different screensizes. I now used the units vh vw for all my sizes and positions, wich worked pretty great.
 

I also watched the video already but I was having some troubles with understanding everything as I don't understand perfect English (but it still helped a lot getting to understand how gsap animations work). That's maybe also the reason why you didn't get the naming of my classes (they are all german).

So for me there are only two questions left. How did I embed the wrong gsap and scrolltrigger version? is it that in your code you wrote gsap.timeline instead of like me gsap.to?
And do I need the "pin: true,"? Because i don't see a reason for it as it worked perfectly fine without...

thanks again for the fast reply!

[Rodrigo]

Hi,

 

3 hours ago, hannah_hey said:

How did I embed the wrong gsap and scrolltrigger version?

It was right here in the HTML section of your codepen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

In codepen you can go to the gear in the JS section and you'll see a popup. In it there is a search input where you can type GSAP and select the first result you get (normally the first but I doubt it'll be anything else at the top) and then focus the input again type scrolltrigger and you have to select GSAP-ScrollTrigger:

 

3 hours ago, hannah_hey said:

And do I need the "pin: true,"? Because i don't see a reason for it as it worked perfectly fine without...

Nope, just a personal preference, nothing more. You can remove it if you want.

 

Happy Tweening!