This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Hugo van Heuven
Posted Aug 19 - Read on Facebook

Hey guys, I'm trying to animate in a titlebar after scrolling down a bit. The animation stutters because of the if else statement that checks the scroll position everything time. Is there a better way to do this?

scrollView = new Layer
width:320,
height:568,
y:0

content = new Layer
width:320, height:1140, y:0,
image: "http://goo.gl/gpEHNR"
superLayer: scrollView

titlebar = new Layer
width:320,
height:40,
y:-40,
backgroundColor:"blue"

scrollView.scroll = true

scrollView.on Events.Scroll, ->
if scrollView.scrollY > 100
titlebar.animate
properties:{y:0}
curve:"bezier-curve"
curveOptions: "ease-in-out"
time:.2
else if scrollView.scrollY < 100
titlebar.animate
properties:{y:-40}
curve:"bezier-curve"
curveOptions: "ease-in-out"
time:.2

9 Comments

Albin Ekblom

It's moving the wrong way?

Josh Puckett

You need to add another variable to check if it's animating, and only animate if it's not. So you could either do if scrollView.scrollY > 100 && !isAnimating then animate, and obviously set isAnimating to true at the end of that statement (so on the next frame while the first conditional is still true but isAnimating is now true, so it won't try and animate again).

Koen Bok

What Josh sais.

Hugo van Heuven

Thanks Josh! that helped!

Thijs De Mooij

Hi Hugo van Heuven could you share your code? I'm trying a very similar thing, but can't get it to work properly. It only works occasionally..

Samuel Pushpak

I am geting this error :
ReferenceError: Can't find variable: isAnimating
Any help pleaase.

Alex Hazel

Samuel Pushpak What is the scope of the variable "isAnimating"? The variable has to be available to the function that is calling it... (i.e. a global variable versus a variable native to a function.)

Hugo van Heuven
Samuel Pushpak

Alex Hazel My bad. Got this working. Thanks for the help.

Read the entire post on Facebook