Mike790

Thank you both for helping me with this! My first thought was padding on the p tags, but obviously I didn't apply any styles to them. Works perfectly on my side, too! Again, thanks for taking the time to help Paul, and thanks for your additional guidance Jack. I learn something new every time I visit the forum and often do just to see what's cooking. GSAP is and has always been the best. Been enjoying it since the days of Flash!

Thanks! Turns out it's not the width/height of the body that's causing the issue. It happens when I add multiple paragraphs to fill the scrollable area, regardless if the height style is removed from scrollable-area class. Thank you again! https://codepen.io/agaisab/pen/oNwEGYe?editors=0110

Sorry to bother, but I ran into the same issue of the header remaining hidden if scrolling from the top doesn't exceed the self.scroll() distance when I applied 100% width and height to the body. Any quick thoughts? Thank you again; I really appreciate it!!

Amazing! Thank you for your help and quick replies to my questions! You're the man! I added a finishing touch and now I think it's ready for production. https://codepen.io/agaisab/pen/abwqWjy

Interesting approach! One conflict I notice the difference between start: "top top" and the self.scroll(). This causes the header to remain hidden if scrolling from the top doesn't exceed the self.scroll() distance. I'm wondering if a timeline tween would be more suitable for this type of animation.

Hi Mikel! Thanks for your suggestion, but it doesn't appear to affect the reverse animation.

Hi All! I have a quick question about your fixed header in CodePen that uses ScrollTrigger to show/hide it. I've tried/failed numerous times to prevent the header from immediately animating on reverse (scroll up), but instead require a scroll threshold to first be met before the animation begins. In other words, I'd like the animation to begin only after a specific number of pixels, such as 30px. Is this possible using the onUpdate: (self) function or should a different approach be used to accomplish this? Thanks in advance for any suggestions and as always, thanks for such an awesome feature! Michael

I just wanted to thank @ZachSaucier @mikel you both for your help on my script from last week! I'm sorry if I was asking for too much with my replies. It wasn't my intention, but it definitely read that way. Sorry. I realize I was conflating two separate scripts and not just focusing on my original goal; a reusable function that acts as a sliding panel based on element parameters. Thanks for always taking the time to help us, Zach! Hands down great customer service and always eager to help! Thanks for your last suggestion and the gentle kick in the butt to get me on track. Mikel, although I only drink Churchill martinis, when it comes to programming, I'm unfortunately about as clever as a appletini. Thanks for putting together your Codepens. I learned a lot from them and your approach is incredible! You've been a huge help to a lot of us on the Greensock forum! Below is my updated approach that seems to get the job done, even though it's still clunkily written. I'd greatly appreciate any opinions you might have if you have a sec, and if not, thanks again for your previous advice! https://codepen.io/agaisab/pen/e9234e14ebc31a2fd3f58f2253d80836

Thanks for the suggestions Mikel! These examples are useful, but they don't seem to provide a solution to what I'm hoping to accomplish. Thanks again! Mike

Thanks Zach! This doesn't appear to work as anticipated. The panel will fire when a button is clicked even though it's already open. Or, the slide-in panel gets stuck when it's open and another button is clicked. I was trying to write it where if the panel is open and a button is clicked, it remains open but the content of the new section appears (see CodePen below). I appreciate your help as well as the additional resources you mentioned. In your article on the css-tricks.com website you mention using a function or loop to keep the code DRY. This is ultimately what I'm trying to accomplish with my function. Instead of a script for each slide-in menu/panel, I'd like to create one function that behaves based on passed parameters, such as the name of the element (based on element id), overlay or push (based on element class), from which direction it slides in (another class), etc. Hopefully my explanation makes sense and thank you again for any advice you might be able to provide! Mike https://codepen.io/agaisab/pen/PozebRj

I'm trying to create a reusable function that I can pass in parameters. The function in the first CodePen works fine, even when aggressively toggling between actions. However, I'd prefer to create one function that will work for all slide-in panels. If you aggressively toggle between actions in the second CodePen, it will eventually break, removing the overlay but leaving the slide-in panel on screen. Thanks in advance for any guidance! https://codepen.io/agaisab/pen/pobVoVv https://codepen.io/agaisab/pen/BazxarM

