hybrid09 Posted November 17, 2020 Share Posted November 17, 2020 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 More sharing options...
Solution ZachSaucier Posted November 17, 2020 Solution Share Posted November 17, 2020 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. 2 Link to comment Share on other sites More sharing options...
hybrid09 Posted November 17, 2020 Author Share Posted November 17, 2020 @ZachSaucier Thank you for welcoming me and replying so quickly! That is what I needed, spent the whole day trying to figure it out. Your help is much appreciated. Thank you for the side notes too, I made a demo as fast as I could and used names that came into my head first. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now