D.Cus Posted February 15, 2021 Share Posted February 15, 2021 Why is when I use the following within a foreach the animation starts from the top on every loop. The desired effect I want is to on each to use the current position. {y: gsap.getProperty('svg', 'y')} See the Pen mdOWBbv by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted February 15, 2021 Share Posted February 15, 2021 For this, is there a specific reason you want to use a fromTo animation? If you just use .to, it works just fine. What's happening is, in your forEach, the entire animation up at once, so all of the initial y values in the from are set to 0. To avoid this you could measure them all and set them via index as you to in the to part of your animation. 1 Link to comment Share on other sites More sharing options...
D.Cus Posted February 15, 2021 Author Share Posted February 15, 2021 @elegantseagulls If .to will work when incorporating scrollTigger as well then that is fine. I just find it very strange that it will console log the value I need but not set in in the animation Link to comment Share on other sites More sharing options...
GreenSock Posted February 15, 2021 Share Posted February 15, 2021 9 minutes ago, D.Cus said: @elegantseagulls If .to will work when incorporating scrollTigger as well then that is fine. I just find it very strange that it will console log the value I need but not set in in the animation I think you might be misunderstanding what happens at a JS level (this isn't related to GSAP really). You're looping through everything IMMEDIATELY, and reading the "y" value AT THAT TIME (which is 0 in this case). But it looks like mentally, you're thinking of it as though each iteration of the .forEach() is rendering the animation as if it's finished before the next iteration (but it hasn't even started yet). Another option is to track the value like this: var tl = gsap.timeline({ defaults: { duration: 4, ease: Power4.easeInOut}}), elements = gsap.utils.toArray('.focus'), y = gsap.getProperty("svg", "y"); elements.forEach(function (value, i) { const nextY = y - 400 * i; tl.addLabel('Start'+i) .fromTo('.canvas', {y: y}, {y: nextY} , 'Start'+i) .addLabel('End'+i) .set('.canvas', {y: (-400 * (i+1))}, 'End'+i) .add(function(){ console.log(gsap.getProperty('svg', 'y'))}); y = nextY; }); 4 Link to comment Share on other sites More sharing options...
tailbreezy Posted February 16, 2021 Share Posted February 16, 2021 Also pay attention to how you increment your nextY value. const nextY = y - 400 * i "y" 0 "nextY" 0 for "i" 0 "y" 0 "nextY" -400 for "i" 1 ==> we are skipping -800 with this expression and jump right to -1200 "y" -400 "nextY" -1200 for "i" 2 "y" -1200 "nextY" -2400 for "i" 3 What you probably want instead is const nextY = - i * 400 ; "y" 0 "nextY" 0 for "i" 0 "y" 0 "nextY" -400 for "i" 1 "y" -400 "nextY" -800 for "i" 2 "y" -800 "nextY" -1200 for "i" 3 3 Link to comment Share on other sites More sharing options...
mikel Posted February 16, 2021 Share Posted February 16, 2021 Hey @D.Cus, A little gimmick with line-height and start / end values. It may be a little tricky ... See the Pen bGBqOYz by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now