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

What is Framer? Join the Community
Return to index
Arvi Raquel-Santos
Posted Jul 16 - Read on Facebook

utils.modulate question

I was able to get this quick test to work — getting an object to rotate while a page is scrolling. I kind of stumbled onto this solution by accident but don't really know what the "5000" refers to in this line?

"square.rotation = Utils.modulate(yOffset, [0, 5000], [0, screen.height], true)"

12 Comments

George Kedenburg III

I've always wanted to make a little graphic that explains modulate. Does this help?

George Kedenburg III

Although maybe a gif would explain this better

Rory Smyth

That's nice George Kedenburg III

Koen Bok

We need it in a little test project, like Benjamins spring playground: http://share.framerjs.com/mjnda62r3r9h/

Arvi Raquel-Santos

Thanks George for the graphic and helping to figure out that I had my numbers mixed up which prohibited me from understanding what was going on. For those interested, it should be "square.rotation = Utils.modulate(yOffset, [0, screen.height], [0, 360], true)"

http://share.framerjs.com/bmwx9wq48hkh/

Jordan Robert Dobson

JL Flores Mena - Do you have those slides handy? Your talk had a huge focus on this. :D

Jonas Treub

Made a small Modulate Playground as Koen suggested. Do you think this makes things more clear? http://share.framerjs.com/gjdvfntygwfg/

Arvi Raquel-Santos

It does to me now that I get it but it would be great to see this somehow applied to opacity or a common usage rather than an output of a number.

Jordan Robert Dobson

Jonas- You bad ass... thanks!

JL Flores Mena

This is my favorite Framer utility! You can do a lot of jaw-dropping effects combining Utils.modulate + scrollY. Jordan The thing about my slides is that I always include just a bunch of one-liners (or slides with only one big image), those don't work by themselves, I do all the talking : / But hey, what Jonas did is more than enough, where do I open a ticket-request to include that in the documentation??

Jonas Treub

The playground I created is a first draft of something we want to add to the docs and/or learn pages so the ticket is already there ;)

Jordan Robert Dobson

True JL Flores - My memory of it is already fading. :P

Read the entire post on Facebook