Sveninyo Posted June 13, 2020 Share Posted June 13, 2020 Hi, I am wondering, why my transition animation is just played on my first section and not on the following. I added the same class (.parallax) to both my text boxes. Isn't the animation suppose to play on every (each) element that has the class "parallax" applied to it? See my CodePen. Thank for the help! See the Pen yLeJOzb by Sveninyo (@Sveninyo) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 13, 2020 Share Posted June 13, 2020 Hey Sveninyo. The issue here is that your tween affects all of your parallax sections so the later ones are already done by the time you reach them. To get the effect that you're wanting you should loop through each section, creating a tween and ScrollTrigger for each. See the Pen abdZZOM?editors=0010 by GreenSock (@GreenSock) on CodePen Side notes: window.innerWidth (or just innerWidth if you prefer) has very good browser support. You don't need to include the viewportWidth variable. You can use actual media queries in JS if you want to: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 4 Link to comment Share on other sites More sharing options...
Sveninyo Posted June 13, 2020 Author Share Posted June 13, 2020 Cool! Thank you. I learn a lot here 😀 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