jenda Posted October 14, 2021 Share Posted October 14, 2021 Hello, I'm quite new here and I would like to pin and show every year number as soon as the container with the year and text appears next to the main number which is already pinned. Both effects shall end at the scrolled bottom of each content. I've already used the method forEach bute it seems that I didn't use it propertly. Does anybody know how I can solve this issue? See the Pen RwZWKyX by jankout (@jankout) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 14, 2021 Share Posted October 14, 2021 Hi there Jenda, Welcome. ☺️ I'm not quite certain what you were trying to achieve with your first loop? Looks like you're looping through multiple containers but pinning the main one? I've removed that until you can tell me what your goal was! Here's a simplified loop pinning the numbers, is that what you were looking for? Positioning the first number would be down to styling things differently and pinning it for the duration - but again, I wasn't really sure what you were after. Hopefully this helps! See the Pen yLoYbpL by GreenSock (@GreenSock) on CodePen 6 Link to comment Share on other sites More sharing options...
jenda Posted October 17, 2021 Author Share Posted October 17, 2021 Hello Cassie, thank you very much for your helpful response. In general I would like to pinn the first year and just to pinn the others as soon they reach the same level of the main year. The pinned effect of the main year should end as soon as the container with the contents comes to its scrolled end. What if I would like to fade out each number after the pinned effect finishes? Should I use onLeave() or something else? Is it possible to use autoAlpha, rotate etc. there or isn’t possible and I need to define a timeline? Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 17, 2021 Solution Share Posted October 17, 2021 Hello @jenda 2 hours ago, jenda said: In general I would like to pinn the first year and just to pinn the others as soon they reach the same level of the main year. The pinned effect of the main year should end as soon as the container with the contents comes to its scrolled end. In that case you could just set up an extra ScrollTrigger for the pinning of the "19" with an endTrigger set alongside of the end to easily tell where it is supposed to stop pinning, and let the ScrollTriggers within the loop handle the rest. The pen below shows how you you handle the ScrollTriggers in the loop it 'timingwise', dependent on the height of each .content 2 hours ago, jenda said: What if I would like to fade out each number after the pinned effect finishes? Should I use onLeave() or something else? Is it possible to use autoAlpha, rotate etc. there or isn’t possible and I need to define a timeline? You can certainly do that in the onLeave callback as to be seen in the pen below - but don't forget do fade them back in onEnterBack. Happy scrolling! See the Pen c5c949193e94621afc717cbce169bc96 by akapowl (@akapowl) on CodePen 6 Link to comment Share on other sites More sharing options...
jenda Posted October 18, 2021 Author Share Posted October 18, 2021 Hello @akapowl, thank you very much for your quick and helpful response. I'm just curious how I can tell to the .main-number to finish the pinning effect at the end of .contents or at the begining of the follow HTML element in DOM - let's say something very common like .contents + *. At the moment you use as endTrigger section.two. Is it possible to use it I would like to (.contents + *)? I've already tried it but it didn't work. Link to comment Share on other sites More sharing options...
akapowl Posted October 18, 2021 Share Posted October 18, 2021 Looks like you could do that... See the Pen 828080bdab8763ab9ea4ef53c0aca3e4 by akapowl (@akapowl) on CodePen ...you might just want to refresh your knowledge about CSS selectors & combinators a bit. .contents > * would actually select all elements that are direct children of .contents. What your probably looking for is contents + * https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors See the Pen 852325f2af19a0b2d7c3c3d76782ff2d by akapowl (@akapowl) on CodePen But you could also just spare the endTrigger, leave it based on the trigger and adjust the end to when the bottom of that .contents section hits a certain spot up top. For more info please check the ScrollTrigger documentation. See the Pen a2319cc25943f31832f2acf451596140 by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
jenda Posted October 18, 2021 Author Share Posted October 18, 2021 @akapowl yes, you are right. I ment .contents +, of course Thank you. Link to comment Share on other sites More sharing options...
jenda Posted February 3, 2022 Author Share Posted February 3, 2022 Hello, unfortunatelly, we have a problem with playing videos that dynamically change their height althought they have a height value from the begining so that this GSAP animation change its start constantly. Is there a trick to avoid this behaviour? Link to comment Share on other sites More sharing options...
OSUblake Posted February 3, 2022 Share Posted February 3, 2022 No, you will probably need to call ScrollTrigger.refresh() when they change the height. 2 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