X/Cornerstone Donation Thermometer

Support
#1

Hi,

For the most part, I can build nice sites using Cornerstones native widgets. However there are times when it doesn’t have what I need - in this case, I’m building a “Donation Thermometer” like this one https://codepen.io/TommyCreenan/pen/pCslj

My first question is there a better way to do this using X? Right now, I’m using raw markup/CSS. Its sort of similar to the skill bar widget, just styled vertically and like a Thermometer.

My second question is if there isn’t, and raw content is the way, how does X achieve its animations that start when elements show in the viewport for the first time (like the skill bar, counter, or column fade)?. I would like to hook into this rather than add another jQuery library say for viewport detection, so I can trigger a CSS animation on my raw element when it first shows in the viewport. e.g.

jQuery(document).ready(function($) {

   $(".donation-meter").<whatgoesheretotriggerwhenshowsinviewport>(function(){
         $(".donation-meter .glass .amount").height("30%");
   });
});

Thanks

#2

Hey there,

  1. There is no element for this in Cornerstone so you’ll need third party code for this.

  2. It uses Waypoint JS. You can find the code in cs-boddy located in plugins\cornerstone\assets\dist\js\site. We could not detail how it specifically works though as this would be quite technical so this would be outside the scope of our support.

Thanks.

#3

Thanks, knowing its waypoint is good enough, I can implement from there.

#4

Thank you!