Xenex122

I am trying to blink my block but it doesn't work. Since admin says that the best to animated a selector is to call a global root so I tried it but I don't know why it doesn't work? Can anyone help me here..It must blink when the scrollTrigger hits it. I imagined it with keyframes in gsap but I don't know how I will do it..but by the way if you want to added..the complete animation I want to do..It will blink twice and then will move from left to right and then vanished so it looks like a entrance picture opening. Thank you for helping me.

oh i see

So I have a problem wherein I don't know why the animation pseudo selectors don't work as I expected. https://codesandbox.io/s/competent-moon-n1ce1p?file=/src/App.js:2380-2405 Supposingly each images is hided...they will only see once they are hit my scroller-start on the start of trigger images. If this works I can do it also with texts. Anyone can help me here? Anyway the first in 'grid-layout-left' is supposed to animate the yellow background from 'right to left' ..You can see in the codepen. And for the 'grid-layout-right' which is the right side of images supposed to animated the yellow background from 'left to right'. also they supposed to be reanimated when scrolling back..

nevermind I already got my solutiion I just have to put const rule = CSSRulePlugin.getRule(`.introduction .title:after`)

You can see the codepen there where `.title` pseudo selectors don't work. I don't know how can I make the CSSRule work properly. What did I do wrong here can you see it? I input the code nicely I don't know why it is not working though.. It supposed to animated the pseudo character after all the animation there . I already comment out the error in the codepen..just see for yourself. Thanks for the help :>

Its been a week since I've dive in here in this forums and I just wanna show my project. Thank you greenshock members I'll upgrade this more gsap scrollTrigger...I don't know if this is allow to share but I hope its okay here. https://spyxfamily-jullemyth122.vercel.app/

:<

I mean like for some years that it will become or avail or someday...

ahh I see however, if ever it's possible. It can be use in the next season or not?

I don't understand this..Does the ScrollSmoother is still not updated on react or what else? Anyone could help me about this? I want to practice ScrollSmoother since it looks it will makes me a lot of animation in texts. Thank you. https://codesandbox.io/s/agitated-microservice-v4d17k?file=/src/styles.css

So my problem here is that why my section is included in the ScrollSmoother. What I mean about this is that. I don't know how I can include the height:400vh on that scrollSmoother..it doesn't animated the and I can't scroll down. I was imagining that the text will put only on the top:50vh and since it is absolute that means it has no height unless I put the height of section with 200vh or so. How I can fix this? I'm just beginner at ScrollSmoother... that code was recently come up with here https://greensock.com/3-10/.. so that's why I want to try it and just do the banner text cause it looks amazing. big help thanks..

I'm sorry. I'm just to addicted on this kind of animation. Thank you sir..I'm very sorry for inconvenient..just so addicted on it.

sir @akapowl how to do it when I applied a top section on it because it doesn't work properly. When I put a section on top of it the animation of it is not working but when you remove it.. It will works. Can you notice the error here big thanks sir Here is the codepen.. Please help me.

So basically the problem here is that the animation opacity:1 will work out if it's on the first section but if its on second or other than first section.. It will not show the animation opacity:1 in the middle of its on section, You can see in my codepen. Everything works out but if I added a new section on its top. It will not animated. Anyone can help me about this? Thank you. You can test it. Try to remove the first section and add it again and you will see the different.

So I don't much any problem here..The only problem is why is there like a little space in edges of width of the gallery-container? Is this just a normal case? That's all thank you...the codes is all working but I don't know about the little white space edges.

@Cassie I don't see animation in your codepen ".hide h3" that it should be y:"0" it stays the same in transform: translateY(-50%)... is it animating on you? cause it is not animating on me sorry.

So basically my animation is something like this..When the both image get the max width and height the text that is hidden as you see in the codepen. It must go down as the code says " y : 0 "...but I don't know why it isn't working but when I tried to inspect it..It is working but when you not inspect it..It will not animated to "y:0". Any idea? window.addEventListener("scroll",function e(s) { const box = document.querySelector('.box').getBoundingClientRect() if ((box.width == ((window.innerWidth/2))) && (box.height == (window.innerHeight))) { console.log("Pass In") gsap.to('.hide h3',{ y:0, ease:"none", },3) } })

yes both of them. I want to delete both of it but I don't know how to delete it here.

Btw can I ask sir what do you mean about ST ?? actually nvermind i lost it..it was scrollTrigger hahahha

I actually posted another question about this cause I've feeling that no one will reach it out to me..but thanks now I have it.. Thank you very much sir.

In my last question I feel bad about asking about it but I think I have better question. So in here as you see in codepen. I have toggleActions which is onEnter: function () { console.log("enter"); }, onLeave: function (){ console.log("leave") }, onEnterBack: function() { console.log("Enter Back") }, onLeaveBack: function() { console.log("All the way back"); }, toggleActions:"play complete restart play", (Don't mind the sections2 just only the sections1) What I want to happen as you can see in codepen when it reach the midpoint where I have the black lines it will make the opacity:1 and when it leaves to the scroll-end it will go back to opacity:0.1, how can I achieve? I already tried the toggle Actions but it doesn't work... Anyway could make help about this for me thanks ?

Let say I have scroll down then each of the side of content will go up and down but I want per boxes to animated when I scroll down up or down...but the boxes will animated based on the scroll..if its up the animated will be like something skewY(90deg) and if down then skewY(-90deg) per boxes.

yes this is better thank you but can I know if how I will animated each box when I scroll it down? Thank you sir

So I have a problem wherein I want to do a scrolling vertically and pin the "parent" in the codepen and then If I ever scroll the...the animation that goes upward it will go upward if it scroll and if the animation downwards if it scroll too but the parent must be pin so I put a pin there in my codePen so it was all set up but I don't know if this is the right method to do...Can you guys give me a hint or any link where I can do that? I want to pin the "parent" and then when I scroll the opposite animation will go up and down once I scroll down. If anyone could help me it will be a big help.

can somebody anyone help me please? I'm so sick of this...I've tried many option it really don't work please help.