grow.
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by grow.
-
-
31 minutes ago, Sahil said:
Use absolute: true, in Flip.fit, it will fix the jump.
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 theFlip.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
.hxlclass but has been scaled down to fit the original title.Any suggestions on how I can prevent the offset and transition it smoothly?
Cheers!
See the Pen WNWXxxj by benjaminelwoods (@benjaminelwoods) on CodePen
-
23 hours ago, Rodrigo said:
Hi,
The only reason you could be having performance issues is because your site has other elements that are causing them. Animating solid white text using translations with GSAP shouldn't cause any problems. Have you tried with integers instead of percentages. It seems a bit far fetched IMO but perhaps the whole parsing could be the problem. I don't see any performance issue in the codepen you provide, but yet again, I'm confident that this is not how the real life project looks like.
To create a staggered animation you could use the onEnter and onEnterBack callbacks and set up a timer to apply the classes to each element and the onLeave and onLeaveBack callbacks to remove the class from them without a timer.
const addClass = (targets) => { targets.forEach((target, index) => { setTimeout(() => { target.classList.add("yourClass"); }, index * 50); // <- set amount of time for stagger }); }; const removeClass = (targets) => { targets.forEach((target, index) => { target.classList.remove("yourClass"); }); };
Also you can use GSAP toArray utility in order to loop just through the parents and then select the child elements:
gsap.utils.toArray(".animate").forEach(el => { const children = gsap.utils.toArray(el.children); ScrollTrigger.create({ trigger: el, start: "center bottom-=5%", markers: true, toggleClass: 'forwards', }) });
Finally have you pushed a version with the CSS animations and got better performance? That would be the first step in order to narrow down things and try a different approach and do all the work of creating staggered animations with CSS. As you can see it can be a bit of extra work, but is better to be completely sure about it first IMHO.
Happy Tweening!
Thanks Rodrigo! Using those functions you supplied seem to have done the trick!
Really appreciate your help
- Ben
-
1
-
-
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
See the Pen KKRRbqP by benjaminelwoods (@benjaminelwoods) on CodePen
-
18 hours ago, GreenSock said:
Sorry, we really can't troubleshoot a live site like that. There are way too many factors involved. I don't see the problem you're describing and I don't even see any smoothing being applied at all.
My suggestion would be to isolate the issue in a CodePen. Start as simple as possible and then build it up to get closer and closer to your live site until it breaks and then you'll have a much better idea of what's causing the problem. You're welcome to post in the "Jobs & Freelance" forum or contact us for paid consulting services.
Good luck, Ben! 👍
That's all good - thanks for your help!
-
18 hours ago, GreenSock said:
No no, the correct spelling is with a "z" NOT an "s". So "normalizeScroll". If you change it to normaliseScroll (incorrect), that's the same thing as just not enabling it because that property doesn't exist
Your HTML structure was incorrect, you didn't have a wrapper element, and you should set allowNestedScroll: true:
Is that what you were looking for?
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
See the Pen jOxBaxQ by benjaminelwoods (@benjaminelwoods) on CodePen
-
On 8/19/2022 at 5:22 PM, GreenSock said:
Why not just combine your artwork into one <path>? That'd be a lot easier/cleaner.
You can loop through the elements in order and build out a sequenced timeline, but your last path has the line starting at the bottom and going up, so you'd have to invert that in your editor -OR- customize that tween to reverse direction:
Thank you so much! Works a charm
-
1
-
-
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
See the Pen abYPeON by benjaminelwoods (@benjaminelwoods) on CodePen
-
9 hours ago, Cassie said:
Hey there!
ScrollTrigger.matchmedia() is likely what you're after here.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
Why don't you take a look at the docs and give it a shot - if you need help pop back and we'll give you a nudge in the right direction. ☺️Perfect! Thank you so much
-
1
-
-
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
See the Pen zYWvdvj by benjaminelwoods (@benjaminelwoods) on CodePen
-
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
See the Pen zYWvdvj by benjaminelwoods (@benjaminelwoods) on CodePen
Element getting random offset on Flip
in GSAP
Posted
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.
See the Pen bGJYzYb by benjaminelwoods (@benjaminelwoods) on CodePen
Do you have any suggestions?