How to control external css animation through saola animate timline

How do i control external css animation through saola animate timeline. For example, one animation auto playing when it loads in html but i want to stop at first frame and want to play it on scroll through saola animate timeline. is this possible? Can u please guide.

This is what i am referring for. Please take a look.

test-saola.zip (1.5 MB)

Hi Niraj,

If you just want to play/pause CSS animations, you can use animation-play-state CSS property.
However, advanced controls such as seeking are more complicated and may not work cross browsers.

Regards

I have integrated exernal css animation in resource in given example above. Can we pause it in beginning through saola timeline and want to animate when user scroll it. is this possible?

Hi Niraj,

You can add a trigger at 0 in the timeline to pause the external animation and bind event to play it on scroll.
Please see the attached project for details.

play-pause-css-anim.saolapack (1.5 MB)

Regards

Thanks! It works, however is this possible to make it designer friendly without writing any js code.

Also what is the step if I want to pause animation further 1 second ahead instead of 0 second

Thanks

Hi Niraj,

You must recreate those content and animations in Saola Animate if you don’t want to write any JS code.
To pause the animation further 1 second, just drag the timeline trigger to 1s. At this time, the external document already loaded, so you need to modify the script a bit (remove load event handler):

function timelineEventHandler(doc, e) {
  // pause animation
  pauseAnimation(doc, true);
  var animationPaused = true;
  // play animation on mouse wheel
  doc.getElement('HTML_Widget_1').embeddedDom.contentDocument.addEventListener('wheel', function() {
    if (!animationPaused)
      return;
    pauseAnimation(doc, false);
    animationPaused = false;  
  }, false);
}

Regards

The above code does not pause the animation.

Also If i recreate same animation directly in saola animate, how do i use wheel scroll event as I don’t see any wheel event.

Regards
Niraj

It should work if the external document is loaded before it pauses the animation. 1s is far enough for loading a local document. Did you move the trigger to 1s?

Saola Animate doesn’t support wheel event yet, you must use JavaScript.

Regards

I have re-created animation with saola but still i am missing few things.

  1. How to animate gradient color.
  2. How to hide scroll bar mark (in right & bottom side)
  3. How to configure it on wheel scroll. I want animation start from a label “start-wheel” when user scroll wheel.
  4. How can I see generated CSS code from Saola. I see only random data in published flip.js file.

please guide and update.
Thanks
Niraj
flip-animation.saolapack (1.5 MB)

Hi Niraj,

Please find my answers below:

  1. Unfortunately, Saola doesn’t support animating gradient color yet.
  2. To hide the scrollbars, set Overflow to Hidden, overflowed content will be cut off.
  3. Scroll event only occurs when the scene content is scrolled, not when the user rotates the mouse wheel. I think you can use Swipe Right event to start the animation.
    If you still want to use mouse wheel, you must add Run JavaScript action to Scene Activate event:
function onSceneActivated(doc, e) {
  var animationPaused = true;
  this.dom.addEventListener('wheel', function() {
    if (!animationPaused)
      return;
    doc.getTimeline().play('start-wheel');
    animationPaused = false;    
  }, false);
}
  1. Saola Animate use JavaScript for animations, there’s no generated CSS code at all.

We’ll consider supporting gradient color animation and wheel event if there’s more request from users.

Regards

Thanks, the code works.

That will be good to add features like–

  1. Gradient color animation - For now I used scaling option to animate it.
  2. Wheel option - because in case if page is fit to screen, existing “scroll” option does not work but wheel option works

Thanks again for all your support.

One more thing that i found that one of the image named “image bottom” does not visible in ie and edge browser however it is visible on chrome and firefox. Please let me how can I resolve it and make it visible in IE and EDGE browsers. Please suggest.

Anyway, I have resolved it. Thanks

1 Like