Lichay Posted January 16, 2021 Share Posted January 16, 2021 I am trying to add jumps between boxes every jump go some right but on the last step it should go 100px back but he go back 100px from start / I use this instructions and still go wrong how can I fix it? This is my code 'immediateRender: true' to keep it from last step of 400px right and go back 100px => box should be 300px See the Pen jOMXZZy by lichaytiram (@lichaytiram) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 16, 2021 Share Posted January 16, 2021 Hey @Lichay, ABSOLUTE or RELATIVE - that is the alternative. Relative values Use a"+=" or "-=" prefix to indicate a relative value. For example, gsap.to(".class", {x:"-=20"}); will animate x 20 pixels less than whatever it is when the tween starts. {x:"+=20"} would add 20. See the Pen mdraxKW?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Lichay Posted January 16, 2021 Author Share Posted January 16, 2021 1 hour ago, mikel said: Hey @Lichay, ABSOLUTE or RELATIVE - that is the alternative. Relative values Use a"+=" or "-=" prefix to indicate a relative value. For example, gsap.to(".class", {x:"-=20"}); will animate x 20 pixels less than whatever it is when the tween starts. {x:"+=20"} would add 20. Happy tweening ... Mikel first thank for helping. It work for easy example but on enhance example with some start & end properties it isn't work anymore and jump to start Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 16, 2021 Share Posted January 16, 2021 Those tweens are in conflict. What are you expecting to happen? 1 Link to comment Share on other sites More sharing options...
Solution mikel Posted January 16, 2021 Solution Share Posted January 16, 2021 Hey @Lichay, Please study the best guidelines to become a ScrollTrigger expert To work around this either use set immediateRender: false (like See the Pen KKzoVGd?editors=0010 by GreenSock (@GreenSock) on CodePen shows) or use .fromTo()s for the later tweens (like See the Pen LYNzrXb by GreenSock (@GreenSock) on CodePen shows) or set a ScrollTrigger on a timeline and put the tweens in that timelines instead (like See the Pen jOqGKXJ by GreenSock (@GreenSock) on CodePen shows). See the Pen RwGEyMy?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 1 Link to comment Share on other sites More sharing options...
Lichay Posted January 16, 2021 Author Share Posted January 16, 2021 56 minutes ago, mikel said: Hey @Lichay, Please study the best guidelines to become a ScrollTrigger expert To work around this either use set immediateRender: false (like shows) or use .fromTo()s for the later tweens (like shows) or set a ScrollTrigger on a timeline and put the tweens in that timelines instead (like shows). Happy tweening ... Mikel It work perfectly but I miss understanding something. on 5:00 he said^ on "first time on record the values", so why he get in second render value opacity 0 to 0 instead 0 to 1. because on first record it was 1. on my example he remember the value from first render and when you add 500px and after add -100px he take it from start (on first record as well) So my question is how it doesn't work the same on his example? edit: if he was use instead new TweenLite only one but use '.from' in this case it was work and back to 0 without immediateRender: false? my edit is use only for example understanding 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