Add animate() method to statically animate elements

[Prinzhorn]

As discussed in #88 a method should be implemented which allows to animate elements independent of the scroll position. At first this sounds like a bad idea because it doesn't have anything to do with scrolling but some thoughts

• There's already a parser and a render loop in skrollr. The implementation would be very lightweight and skrollr-like. Unlike jQuery's animate method it wouldn't use the element's current style as a start point but it would take two CSS strings, just like the keyframe definitions
• Animating properties based on scrolling is the core of skrollr. But some websites have additional requirements to either kick of an animation when a certain point is reached (see #88) or to have a continuous animation like a rotating element. Adding an animate method will get people low level access to the rendering core.

The method could look like this

animate(elements, from, to, options)

• elements Either one DOM element or an array of elements
• from A CSS string containing the properties for the start state
• to A CSS string containing the properties for the end state
• options:
  • duration Default 1000ms
  • loop Default false
  • done A callback function when the animation is done (when loop is false)

Easings would be specified per property, like with the keyframes.

[sprawld]

Hiya. Love skrollr. Hope this isn't presumptuous, but I'm going to explain a problem I'm having, make wild speculations on an animate() method, and then just ask for a few pointers :)

I'm using skrollr to make a website for an artist friend of mine. I'm using it for parallax scrolling (vertical), but adding animation in too, so doing this all within skrollr sounds very good to me. At the moment I'm using your suggestion from Issue #88 - adding listeners in, to trigger some JQuery animate() calls. Unfortunately, for any vertical animation, I'm using skrollr to set the css top position (for the parallax), then animate() to set the padding-top (so that the two don't conflict). This quickly gets jerky with lots of objects.

So I'd really like to put the animation in the skrollr script, and allow both skrollr and the animation to set the css top. I considered seeing if I could change the skrollr markup to allow it to specify time fixed animation eg: data-t-0="top:0px;" data-t-1000="top:100px;" where the number is the time in milliseconds. I thought I could add the command "t=0;" into the css to allow looping (data-t-2000="top:0px;t=0;" would loop the animation after 2s) and maybe even to trigger the animation at a certain height (data-100="t=0;") [if this was second case was allowed, skrollr would have to check an object for t=0, if not present it would start any specified animations at page load]

I realised I don't know nearly enough Javascipt (yet) to do this, I've just started learning (I'm not a programming novice, but definitely a js novice) but thought I could try adding some specialised script into skrollr for my project. So here's my question: can you give me pointers to where in the skrollr code I could insert animation? What variables would I be changing? Can I just change values after skrollr's calculated, but before it's rendered or would this cause problems elsewhere?

If you have any suggestions on my wilder speculation, I'm up for giving that a try too :)

[Prinzhorn]

I'm using skrollr to set the css top position (for the parallax), then animate() to set the padding-top (so that the two don't conflict).

So I'd really like to put the animation in the skrollr script, and allow both skrollr and the animation to set the css top.

The animate method I was planning to add would work the way jQuery does. They would still conflict. And I didn't thought about adding them as data-attributes, but that's probably be a good idea.

Maybe you could explain how they should behave in order to not conflict? I mean you can only have either the scrollbar or the time affect a CSS property. If you want both, how should this behave?

[sprawld]

Yeah, I was a bit unclear, I wanted the animation to add 0 -> 100px to the correct height (top) of the object. For example in my page, it's a cloud that moves with parallax and bobs up and down.

I should have put it as data-t-0="padding-top:0px;" data-t-1000="padding-top:100px;". That's what I'm currently doing with JQuery animate(). You're right - if the animation & scroll-position both set different absolute values there's a conflict. That was an unnecessary complication, I can do everything I need on css variables skrollr hasn't touched - I assume the jerkyness with my JQuery animation is because it's animating outside of skrollr, not because it uses both 'top' and 'padding-top'

[paskainos]

First, I love Skrollr, and the logic behind it, like:

With skrollr, you put the definition of your key frames right where they belong (to the element) using a syntax you already know (plain CSS).

-- Yes, brilliant!

To the point; I [too] have been working on a site with some cool Skrollr / animation effects, and I'm currently experiencing the same, namely:

This quickly gets jerky with lots of objects.

I agree, data-attributes to cue animation sounds like the way to go.

I didn't thought about adding them as data-attributes, but that's probably be a good idea.

However, considering this:

I assume the jerkyness with my JQuery animation is because it's animating outside of skrollr...

Please allow me to introduce a[nother] layer of abstraction. Since the 'jerkyness' is most often caused by the hardware acceleration resulting from CSS (and jQuery) animation techniques, I'm thinking of using Velocity.js for significantly more performant animation techniques. This should also be good news for the jQuery lovers since:

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve UI animation workflow.

Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery's $.queue(), and thus interoperates seamlessly with jQuery's $.animate(), $.fade(), and $.delay(). Since Velocity's syntax is identical to $.animate(), none of your code needs to change.

And even better:

Although Velocity is a jQuery plugin, it uses its own animation stack that delivers its performance through two underlying design principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize the occurrence of DOM querying.

So question: can you point me in the right direction on the best way to implement Velocity as my animation engine? And if you like, I can report back with results, info, patches, branches, etc. Thanks again for Skrollr, and please advise.

[Prinzhorn]

So question: can you point me in the right direction on the best way to implement Velocity as my animation engine?

I don't think putting velocity into skrollr will change anything. I also don't think it's even possible because it serves a different purpose.

[sprawld]

Hiya Prinzorn. I know this is an old conversation, but I thought you might like to know - I wrote a plugin to declare animations in a similar way to Skrollr! A copy of it's here - I give a quick shout-out to you as well : )

[ghost]

I realize the project is dead and the feature is available in ScrollMagic, so perhaps for reference, I think you could have left in the data- syntax functioning as a trigger and just add or remove a specific class based on the scroll direction over the trigger so people could create CSS transitions. You'd get an 80/20 solution for a big array of usecases with minimal changes to the lib needed. I think the useful syntax was always the smoking gun of skrollr and being able to use it for simple triggers would have been perhaps technologically inferior to 2-point interpolation, but useful in practice.

<div data-200-top=".triggered"></div>