How to use the ScrollTrigger as a callback so it won't change the initial state of the object

[danosaur]

Hello again dear GSAP community, 

Is there a way I could use the ScrollTrigger as a callback so it won't change the initial position of the object? The object starts off at the initial state when the page loads but as soon as the animation kicks in it jumps to 0 on the x-axis and 0 rotation on the y-axis. I can't use the ScrollTrigger inside of an animation because I have to use a custom smooth scroll and that breaks the scrub animation on mobile. ( I also tried to use scrollerProxy, but I wasn't able to integrate it with my custom smooth scroll ) 
 

ScrollTrigger.create({
    trigger: '.container',
    scrub: 3,
    start: '5% top',
    end: '20% top',
    onUpdate: (self)=>{
         mesh.rotation.y = 2.*3.14 * self.progress;
         mesh.position.x = 15 * self.progress;
            }
        });

The object is supposed to stay at 1 on the x-axis instead of 0 and be rotated as a default to -0.22 on the y-axis instead of 0.
 

    mesh.position.x = 1;
    mesh.rotation.set(0.127, -0.22, 0);

Any help or hint is much appreciated! 

See the Pen BaWQmBL?editors=0010 by danielapro (@danielapro) on CodePen

[elegantseagulls]

What's happening is that your self.progress is 0 and 0 * anything is, well 0.

You could add a conditional to check if your self.progress is 0, or just add your initial start values to your update (this would eliminate a jump at the start of the tweens) or add 1 to the self.progress value and use a factor of 2 instead of 1 for your math.

 

onUpdate: (self)=>{
         mesh.rotation.y = 2.*3.14 * self.progress + 0.22;
         mesh.position.x = 15 * self.progress + 1;
            }
        });

// or 

onUpdate: (self)=>{
         mesh.rotation.y = 2.*3.14 * (self.progress + 1);
         mesh.position.x = 15 * (self.progress + 1);
            }
        });

[elegantseagulls]

Or did you mean to += the rotation and position values?

 

onUpdate: (self)=>{
         mesh.rotation.y += 2.*3.14 * self.progress;
         mesh.position.x += 15 * self.progress;
            }
        });

[danosaur]

Hey elegantseagulls! Thanks for the answer, this pretty much solved it! You're a true hero! 

I just wonder I how I could use this along with matchMedia() hence I have to use a different initial state on mobile. 

The initial state on mobile would be on 0 on the x-axis and on the y-axis rotation.
I'm pretty sure this code would never work, but for example:
 

ScrollTrigger.matchMedia({
"(min-width: 1100px)": function() {
    ScrollTrigger.create({
        trigger: '.container',
        scrub: 3,
        start: '5% top',
        end: '20% top',
        onUpdate: (self)=>{
             mesh.rotation.y = 2.*3.14 * self.progress -0.22;
             mesh.position.x = 15 * self.progress +1;
                }
            });
        },
		
"(max-width: 600px)": function() {
    ScrollTrigger.create({
        trigger: '.container',
        scrub: 3,
        start: '5% top',
        end: '20% top',
        onUpdate: (self)=>{
             mesh.rotation.y = 2.*3.14 * self.progress;
             mesh.position.x = 15 * self.progress;
                }
            });
        },
	
});