AINOM
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by AINOM
-
-
12 minutes ago, Cassie said:
https://cdpn.io/cassie-codes/debug/6a0f7e53c6cce68ef79cadab92d59681
- check in debug mode to make sure it's not a codepen / iframe issue
- maybe try a background image instead?
- you could try adding scrub: (number) instead of scrub true to ease the scrubbing
OMG!!! That's it! Scrub: (number) does it! Thanks so much!
-
5 minutes ago, elegantseagulls said:
It looks to me like this could be caused by
object-fit
not knowing what to do as the container is being transformed. If you add the animation to".parallax-1 img"
performance improves dramatically.Yes, that does seem to help things! I still have that "stepping" effect between tweens that I'd like to eliminate...any ideas there?
-
Just now, elegantseagulls said:
Try breaking this animation out and adding it to something like CodePen to better debug. If it seems fine on its own, it may be something else. Plus codepen is much easier for us to see what's going on than trying to pick at your live site.
Ha!...Just did that and posted, probably seconds before you posted! See above!
- 1
-
1 hour ago, GreenSock said:
Yeah, performance audits are a very deep and wide topic with all kinds of facets. Your issues aren't related to GSAP, I can almost guarantee. We don't have the resources to offer free performance audits on live sites, sorry. But if you need some paid consulting you could either post in the "Jobs & Freelance" forum or contact us.
You've got a bunch of CSS transitions and animations applied which may very well may be the root of the problem (at least one of them). Definitely make sure you don't have any CSS transitions or animations applied to the same elements/properties that you're controlling with GSAP.
You also seem to have quite a heavy load on the GPU and rasterizing. I don't have time to dig into exactly why, but that's another thing that's unrelated to GSAP. It may be that you're using a very large image that the browser has to constantly re-rasterize or resize in a way that's not performant.
Thanks for the tips...but I believe the non-smooth animation is indeed related to GSAP (at least how it's currently implemented). I've recreate the animation in a codepen here:
See the Pen mdWxmgN by infinitemonkeys (@infinitemonkeys) on CodePen
and without any other CSS transitions or animations it's still not smooth. Another example I'm comparing to is thisSee the Pen zYrZwVo by knyttneve (@knyttneve) on CodePen
. What I notice with mine is that when I scroll with the mousewheel it "steps" between different tweens instead of smoothly progressing between them. I've created a screencast to highlight what I mean...this is me scrolling a tiny bit at a time up and down...notice the background image goes from start position and size to the next tween suddenly, not smoothly, Compare that to the Istanbul Codepen demo, where the slightest scrolling up or down is smooth. https://www.dropbox.com/s/17qfyf217ir7v68/Screen Recording 2021-06-03 at 2.16.04 PM.mov?dl=0How do I also achieve this?
-
49 minutes ago, elegantseagulls said:
Hey @AINOM,
I think the jitters you're seeing is stemming from the overflow that's being added to the page, so you'll want add an overflow hidden to the hero's wrapper. Also, your trigger is being animated, so you'll likely want to use your wrapper element as the trigger in this case.
You'll also benefit from using a single timeline/scrollTrigger for this setup:
gsap.timeline({ scrollTrigger: { trigger: ".ct-section-inner-wrap", start: "top top", end: "bottom top", scrub: true } }) .to(".parallax-1", { yPercent: 60, ease: "none", }, 0) .to(".parallax-1", { scale: 1.15, ease: "circ", }, 0) .to(".parallax-2", { yPercent: 30, ease: "none", }, 0);
Thanks for the advice! I've re-jigged my code to use the "timeline" structure that you suggested, and also removed the second element (paralllax-2) that was being animated. Overflow:hidden was already applied to the hero wrapper. All this has made a slight difference, although it's not nearly as smooth as almost every other example I've seen
-
I'm brand new to GSAP and using for the first time for a simple parallax-like effect with 2 objects: a background image (parallax-1) and a DIV with text (parallax-2). Rather than the super-smooth scrolling animation that I've come to expect with GSAP (like with this sample: ) my animation it incredibly "janky": https://intendedimpact.infinitemonkeys.ca/about-us/. I must be missing something simple, but I just can't figure it out. Here's the code I'm using:
gsap.to(".parallax-1", {
yPercent: 60,
ease: "none",
scrollTrigger: {
trigger: ".parallax-1",
start: "top top",
end: "bottom top",
scrub: true
}
});gsap.to(".parallax-1", {
scale: 1.15,
ease: "circ",
scrollTrigger: {
trigger: ".parallax-1",
start: "top top",
end: "bottom top",
scrub: true
}
});gsap.to(".parallax-2", {
yPercent: 30,
ease: "none",
scrollTrigger: {
trigger: ".parallax-1",
start: "top top",
end: "bottom top",
scrub: true
}
});
Can anyone help me figure out what's missing?
Animation jankiness when scrolling
in GSAP
Posted
This was probably the BEST advice out of this whole thread so far. I realized after playing with it more, that using a number for the scrub attribute only masked the issue...but implementing smooth scroll (which was not happening with the latest mac Chrome, Firefox or Safari) is the bees knees, and it works perfectly now!!! So happy!
This forum is awesome, and now with a successful first foray into the world of GSAP, I am looking forward to doing much more in the future!
Thank you so much for taking the time to help. I hope to be able to give back to this community in time.