charne

I haven't been able to figure out the smartest way to do this. Basically, I want a horizonal scroll just like this, but when the panel that contains box-2 fills the screen I want it to hold/freeze/pin (whatever the proper term) and wait for the box-2 object to move and once box-2 reaches the top (in this example), begin scrolling horizontally again to the next panel. I thought I remember once seeing an example showing how to stop the horizontal scrolling so an additional scrollTrigger movement can occur within the panel before it moves on but I can't find an example anywhere now.

Staring at this too long. Such an easy fix. Thank you++

I have GSAP.to where I am going to get a number from 1 - 100 based on the tween. On every tick I have an onUpdate for running a function on each calculation (which will get passed the percent based on the tween). Whenever updateFunction() runs from onUpdate, I always get myPercent = undefined. If I run updateFunction() directly, I get myPercent = 1. If I try and reference anything else in updateFunction() everything is undefined or it can't find any other functions. Is onUpdate creating an instance of something? I can't figure out how to access the function directly. I hope my explanation makes sense. Appreciate the help. This is my setup: import GSAP from "gsap"; export default class Controls { constructor() { this.experience = new Experience(); this.scene1(); } scene1(){ this.myPercent = 1 this.theTimeline = GSAP.to(this, { duration: 1, onUpdate: this.updateFunction, }); this.updateFunction(); // Added this on the end to test - when run from here, I do get myPercent = 1 } updateFunction() { console.log(this.myPercent) //output for every tick from GSAP onUpdate: myPercent = undefined } update() {} }