Skip to content
This repository has been archived by the owner on Dec 23, 2019. It is now read-only.

Animate, then hold. #3

Closed
jwfurness opened this issue Nov 15, 2013 · 2 comments
Closed

Animate, then hold. #3

jwfurness opened this issue Nov 15, 2013 · 2 comments

Comments

@jwfurness
Copy link

Is there an easy way to implement functionality so that the elements stay visible once animated? Thanks!

@davidhalford
Copy link
Owner

The easiest way to do this without being too hacky would be to set an extra class on an animated element. You'll need to change the checkInViewport-function to:

function checkInViewport(scrollBottom, domElement){
  var elementPos = $(domElement).offset().top;
  if((parseInt(scrollBottom)+parseInt(pixelOffset)) > elementPos){
    $(domElement).addClass(inClassName).removeClass(outClassName).addClass('hasAnimated');
  } else {
    if(!$(domElement).hasClass('hasAnimated')){
      $(domElement).removeClass(inClassName).addClass(outClassName);
    }
  }
}

What you essentially do is add the hasAnimated-class to any of the tracked elements that have animated. If an element has this class, it will not return to default after the element is scrolled out of the viewport. This is a pretty easy fix and doen'st require much reworking of the script, enjoy!

@jwfurness
Copy link
Author

Simple fix, 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

No branches or pull requests

2 participants