ncti Posted January 21, 2021 Share Posted January 21, 2021 Hi, I have an animation on the entire page for each panel (I have several sections with this class) and I would like to additionally pin a photo inside the phone in a specific section (instagram) and move it along with the scroll. Unfortunately, every time my photo reaches the panel instagram section and I start to animate the photo inside the phone, it moves all at once. It is possible to set position absolute on pinned element? I have problem with overflow hidden, when image has position fixed. See the Pen WNGWXrQ by memek42 (@memek42) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 21, 2021 Share Posted January 21, 2021 Hey ncti. First off, I noticed that you're making one of the most common GSAP mistakes and are using the old syntax. We highly recommend using the newer syntax - upgrading is easy! As for your question, I highly recommend that you get each piece working individually that you need and then work to get them working together. Right now if I comment out the first section looping through your panels, the second section still doesn't work well. I'd try to get that working the way you need it to work before combining it with other ScrollTrigger sections. Side notes: It's invalid HTML to have multiple sections with the same ID. scaleX: 0 and transformOrigin are not valid properties of ScrollTriggers. If you're just pinning something there's no need for a timeline, you just need a ScrollTrigger which you can create using ScrollTrigger.create(). Link to comment Share on other sites More sharing options...
ncti Posted January 22, 2021 Author Share Posted January 22, 2021 16 hours ago, ZachSaucier said: As for your question, I highly recommend that you get each piece working individually that you need and then work to get them working together. Right now if I comment out the first section looping through your panels, the second section still doesn't work well. I'd try to get that working the way you need it to work before combining it with other ScrollTrigger sections. Thanks for the answer. I have already corrected the bugs. However, I don't understand what you mean by saying that I should do everything separately. Could you explain it to me more clearly? Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 22, 2021 Share Posted January 22, 2021 7 hours ago, ncti said: I don't understand what you mean by saying that I should do everything separately. Could you explain it to me more clearly? I mean that in your end effect you want several different animations/effects to happen. I recommend creating each piece in a standalone way and then combine them so that you have a more firm understanding of what's going on Link to comment Share on other sites More sharing options...
ncti Posted January 25, 2021 Author Share Posted January 25, 2021 On 1/22/2021 at 3:32 PM, ZachSaucier said: I mean that in your end effect you want several different animations/effects to happen. I recommend creating each piece in a standalone way and then combine them so that you have a more firm understanding of what's going on Thanks, I made it. 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