Update parameters with SplitText plugin

[stereoS]

Hi,

I would like to update parameter from a timline created with splitText plugin.

 

I'd like my h1 to appear from bottom on load (and scroll to the top) and disappear to top.

My idea was to change a variable (decalTxt) 

 

As you can see I use reverse() but I would like to change my y position. I can't find an issue and I'm getting mad !

 

See the Pen gbOKww by plicploc (@plicploc) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Attempting to update the tween values isn't going to work the way you have it. You basically need new tweens.

 

Check this example

 

http://codepen.io/anon/pen/PwoaQm

 

Notice it is one timeline that has the intro part of the animation, a pause, and then the outro. 

The intro plays, pauses and then continues when you scroll.

 

A few additional warnings, the browser scroll event fires MANY MANY MANY times while scrolling. For this little demo it is okay to use that to trigger the playing of the animation, but I wouldn't recommend it for anything more intense. Please look into scroll throttling or debouncing

 

http://benalman.com/projects/jquery-throttle-debounce-plugin/

http://greensock.com/forums/topic/7205-scrollto-bug-in-182-in-safari-602-mountain-lion/#entry35063

some examples: http://greensock.com/forums/topic/7205-scrollto-bug-in-182-in-safari-602-mountain-lion/page-2#entry35071

 

Also, consider that your condition of 

 

if(top>=100)

 

is going to be true lots and lots of times. You probably don't want to be running the same code over and over every time the use scrolls past 100.

 

Lastly, if you want scroll-driven animations please look into ScrollMagic, it is a great API. It takes care of all the scroll logic for you and allows you to trigger animations when elements come into the viewport and also play animations forward or reverse depending on scroll direction (up / down).