Pictures are not where they should be

[trazetJet]

I greet everyone! There was a problem displaying images in the right places. It is necessary that when a certain section is reached on the left, an image is displayed relative to it. Attaching a screenshot:

 

See the Pen VwVZWBW by sdghd (@sdghd) on CodePen

[trazetJet]

I still don't understand what to fix in my code

[Rodrigo]

Hi,

 

Maybe this example can help you:

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

 

If not, please be as specific as you can regarding the effect you're trying to achieve and the issue you're having.

 

Happy Tweening!

[trazetJet]

41 minutes ago, Rodrigo said:

Hi,

 

Maybe this example can help you:

 

 

 

If not, please be as specific as you can regarding the effect you're trying to achieve and the issue you're having.

 

Happy Tweening!

Thank you. Yes, it is. But my effect begins from the very bottom and reaching the desired block, goes upstairs. The screenshot shows the scenario of what is happening. Do I need to change styles?
using animated elements in your example in my project?

[GreenSock]

I'm not sure if this will help, but here's a video from @Carl that covers some of the concepts: 

 

[trazetJet]

53 minutes ago, GreenSock said:

I'm not sure if this will help, but here's a video from @Carl that covers some of the concepts: 

 

Thank you, it was this video that I used to implement the desired effect, but something does not work for me and I do not understand what exactly

[GreenSock]

I noticed several problems: 

1. You created only ONE timeline and then you're attaching that same timeline to a bunch of ScrollTriggers (one for each section). That's definitely a mistake - each ScrollTrigger would be trying to fight for control of the same timeline and make it go to different places. I assume you wanted to create a different timeline for each section (in your loop)
2. Your start/end values look very odd to me. You're using a pretty short element, a <span> with only a small amount of text like "step I" and telling the ScrollTrigger to start when the top of that hits 40% down from the top of the viewport which is fine, but you're telling it to end when the bottom of that element hits the bottom of the viewport which would actually happen BEFORE the start! I'm not sure what you were trying to accomplish there, but maybe you meant to set end: "bottom top"? 
3. Are you trying to make the element animate to yPercent: 0 with an ease, and then immediately go to yPercent: -100 with another ease? 

   tl.to(purchaseImages[idx], {
       yPercent: 0,
       duration: 3.7,
     })
       .to(purchaseImages[idx], {
       yPercent: -100,
       duration: 3.7,
     })

   
   I wonder if you actually meant to animate that linearly to -100 in which case you could do that with a single tween and ease: "none"

If you still need help, please be very specific about what you want and what is broken, and try to keep it as isolated and simple at a time (don't list 5 requirements and try to accomplish them all at the same time - just do baby steps and solve one issue at a time). 

 

Good luck!