Jump to content


  • Posts

  • Joined

  • Last visited

sosilver's Achievements

  • Week One Done
  • One Month Later

Recent Badges



  1. Hi Cassie, this technique worked great. Thanks for the tip!
  2. 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!
  3. Hi @akapowl, this works great! I never would have thought to grab the .duration of that tween to make it work. Thank you
  4. 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!