krisxtina
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by krisxtina
-
-
Hello. How I can set viewport to top position?
start: self => self.previous().end
In this case my viewport marker is on bottom, I want it on top. start: self => self.previous().end + ' top' - doesn`t work properly -
Hello! I can`t disable scrub in single timeline.
let tl2 = gsap.timeline({
scrollTrigger: {
trigger: "#content",
scrub: 2,
pin: "#content",
pinSpacing: false,
start: self => self.previous().end,
end: "+=2000
},
defaults: { ease: "none" }
});
tl2.to(".content__inner", { opacity: 1 }, 0)
tl2.to(charsRow1, { scrollTrigger: { trigger: '#content', scrub: false }, y: 0, opacity: 1, stagger: 0.04, }, 0)
First timeline works with scrub, but I want disable it in second one. How I can do it?
-
9 hours ago, GreenSock said:
This isn't something we generally do for people here, but I was curious about the challenge so here's the most clever solution I could come up with that only scales a dot (which I made with a simple <div> that has border-radius: 50%, placing it roughly on top of the actual dot in the "?"):
Does that help?
Yes, thank you a lot. I often do something, but I`m not sure I`m doing it correctly, that`s why I ask how I can do it, for better understanding.
-
16 minutes ago, GreenSock said:
That's definitely a bad idea, but it has nothing to do with GSAP. It's about what you're asking the browser to render. Think about it this way: If your screen is 1000px wide (somewhat small by today's standards) and the image fills that area, and maybe it's 500px tall. That's 500,000 pixels. If you scale that to 300x, that means you're asking the browser to render 45,000,000,000 pixels. That's a LOT of pixels.
There's not really a simple/easy fix that I can think of. You could only animate the text (rather than the whole image) and to further optimize it, hide the letters that go off screen (to minimize rendering load). That's still not super simple to do.
Another option is to load multiple versions of the image, one that's zoomed-out, then others at various stages of zoomed-in state and transition between them, sorta like this demo:
Good luck!
Thank you for information. In my case I don`t have such cool images. So, if I transform scale for this dot for full background, how I can do it for good perfomance?
-
25 minutes ago, GreenSock said:
You'd have to calculate the proper transformOrigin, perhaps like this:
Thank you, but if I want to scale for getting full white background, in my actual project I need to scale: 300, is it good? Because my projects starts working slowly and badly
-
Hello, as you can see in my demo after opacity I scale section. But, my question is, how I can scale to specific point, I want scale to dot in question mark?
I want scale in it, after show another section. But how to determine these coordinates or what I have to do? Thank you
See the Pen oNqZLMR by Kisa777Zaika (@Kisa777Zaika) on CodePen
-
1 minute ago, Cassie said:
Not entirely sure what you mean by that - but if you want to change the actual color when it's over a certain section you could use event listeners and then tween to a new color.
Thank you! I thought there was something special for this idea
-
1
-
-
8 hours ago, Cassie said:
Hey there,
This is best done with mix-blend-mode. Nice and simple, just one line of css
-
On 7/7/2022 at 11:24 PM, Cassie said:
You're animating a filter - that's notoriously bad for performance I'm afraid!
Thank you very much for your codepen. I was working a lot, and now I have enough great result!
-
1
-
-
Hello! Can you please tell me how can I change the color of the cursor depending on the section using gsap? Of section 1 I want white cursor, and on footer black cursor.
See the Pen zYWKvmx by Kisa777Zaika (@Kisa777Zaika) on CodePen
-
And why on mobile phone it seems that fps on pinned section is not good?
-
53 minutes ago, Cassie said:
Hey there! There's still a ton going on here and it feels like there's a lot of overcomplication.
I'm not really sure what the runSectionMove is doing. It looks like maybe it's been copied from another pen? You could just do this with a pin and get rid of all the fixed positioning in your CSS. Bonus being that if a user doesn't have JS enabled the page will still flow normally.
You have a lot of transforms in your CSS which can often cause complications too.
This is simplified down a bunch - maybe it's a better place to start you off?
I have a question. When I scroll back, my text section start scrolling down, how I can avoid it?
-
45 minutes ago, Cassie said:
Hey there! There's still a ton going on here and it feels like there's a lot of overcomplication.
I'm not really sure what the runSectionMove is doing. It looks like maybe it's been copied from another pen? You could just do this with a pin and get rid of all the fixed positioning in your CSS. Bonus being that if a user doesn't have JS enabled the page will still flow normally.
You have a lot of transforms in your CSS which can often cause complications too.
This is simplified down a bunch - maybe it's a better place to start you off?
Omg, it looks so hot! Thank you! I`ll go study
-
15 minutes ago, Cassie said:
Hey there!
I'm more than happy to take a look at this for you - but could I ask that you tidy up your demo a little. There's a lot of code here and it's quite disordered. Please can you remove any code that isn't absolutely essential to understanding the issue.
Thanks so much! I'll pop back and check on this in a bit.
Done
-
9 minutes ago, Cassie said:
Hey there!
I'm more than happy to take a look at this for you - but could I ask that you tidy up your demo a little. There's a lot of code here and it's quite disordered. Please can you remove any code that isn't absolutely essential to understanding the issue.
Thanks so much! I'll pop back and check on this in a bit.
Ah, sorry, I was in a hurry to tell about my problem xD I do it now.
-
Hello! I have some problems with understanding, but at first I tell you my scenario.
First hero has height 100vh, while scrolling, the background blurs and text moves. After, the second content section appears by fade, and I need to create another scrolltriggers to animate elements in it. So, when the second section appears, I want that dark background on circles start scale, after this animations ends, I can continue scroll down. I try to pin exSearch section, but it jumps, I don`t understand why. Help me please, I`m not sure that functions before are correct, maybe they can create this problem.See the Pen rNdxEZM by Kisa777Zaika (@Kisa777Zaika) on CodePen
-
1
-
-
Thank you very much for information. The last codepen - this is what exactly I`m looking for
-
1
-
-
Yes, I mean when you start scroll, section is fixed and image changes. When it is completed, I want that when we scroll up, back, positions looks static, and I have the last image as result.
-
Hello. This is scroll trigger demo, Image comparison on scroll. I don`t understand how I can stop this image animation after it is completed. Can you please help me? If I use tl.kill() or tl.scrollTrigger.kill() - something strange happens. Or, my screen continue be in position fixed, I don`t want it.
See the Pen oNjgEjm by GreenSock (@GreenSock) on CodePen
-
13 hours ago, GreenSock said:
I don't see any obvious problems. You could simplify things with a .forEach() loop so that you don't have to manually create a new one for each section or add a distinct class to each one. But that's just about simplification - it's not that there was something "wrong" in your code. I personally would reduce the "end" value a bit so that it doesn't take so long to scroll through those sections, but that's totally a personal preference.
Thank you!
-
5 hours ago, GreenSock said:
Hi @krisxtina. I didn't quite understand what you're asking - can you clarify? It looked to me like everything was working as expected. What exactly is the problem? I don't see any flashes in Chrome at all. Not even one. How can we reproduce?
Hi. I want that someone who is good in gsap see that my code is clear, please. No problem, just have doubt about correct code writing
-
Also I noticed that this animation works good on Safari, but Chrome with random flashes
-
Hello. I`m enough new in using gsap. I need your review please, because I have doubt about the implementation of idea.
So, my idea: I need two sections of 100vh horizontally scrolled, then I have section #3 (projects) that has own height, after that I want two sections of 100vh horizontally scrolled. I did this, but I`m not sure that it is clear and css is right. Thank you for your attention
See the Pen KKyVRQg by Kisa777Zaika (@Kisa777Zaika) on CodePen
-
Hello. I have accordion / tabs with question-answer.
When I open tab, the text slides down (the height increases), when I close, the text slides up. I want to make it so, that when the tab is opened, I click on another, the both animations work synchronously. Now I have to wait while opened tab closes, and then active tab opens.
I don`t understand how to sync animations. Could you please help me
Position sticky with scrolltrigger
in GSAP
Posted
Hello.
As you can see in demo I have titles, that are sticky on the top. But I can`t understand how to create sticky on bottom.
I want to see all 4 tabs on bottom, that start scrolling after each other. If I give a css style sticky, with scrolltrigger it works incorrect. Help me please. I use this example as reference
See the Pen 9e7bf431223f98516c0431cfdefb6e3f by GreenSock (@GreenSock) on CodePen
, but I really don`t understand how to do it in my codepen.Thank you!
See the Pen YzaMgBK by krisxtina (@krisxtina) on CodePen