Redcase Software

@mvaneijgen Oh i see... We trigger: "#home-blog", and pin the ".pin-images" .... I'm stupid... "And the last problem (not really a problem 🙃) you're using JS to add a class to an element, this of course need to be fancy GSAP animations! " It's an implementation i have like a year ago. So i just copy it to my project now Thanks once again !! Really appreciated it!

Hello once again, This time I have the following problem: I have some images for each blog post where I want them to be pinned in the same place from my container and when the user hovers over a blog post then the image changes. I had achieved the desired result with position sticky but once I applied smoothScroll things didn't go so well. I said try doing it with scrollTrigger and pin. I want to achieve something similar to this one in the team section. https://k72.ca/en/about Any ideas?

@mvaneijgen Man, once again you're here to unstuck me! Thank you so much! Indeed, nice approach. I don't know why I didn't try it. But the issue with this is that it's not dynamic. I think that my answer above is suited more to my case.

I think i figured it out. https://codepen.io/pmakos/pen/YzBoKMY Basically, i edit the code from this codepen https://codepen.io/ssaruuuu/pen/YzjvNXB

Hello everyone! I want to create a horizontal scroll stacking cards effect. I'm kinda close to what i want. If you uncomment the css inside the "Desire final positions" section you'll see my desire final position. Basically I want each section to stop exactly on the previous number. Each number is 64px width. Therefore, I need to calculate the stop of the next section at 100% + 64px (Maybe. Because the pinned values that I have set I just got them by testing) Any ideas?

Once again incredibly informative. Thank you so much for your time! I now have exactly the result I wanted. Very clever work around.

Hello once again, I have changed the code a bit (You can check the same codepen link). I changed the html and set my image element to another place so that it's easier to set its final position. So, right now I have my desire animation kind of. But I can't find a way to pin my element until the first timeline's animation has finished. Unfortunately, I can't find a way to have the animation on Scroll without the ScrollTrigger.. It's like I want the element to be pinned in the first animation and somehow unpinned in the second.

I think so too. But I wanted one more opinion. Thank you. I will try without the ScrollTrigger and come back again.

Hello everyone, I want to scale down the size of my image first ( I accomplish this. I have my desired starting point). Then i want to pin the image until it reaches 100% of the viewport. And last i want to set it to its original position which is after the text "LET THE". I thought that it better to have my original position as my final destination and use the fromTo and from methods. But my problem is, that right now i can't pin my image until it reaches its full width. Actually, i want to do something similar to this page -> https://wearemotto.com/ Any advice? Thank you in advance for your time!

Sorry for the confusion. I don't remember changing it. Here's a link which is a fork for your example and i just remove the smoothscroll effect. https://codepen.io/pmakos/pen/BaONwOL I still can't see the parallax effect. Maybe it's the values on "start" and "end" properties ? I played a bit with them but with no result. Thank you so much for your time once again!

Thank you for your time! Ok, i get the issue with the selector. But it seems i don't get the parallax effect. Even if i remove the smoothscroll.

Hello everybody, i'm trying to create a smoothScroll effect to my whole page and a parallax effect on my footer div. I check this demo on codepen from someone else https://codepen.io/Karolsz/pen/mdLaqgo but on my demo is not working. Any thoughts? No console errors. The uncover animation just playing on the desire time.

Okay, don't mind it. I had wrong selector in my css......

I follow this demo for a horizontal scroll container. https://codepen.io/GreenSock/pen/WNjaxKp My demo is just a container with img elements inside that i want them to be full width, pin them, and start a horizontal scroll for each element. After that just scroll normally. Like the demo. But for some reason, when i start the horizontal scroll my elements are just hiding. I'm really struggling to figure out what is wrong here with no results. Can anybody help me with this? I feel like it's something stupid. Thanks in advance