How should I create pinning in container and item floats in

[whizbbig]

I am trying to create a scenario, where there's only the container is pinned and item floats in the view of the container in parallax state, this is the codepen demo of sir carl schoof but, I direction less from where i can start to make it according to my version. as given in the video below it should pin the container and there is more sections like our services in bottom so when i scroll they should scroll in that container in parallax state.

 

https://imgur.com/a/cTQFdL4

 

i've tried to follow this tutorial by sir carl shoof

 

See the Pen rNRWVKb by raj-shukla (@raj-shukla) on CodePen

[mvaneijgen]

Hi @whizbbig welcome to the forum!

 

What I would do if I where you is try and copy your setup you have on your 'live' setup on to Codepen and start tweaking from there and when you get stuck post your demo here. Even if it is not working, that way we can see your thought process and thus better help you understand the tools!

 

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. 

 

@Carl's example is really specific and it is build for this effect, but the effect you're looking for is a bit different, so if you don't want this specific effect I would go a different route. First of I would just focus on the animation and don't worry about ScrollTrigger at all. Check out this post and I've linked a pen below that I've made with this technique, it is probably not exactly what you want  but you could tweak the animation to your liking, but be sure to also read through the post it goes over some key points that could really help you in your animation journey! Hope it helps and happy tweening! 

 

 

See the Pen abMbwYd by mvaneijgen (@mvaneijgen) on CodePen