Jump to content
Search Community

Div width changing when using flex.

hybrid09 test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello everyone, 

 

I am new to GSAP and have been playing around with it, I have been trying to make a slideshow kind of thing on scroll where I pin a sidebar and the other side has a changing paragraph/heading. I am using flex with two divs inside and pinning the left one. When my scroll trigger hits and pins the left div, the size of the right one changes. 

 

Help would be appreciated. 

See the Pen jOrREoL by mallabiplav (@mallabiplav) on CodePen

Link to comment
Share on other sites

  • Solution

Hey hybrid09 and welcome to the GreenSock forums.

 

This is because of your CSS and the fact that the position of your element changes when it pins. The easiest fix in your case is to probably create another container div around the left section. Doing that and cleaning up the code I got this demo:

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

 

Side notes:

  • It's invalid to start a class name with a number.
  • It's best to keep the same naming convention in classes. Starting some with lower case and some with uppercase is bad practice in most cases.
  • Like 2
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...