growmybusiness

Hey Rodrigo, Thanks for your response. I've spent a while trying to translate this into a solution that works for my use case but it seems that while the opening works fine (within reason) - closing the modal/reversing seems to go wildly wrong. On my non-CodePen version the primary issue is that when the elements are appended back to the product card, they're obviously put behind the overlay immediately. On the CodePen I've attempted to recreate this as best as possible, however it's more or less highlighted a potentially further issue. https://codepen.io/benjaminelwoods/pen/bGJYzYb Do you have any suggestions?

Unfortunately I need it to affect surrounding elements both during transition and after.

Hi there! I've been working on a modal for some products. I found the best way was to use the Flip.fit() to overlay the 'duplicate' modal elements before transiting them back to their original state. This is why I've had to use the Flip.to() method (open to other suggestions though!). What appears to be happening now is that the title causes the image to offset on Flip. The original state is required to have the .hxl class but has been scaled down to fit the original title. Any suggestions on how I can prevent the offset and transition it smoothly? Cheers!

Thanks Rodrigo! Using those functions you supplied seem to have done the trick! Really appreciate your help - Ben

Hi there! So I'm creating a website with some basic text animations (to note, ScrollSmoother is also being used) and I've had some people comment that some pages are a bit laggy. I've assumed that's because most text has the animation in question applied, and their browser is struggling to keep up. So I've tried to implement an alternative that instead of using GSAP to animate these simple values, I'd do it with CSS and the toggleClass parameter for the ScrollTrigger. While I've got this mostly working, I am A. unsure how performant the alternative is going to be, and B. it doesn't work the way I'd particularly like it to. For example, the currently un-commented option in the CodePen uses the stagger parameter to add a slight delay to the children of the trigger. But the key factor is that the parent element is the trigger and all immediate children will animate sequentially. The CSS alternative, doesn't do this as each individual child is the trigger, in order to create the staggered effect. This however means that there are some points where the first element will animate in (e.g. the title, in my example) and there will be a blank space below (where the paragraph is, but hasn't animated in). Example below. This As opposed to I hope this makes sense. If anyone has any ideas or solutions as to what I could do to maintain the initial animation (GSAP) but without incurring any lag on different machines/devices that would be much appreciated! Thanks, Ben Elwood

That's all good - thanks for your help!

It does seem to have fixed it on the codepen - however on my actual site when you scroll on the sidebar overflow, it scrolls the content section as well. I know I'm supposed to recreate it in a codepen but I haven't been able to figure out what's causing this issue, so here's a link to the live site. Hopefully you can help! Thanks, Ben Elwood

Hi! So I've got a blog-style layout but with a fixed sidebar that needs to able to have a vertical overflow on it. However as you can see by the codepen, you're unable to scroll the overflow due to the ScrollSmoother. So Just wondering if anyone has any ideas about solving this? Thanks, Ben Elwood

Thank you so much! Works a charm

Hi there! So I'm fairly certain I'm attacking this from the wrong angle already. But I'm trying to get multiple SVGs to animate as one with ScrollTrigger. As you can see in the CodePen, they're all triggered fairly within the same space on the viewport. I'd like to make it so that essentially they all work as one. Any suggestions on how I can achieve this? Hope this makes sense! Thanks, Ben Elwood

Perfect! Thank you so much

Thank you! Works a charm. Is there any way you'd be able to show me how I'd make this work vertically for mobile? As in if I have to disabled/enable this functionality for resizing to Tablet/Mobile but keeping the ScrollSmoother and text stagger functionality, or should I make another forum post for this? Thanks again, Ben

Hi! So I'm trying to get the .stagger-text class (which moves each word in a sentence upwards on-load) to happen when each isolated item with the class .stagger-text is visible on the screen, I've tried using a forEach loop to apply the ScrollTrigger but that seems to entirely break it (so I clearly did it wrong!) I'm also trying to delay the speed at which the items scroll, which is clearly simple enough... if I were creating a vertically scrolling site. As you can see they scroll down vertically as opposed to horizontally. I feel like these issues are somewhat linked because the site is 'artificially' horizontally scrolling they are all inline and being triggered at the top of the page, which is technically the whole thing, if that makes sense? Hope someone can help! Thanks in advance, Ben Elwood

Ah! Of course, got lost in all of my attempts to fix other issues! Thank you so much.

Hi there! So I've setup a purely horizontal scroll site with ScrollTrigger, however now I've added in ScrollSmoother there is no ability to scroll! I did have an issue where it was scrolling diagonally, however I realised I had the wrapper and content selectors the wrong way around. Has anybody else had this issue? The attached codepen is a representation of the site, on the dev site I'm using it with Wordpress & the Divi theme, so if you're wondering why the odd selectors, that's why! Thanks in advance, Ben Elwood