bntratox

Anchor navigation to ScrollTriggered section (codepen.io) Im using this codepen example on scrolltrigger demos. For example, I want to give class to "Panel 2" text when it comes to the screen. Its not only for panel2, I also want to give every panels header a spesific class when it enters the screen. The issue is I've tried the code below to detect the panels visibility, but it doens't work. Its probably because of its using its parent divs position. gsap.from("#panel-3", { scrollTrigger: { trigger: "#panel-3", start: "left left", markers: true, onEnter: () => { console.log("enter"); }, } });

Hello, Im trying to do a vertical timeline effect which the left part will describe what are the right side contains. And the left title will keep moving down till right side ends. Then another section with different items will start. You can see on the codepen below: https://codepen.io/mertcanuslu/pen/JjBGGOV The problem is, its working, but the pinning also pins the projects on the right side, I want the projects also be sliding with the left side but the left description text "pre production, programming etc." should pin to center of the screen while the right side slides.

Hello, I wonder if its possible to make a scrollable timeline with gsap in theory or should I use another library for this? I want to make somthing like this: Im just planning it atm so I have no codes yet. The black boxes and dots will be opacity 0.1 or something like that, and when user comes in the viewport of the div, it will have a different color and opacity 1. I think its easy to do with scrolltrigger and start top top or something like that. I can do that. No problem. But the part confuses me : 1- I want the line also go down when scrolling, what is the best approach to do that? increasing it height based on scroll with scrub? 2- I Will use AJAX to add more and more boxes by scrolling. Is it possible? lets say I will have 30 boxes, I don't want to load them all. I want to fetch them from database with ajax and add it to the timeline. 3- When the line hits a ball, I want the line grabs the ball and drags it with it https://streamable.com/fagyed like in the video, the line will hook to the ball and keep scrolling with it till the next ball. Is that possible and easy to do? or should I skip this part. I thought it would be better to think about it before coding it so I wanted to ask here. Thanks. Edit: https://codepen.io/mikeK/pen/PgKjjG I've seen this on demos but can't we do it without svgs?

Thank you so much for this detailed and explaining comment, I will keep in mind everything here. ?

Hello, Im trying to learn GSAP, right now I am able to move objects with gsap.to and scrolltrigger. But I didn't understand how can I animate things based on scroll amount. For example: https://codepen.io/mertcanuslu/pen/yLqeNpW This is my codepen and a simple example. When a sections top hits the top of the screen it just animates immediately. What I want is, I want to animate not to happen immediately but based on scroll amount. For example I set xPercent to move 30% when top hits top, but I want the object move 15% when I scroll a little bit, and when I keep scrolling it moves %20 %25 %30 etc... and so on. How can I do that? Thank you.

Hello again, I just needed to change something but I got confused, can you help me about it please, its the same example. I just want to change that I have to scroll couple times before the second slide comes to the screen. How can I make that start instantly? I mean I want no stop, I want the divs keep scrolling without any delay on pin.

Hello, I just found this example on github. https://codepen.io/mikeK/pen/yLMrwrK?editors=1010 I want the vertical multiple items sliding. But I don't need loop, or next-prev buttons. I tried to remove them but every time I remove anything it breaks. Also, it doesn't work when I try to use the section between two static divs(header and footer). Could you help me to make it simpler please?

Hello, Im using 2 gsap animations in one page with different positions. Lets say first at the beginning of the page, and the second one at the near end of the page. They have no same classes, nothing they have is similar. But when I initialize them both, the animation on the end of the page starts . This is the codes of the part near the page end. And this is the codes which is near the top of the page: As you can see they have nothing similar. But, when I am scrolling thru the first section which is above, the section on the bottom starts animating and pops above the elements of top and works like that. Why would that be? I added "start" properties to them yet it starts waaay before it should be.

https://codepen.io/mertcanuslu/pen/YzjPjvz @Rodrigo this is the final version where I came, do you think any optimization could be made to this one?

Hello thank you for your explanation about markers, I created this thread because the other one seemed lose attraction so I started working on this example myself and tried to fix it on my purpose but I thought markers moving differently is another problem that could have another thread for that. Sorry ?

Thank you so much Im literally so lost here and literally depend on you guys help I feel so lost like Im trying to add random stuff everywhere to fix everything, like there is 0 chance I could figure out that I need to use call method there. Final question, thank you so much, this is last I suppose, can we make the left section start on top as well as right side? I mean red div is there before we enter the section, can I also make left white content also start on top before starting? I mean can we start like this?

Hello, As you can see on the project, markers are moving depending on the scroll speed but not on the position of the trigger itself. Im trying to change the left divs based on the right divs entering the viewport. But if I scroll fast or even slow, first divs work good but second divs trigger all of the other divs and they get the class same time. When I check the markers I figure that markers are moving independently without being fixed to the divs on the right. How can I fix this? is it because of smooth scrolling, I personally don't know how to remove that smooth scroll to be honest. Thank you so much

