Problem with pinnig element

[mCat006]

Hello

I want to place on the right side, a container with an image, which, depending on the active slide, will change the image and finally will be at the very bottom of the section it is in.

Additionally, when I start pinning an element, it moves away from the right side of the screen, where it should be located.

 

What I'm doing wrong?

 

See the Pen MWVrZeg by mateuszkania (@mateuszkania) on CodePen

[Cassie]

Hi there - I can't quite work out from your question and the demo what you're trying to do.

Maybe a demo in the Scrolltrigger Examples page will help?

 

If not, maybe you could rephrase to give us a clearer idea of what you need help with?

[mCat006]

Hello @Cassie

Like on https://www.bolt.com/ page 

on left side we have normal text content and from right side we have image which I want to change in deppends of which slide we are

 

Checked This page before and similar effect is in page 

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

 but I have different DOM structure and it doesn't work for me

 

[Cassie]

 

 

Your demo and the example pen are very different - so I'm afraid I'm a bit stuck - I really don't know where to start. 
 

You don't seem to have the DOM structure or styling in place. A huge part of effects like this hinge on the structure of your HTML. It's not just a case of copying over some JS logic, you would have to restructure your HTML to be more like the example demo.

[mCat006]

OK @Cassie, make some updates in my pen

Look I want to pin 1 element like it works now.

But when second slide is Active i want to avoid scrolling but put the image in pinned section

Like in image attached, because like you see second slide is activated because background is changed and image is shown

And in end of Animation last image shouldn't be hidden but pinned to bottom of section

 

 

[Cassie]

I'm sorry - I've read through this many times but just can't grasp your intentions with the current phrasing. In general lists of 'I want to do x then y but not like z' are very hard for people to understand. 

I would suggest breaking this down into smaller pieces. It sounds like maybe you want each image to behave in a different way - You've currently got a loop so each image is being treated the same. Maybe start by getting rid of that and working out what each image needs to do seperately?