Skip to content
This repository has been archived by the owner on Jan 24, 2018. It is now read-only.

Added a modifier mechanism for rounding interpolated values #569

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

jkphl
Copy link

@jkphl jkphl commented Jul 24, 2014

I added a simple mechanism for (optionally) applying modifications to interpolated values. I needed this for animating the src property of <img> elements. Imagine this:

<img src="image_0.jpg" data-top="@src:image_0.jpg" data-bottom="@src:image_10.jpg"/>

While skrollr is able to interpolate the image filename, it will eventually produce floating point numbers — which doesn't make sense here of course. I needed the interpolated values to stay integers, so they need to be rounded. I introduced ° as another modifier (similar to ! for preventing interpolation altogether) for exactly this purpose:

<img src="image_0.jpg" data-top="@src:°image_0.jpg" data-bottom="@src:°image_10.jpg"/>

This will result in src values like image_1.jpg, image_2.jpg and so on. Also, it should be easy to implement additional modifiers in a similar fashion.

@sergeylukin
Copy link

Thank you @jkphl, it works! I have similar requirement when dealing with element's height. Tiny whitespace may appear below the element if floating point number is used in height value so rounding does the trick. This PR works great for me.
@Prinzhorn Is there a reason this PR is not merged? Are you planning on merging it / implementing similar functionality?
Thanks

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants