Jump to content
Search Community

Change JS variable in timeline

abeerance test
Moderator Tag

Recommended Posts

Hey everyone

 

So for a project I need to animate a banner. The base of the water level at the beginning is 400 and should be lowered to 250 in a timeline, so the water level rises in that glass.

I can't seem to get the hang out of it, since I'm pushing an array in the gsap to draw the water. How can I adjust the pointValueYArray in a GSAP tl?

The array at the beginning would be [400,  400,  400,  400,  400,  400,  400,  400,  800,  800] and at the end of the timeline of glass_pulse the array should be [250, 250, 250, 250, 250, 250, 250, 250, 800, 800].

 

https://jsfiddle.net/abeerance/g5bz0nop/


Any help would be much appreciated and thank you for having me!

Link to comment
Share on other sites

1 hour ago, tailbreezy said:

There is endArray option when passing arrays.

 




gsap.to(arr,{ duration: 2, endArray:[250, 250, 250, 250, 250, 250, 250, 250, 800, 800] })

 

 

 

Thanks tailbreezy !

That helped me already. But now I have a follow-up question. How should I create the timeline, so that the water rises while the glass is pulsing?

As for now the water rises in the glass, then pulses after the glass is full is it possible to simultaneously run the changes in "pointValueYArray", "pointArray" and ".mainSVG"?:

 

image.png.1578a1595129599488a9df8faf95f13f.png

 

Sorry, I'm still quite new to GSAP but it's very cool to use!

Link to comment
Share on other sites

You should use the position parameter to position the tweens in your timeline wherever you need them to be.

 

It also looks like you're mixing in some of the old and new syntax. We highly recommend the newer, sleeker syntax where the duration is always in the vars parameter and you use the condensed string form of the eases. Using the old syntax is one of the most common GSAP mistakes.

  • Like 1
Link to comment
Share on other sites

Hey guys, I finally got it!

 

I was so confused by the old syntax, so I think I adapted everything to the new syntax now and it's working!

So anyway, I made another timeline where the water rises specifically, added the new timeline with .add( ) to the pulsing timeline and let everything start at 0 and now it looks like this:

image.png.ff6279babfaba5777f4bf3d0f18574a7.png

 

Everything works now, thank you so much for your help and have a great weekend!

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...