sosilver

Hi Rodrigo, I played around with your codepen as well as my own. I'm happy to report its working. Your implementation using the scrollTrigger.start and .end values gave me the info I needed to make my own adjustments. I did bump into one issue I was hoping you could shed some light on. I noticed that the tl.scrollTrigger.start and tl.scrollTrigger.end values only work properly when they are called inside the click event. If those values are set as a variables outside of the click event, it provides values 0 and undefined respectively. It wasn't an issue per say, but I was curious why this happens. Attaching updated codepen with console logs. https://codepen.io/renoxx/pen/abKrGVK Thank you again for your help! Marking your previous post as the solution!

Hi Rodrigo, Thank you for pointing me to the example pens and hooking up my current example with one potential solution. I think I understand what you mean about a magic calculated number, its probably very difficult to get the progress bar to line up exactly with the start of the chapter. I'd like to study the examples, experiment a bit, and come back with questions related to what you provided. Thank you for pointing me in the right direction!

Hi everyone, In my example I've attempted to make a navigation for a pinned and scrubable scroll trigger animation. The chapters in the navigation are given click handlers that set the tl.progress to the start of its corresponding box in the animation. When clicking on the link, it animates to the correct box but the scrollbar does not update. Upon scrolling again the animation jumps back to the position it was in before the click occurred. How can I update the scrollbar to stay in sync with the position of the timeline? Is there some value I can pull from the tl.scrollTrigger to keep the window scroll in sync? Any insight would be greatly appreciated. Thank you so much.

Hi Cassie, this technique worked great. Thanks for the tip!

Hello, I have a timeline that is being controlled by scrollTrigger using scrub. Rather than have the scrollTrigger start the animation sequence at a progress of 0 and complete at 1 would it be possible to define the values for the starting or ending point of the animation for use with scrollTrigger? I would like to take my timeline and define its starting point / starting frame to already be 10% of the way into the animation or a progress of 0.1. Then if a user would scroll up, scrollTrigger would not go lower than 0.1 progress of the timeline animation. For example: lets say a circle moved 100 pixels left over 10 seconds. How could I setup a scrollTrigger timeline such that I could define the start of the animation to a progress of .1 (10 pixels to the left) and end at .9 (90 pixels to the left). const master = gsap.timeline({ start: 0.1, end: .9, scrollTrigger:{ trigger: '#dod', start: "20% 0%", end:"+=4000", target: "#dod_diagram", anticipatePin: 0.1, //markers: true, scrub: 0.2, pin: true, pinSpacing: true, onUpdate: self => console.log("progress:", self.progress) } }); Thank you for any suggestions!

Hi @akapowl, this works great! I never would have thought to grab the .duration of that tween to make it work. Thank you

Hello, I am trying to trigger other tweens to occur based on how far along a specific labeled tween is in its animation. I am animating a line and then revealing three circles. I'd like the circles to begin their animations relative to how far along the line animation has progressed. In this example circle2 begins at 33% and circles 1 and 3 would start at 50%. I don't want to use a time in seconds because the duration of the line animation is going to change and many more elements will be revealed based on how far along the line has animated so its not practical to set values in seconds. You can see in the master timeline that function line1() which returns a timeline is given a "line1" label which I then try to use with buildCircle1 and buildCircle3 to force them to animate when "line1" is 50% complete. I can't get this to work but buildCircle2 works perfectly with the "<33%" syntax. master .add(setup()) .add(line1(), "line1") .add(buildCircle2(), "<33%") .add(buildCircle1(), "line1+=50%") .add(buildCircle3(), "line1+=50%") I have read the documentation here https://greensock.com/docs/v3/GSAP/Timeline and thought that the example provided "myLabel+=30%" - 30% of the inserting animation's total duration past the label "myLabel" would work. I might not be understanding it correctly. Could someone be so kind as to explain what I'm doing wrong or possibly provide a more proper solution to my issue. Thank you!