Thank you but Im not good at either css or gsap to do that in a short amount of time. So instead I prefer to use the trick I've mentioned, I will give .contento * { max-height: 0} then when the contento comes to the viewport, I will add it ".visible" class, and visible class will give it max-height: 1000px; When I do this, I get the same animation. You can check it here. So can you please tell me how can I add a feature to add custom class to the divs on the left of the screen when they became visible?

https://codepen.io/mertcanuslu/pen/LYBEeXx Here, I've done it thank you But the reason I want to combine GSAP with css is because I have to achieve the same animation like this. To achieve that, I will write a css code. So the max-height of the left contento divs contents will be 0. When they come to the viewport i will animate them with css to max-height:100px; so I will get the same animation.

Thank you so much, I'll keep watching, right now Im watching The Code Creative's scrollrigger playlist on youtube bull definitely check the ones you've mentioned. Im playing with the final codepen you've shared but can you help me about something, I would rather give class to left divs instead of them coming from above. Left should be fixed, and I will add "visible" class to the "contentos" and animate them and show them with css myself. Also, In the first frame, we can see purple and green backgrounds, rather than that, can we start with first left and first right divs(first panel and first contento) visible? I tried that by adding them custom css etc. but still couldn't make that work.

https://codepen.io/mertcanuslu/pen/KKBwqeZ I've come this far but yet there is a problem, my first and second left div gets the class as like I expected but the third one gets that at the same time with the second one. Why is that happening? @Rodrigo @mvaneijgen

https://codepen.io/mertcanuslu/pen/KKBwqeZ I am trying to trigger an effect on the headings when "Orange" div appears on the screen but it triggers without orange appearing in the screen, why would it be? @Rodrigo Edit: I managed to do that, when orange comes to the screen I change the opacity of the left div, but I have 2 questions: - When I scroll to top back to red div, opacity keeps low, how can I make it revert back? -> Fixed by adding toggleActions But doesn't work as I expected. - How can I toggle class to the left divs? I just can't figure out how to toggle class to left divs, I tried but couldn't work somehow

Hello, thank you for your answer I really would like to understand gsap more but its really complicated, Im trying to achieve this for weeks yet I still can't figure out how. I've watched couple of tutorials but GSAP is a whole language by itself Thank you so so much for fixing my code and making it better, I will be using this from now, if its okay can you also share the same animation without scrolltrigger please? because as long as I understand I think I have to use scrolltrigger to achieve this, I don't know how to do that without mouse trigger.

Hello, I'm trying to do something like that: https://streamable.com/vy54g5 But with a different approach, I want to have 2 sides, because my left side will change color. So the left side must be another part instead of a floating text. Other than that, I want to achieve the same thing. https://codepen.io/mertcanuslu/pen/jOpEOWm Here is what I have so far. The problems I couldn't fix yet: - I want to make the left side position sticky because when the purple left div hits the top of the screen, I want the text to be there not sliding with the page. - When I slide to the second div which is orange and has a text "TWO" I want to be able to fade out or use another effect to remove the "<h2>This is random content</h2>" and fade in or show the " <h2>This is another content</h2>" text inside of the left side. Basically, when the top of the panel on the right hits the top of the screen, I want to be able to show the left div assosicated with it and hide the other ones. - Also like in the text change, I want to be able to change the color of the left section too, for example the page starts with purple left background, but when I scroll to the next div, I want to be able to make left div's background color something different. Thats all I think. Could you help me please? Thank you so much,

https://codepen.io/mertcanuslu/pen/QWxYNYb When I make top and bottom divs not snapped and make them seperated from the animation things get broken. For example in the codepen above I've made the blue and green divs not included in the animation. When I scroll just a little bit in the blue section it immediately starts to animate the red div to top of the screen. But I don't want this, what I want is when red div becomes %85 visible like in the image below, I want it to start animating then. Btw I just noticed that green div is completely missing.

https://codepen.io/mertcanuslu/pen/wvXRZym

https://codepen.io/mertcanuslu/pen/wvXRZym Lets say I've scrolled this much but left that amount of space. I want the section to automatically go top and snap. Same for all other divs.

I have multiple sections on my page. Html: <header></header> <section> Content1 </section> <section> Content2 </section> <footer></footer> Css: section{ width:100%; height:100vh; } How can I use gsap to snap them on top of the screen when they come near?

Im so sorry, Im searching for hours and didn't notice there is no snapping the smooth scroll effect made me thought there is also snapping there too. I noticed now there is no snapping. So I will add snap but I cannot add that smooth slow scrolling without the library right?

Hello, actually I wanted to post it like that but when I fork it because of the scrollsmoother library is premium my forks didn't worked. I did this actually in my local server but I want to have similar snapping in the center part. I mean I want colors to snap top of their container as like in the original one without the library. Is that possible? Also I want it to scroll smoothly like in the original one, a bit heavy instead of regular scroll of mouse.