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.