[Pin image to specific position of container /w SmoothScroll]

@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!

[Pin image to specific position of container /w SmoothScroll]

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?

See the Pen zYeVpwL by pmakos (@pmakos) on CodePen

[Horizontal Scroll Stacking Cards]

@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.

[Horizontal Scroll Stacking Cards]

I think i figured it out. 

See the Pen YzBoKMY by pmakos (@pmakos) on CodePen

Basically, i edit the code from this codepen

See the Pen YzjvNXB by ssaruuuu (@ssaruuuu) on CodePen

 

 

[Horizontal Scroll Stacking Cards]

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?

See the Pen rNPEBVg by pmakos (@pmakos) on CodePen

[Scale image and set it to it's original position]

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

[Scale image and set it to it's original position]

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.

[Scale image and set it to it's original position]

9 hours ago, Rodrigo said:

I think a better approach is to first create the HTML/CSS in the way you want it to look at the end, that is with the image next to the text and all the responsive stuff taken care of.

I think so too. But I wanted one more opinion. Thank you.

I will try without the ScrollTrigger and come back again.

[Scale image and set it to it's original position]

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!

See the Pen bGxqZev by pmakos (@pmakos) on CodePen

[SmoothScroller + Parallax scroll on footer]

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. 

See the Pen BaONwOL by pmakos (@pmakos) on CodePen

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!
 

[SmoothScroller + Parallax scroll on footer]

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. 
 

[SmoothScroller + Parallax scroll on footer]

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 

See the Pen mdLaqgo by Karolsz (@Karolsz) on CodePen

 but on my demo is not working. 
Any thoughts?
No console errors.
The uncover animation just playing on the desire time.

See the Pen XWPJJpR by pmakos (@pmakos) on CodePen

[Horizontal Scroll issue (hiding images)]

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

[Horizontal Scroll issue (hiding images)]

I follow this demo for a horizontal scroll container. 

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

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

See the Pen YzOKjYL by pmakos (@pmakos) on CodePen