Scrolltrigger control

[deckrow]

Hi guys.
I'm new here and I'm just trying to go through this example with running man.  And I understand it pretty well. But how can I control it?
Like if I want to put the man in the corner of the screen first and then start setting the run with for loop.

How can I do it not at the same time?

See the Pen PoWmePL by deckrow (@deckrow) on CodePen

[BrianCross]

Hey there. I'm not 100% sure what you're asking. To put the spritesheet in the top left corner just get rid of:

 

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Then you want to trigger it somehow? Currently it's tied to the scroll position using ScrollTrigger. You're wanting to trigger the animation differently?

[deckrow]

10 minutes ago, BrianCross said:

Hey there. I'm not 100% sure what you're asking. To put the spritesheet in the top left corner just get rid of:

 

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Then you want to trigger it somehow? Currently it's tied to the scroll position using ScrollTrigger. You're wanting to trigger the animation differently?

I want to put it there with the scrollTrigger. 

Like
1. I'm scrolling and the container moving to the right
2. continue scrolling and image start running
I'm trying to figure it out how separete these actions. I don't want to do it at the same time

[GreenSock]

I'm still pretty fuzzy on what you want too. The container moves to the right (without any running) while scrolling?? and then at some point it hits the right side of the screen and then the guy starts running (in place) but only while you scroll after that point? And what happens if the user scrolls up all the way? Does everything reverse completely (guy runs backwards)? 

 

We really try to keep these forums focused on specific GSAP-related questions rather than a "can you make my project do ____ for me?" but we're happy to answer any GSAP-specific questions for you. 

[BrianCross]

Oh ok I think I get you. Like this?

 

See the Pen wvgdXMo by BrianCross (@BrianCross) on CodePen

[deckrow]

I'm not asking to make my project.
I'm just trying to understand how to execute this code 

tl.
  to(".container", {
    x: 200
  })

and then this

for (var i = 0; i < spriteSheet.total; i++) {  
  tl.set(".frames", {
    x: (i % spriteSheet.cols) * -spriteSheet.width,
    y: Math.floor(i / spriteSheet.cols) * -spriteSheet.height
  }, i / (spriteSheet.total - 1) * spriteSheet.duration);
}

Now it's executing at the same time (container and the image). 

I'm trying to do something like this.

tl.
  to(".container", {
    x: 200
  })
  .to(".container", {
    y: -100
  })

It's moving one after another

[BrianCross]

I just modified your pen and posted it. Have a look and see if that's what you mean.

[deckrow]

17 hours ago, BrianCross said:

I just modified your pen and posted it. Have a look and see if that's what you mean.

Almost. But still, it's working after 50%. 
If i have 2 timelines with scrollTrigger on each of them. Can I start second timeline scrollTrigger after the first one (immediately after the first one ends)?

For example, if I want to do some stuff with ".container" and then when it finished, I want to start animate running man. (and all of that happening when I'm scrolling)
Is there maybe any functionality that I don't know.

 

See the Pen XWpRQQE by deckrow (@deckrow) on CodePen

Something like this. But now each of them(scrollTrigger) executing at the same time. 
And I want to move it consistently one scrollTrigger after another one.
And maybe then I want to continue again first one. Is it possible?

 

Sry for my poor english. I probably can't explain it normally

 

[BrianCross]

You could create a master timeline with the scrub-enabled scroll trigger applied to it. Then you could nest other timelines within it so they play one after the other as you scroll. That would probably work.