Really awesome, Zach! I can't thank you enough for your update to the script and advice on how to further improve it! I didn't realize I still had a setTimeout function in use. I eventually took a different approach to just hide the overlay instead of building it on every trigger. I'm also taking your advice and using the set() function wherever it's applicable. Thank you again for your quick and detailed support! Mike

Hey everyone! I reached out a few months back for help on a FLIP animation and your help was awesome! Also, I recently came across a few posts in the forum that use a FLIP plugin that's in the works which looks very interesting. I'm tying to apply the FLIP technique to multiple items on a page, but when the element returns to its original location/container, the other items on the page shift. I would greatly appreciate any help on how to incorporate the FLIP plugin into my script to fix the formatting issue I'm experiencing. Thanks in advance and keep up the great work!

Thanks for your quick reply and mentioning the set() function! I created a quick version of what I'm trying to accomplish on Codepen. https://codepen.io/agaisab/pen/mdEWdNa

Hi everyone! I want to make sure that I'm taking the right approach to animating a forEach function. Between the two scripts below, which would be the better approach? They both appear to be equal in performance, so I'm not sure if it's just a matter of preference at this point or if one approach outweighs the other. Thanks in advance for any guidance on my question! function sectionFadeAnimations(btn, selectedSection) { gsap.to(onPageSections, { opacity: 0, duration: 0.2, display: 'none', onComplete: () => { document.querySelectorAll(selectedSection).forEach(section => { section.style.display = 'block'; gsap.to(section, { opacity: 1, duration: 0.2 }); }); } }); } document.querySelectorAll('.on-page-menu button').forEach(btn => { btn.addEventListener('click', () => { let selectedSection = btn.classList[0]; sectionFadeAnimations(btn, selectedSection); }); }); --------------------------------------------------------------------------------------------------- gsap.utils.toArray('.on-page-menu button').forEach(btn => { btn.addEventListener('click', () => { let selectedSection = btn.classList[0]; gsap.to(onPageSections, { opacity: 0, duration: 0.2, display: 'none', onComplete: () => { document.querySelectorAll(selectedSection).forEach(section => { section.style.display = 'block'; gsap.to(section, { opacity: 1, duration: 0.2 }); }); } }); }); });

Better? IT'S AMAZING! I want to thank you both, Jack & Zach, for your guidance! What an incredible product and incredible support. I'll be enrolling into the Greensock Club in the very near future and I look forward to using GSAP for all animated-related solutions! Thanks again! Mike

This looks amazing Jack! Thank you! An odd effect occurs when adding content to the box. Because scale is being used, content in the box is scaled up. However, this increase only becomes visible when you click the button to return the box to #container1. My ultimate goal is to increase the size of the box element while keeping its content the same size, perhaps using viewport units. I'm going to continue to mess with this in the meantime. Please let me know any suggestions you might have and thank you again for your help! https://codepen.io/agaisab/pen/pogmoGN

Thank you very much Zach! I’ve been trying to understand how to use the FLIP helper function, but I can’t determine how to animate changes to an elements height and width. When increasing the dimensions of the second container in the stylesheet, no transition occurs and it instead jumps to the new height and width. https://codepen.io/agaisab/pen/LYGvORQ Any advice here would be greatly appreciated! Mike

Hi everyone! I'm trying to replicate the transition used in the Apple app store as seen in the two links below. Phone - https://imgur.com/gallery/e3lt0Ke Tablet or larger - https://imgur.com/gallery/tXURWXe I have created card elements that contain a minimal amount of information, and upon clicking a card, it expands to provide additional details. Compared to a modal overlay, this approach allows the user to know which card they clicked when it returns to its original state and reduces possible confusion as to where they left off, especially when there are numerous cards. The CSS formatting that I intend to use will include the following: - Flex / flex-grow for screens less than 1024px. This places all cards associated with a category in a single row, allowing the user to horizontally scroll to view additional cards. - CSS Grid for screens greater than 1024px. This limits the number of cards in a row to the column number specified based on screen size and allows the user to vertically scroll to view additional cards. I've attempted to recreate this animation using Javascript and GSAP, but I'm just starting with GSAP and I've been unsuccessful. My CodePen with my latest iteration is at the bottom of this message. I also recently discovered the animation directly below from @OSUBlake that uses the CloneNode method, but it's from 2016 and I'm not sure either approach is the correct route. https://codepen.io/osublake/pen/WwgQEV Thanks in advance for any help on this animation!