Jump to content
Search Community

timeline go wrong with x value

Lichay test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

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

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

 

  • Like 2
Link to comment
Share on other sites

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

  • Solution

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...