setTween Should be centered on pageload

[DD77]

I'm trying to build a project where I will be using different scenes and Tweens. Firstly I'd like to fix the centering on my image. the image onscroll should move to the right. For some reason is not centered even though all the css are correct.

 

what's the best way to set multiple scenes on the project?

See the Pen GyRxYj by davide77 (@davide77) on CodePen

[Dipscom]

Hello @DD77!

 

The centering of the image in your first section is all CSS related. It has nothing to do with GSAP. We usually say we have to focus on GSAP only related problems here due to sheer amount of demand versus resources available.

 

Having said that, I won't let you hang out to dry leaving you without some directions.

 

Firstly, a word of advice, simplify what you are trying to do to the simplest possible parameters, then, start adding complexity after you deal with the issues.

 

In this case, I would first make one pen centering your image responsively, Then, I'd make it so, there are several sections, only after I'd consider animating it. And all of that before trying to trigger those animations with user click/tap. Once I got all of that working correctly and responsively, I'd bring in the scrolling hijacking.

 

Just sayin'...

 

Now, your issue with the image is because you've added a '.full-screen' class to the main tag and then, reused it in the section tags.

 

Those two tags are doing different jobs. They should not share classes because then, you're mixing roles.

 

When looking at your '.full-screen' class there's a load of things going on there. Like, it being 500vw wide... That's clearly excessive. And if you remember your sections all have the same class, that means all your sections will be 5 times the width of the screen...

 

I have a feeling you're trying to patch things up which in turn, is creating more confusion.

 

If you're using flex, there's a magical way to center things perfectly, see bellow.

 

main {

 display: flex;

 width: 100%; /* or whatever amount you might need */

 height: 100%; /* or whatever amount you might need */

}

section { /* or whatever element is the child */

 margin: auto; /* here be magic! */

}

 

Have a read over this guide, it will give you several practical examples as well as explaining how the flexbox properties work: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Happy Twee.... Erm... CSSing?

 

ps: Oh mighty CODEGOD please do not strike me for talking of CSS in GSAP holyland...

[DD77]

@Dipscom thanks for this. I know how flexbox works but still like you say doesn't fix the issues. I need to set a width somehow. COuld yu please help?

[OSUblake]

14 hours ago, Dipscom said:

Happy Twee.... Erm... CSSing?

 

ps: Oh mighty CODEGOD please do not strike me for talking of CSS in GSAP holyland...

 

Nothing wrong with sharing some CSS tips. I'm sure we can all agree that...