Ad

Codepen Vs. Jsfiddle --- Why Does Only One Of These Work With Velocity.js?

- 1 answer

I'm having an issue with Velocity.

I created an animated logo for a company who I'm doing some redesign for, when I transferred it into the HTML of the site's landing page and previewed it there was no animation running. I A/Bd a lot of things, and replaced the document load call with a button to make the testing easier, then I took the functional code from the Codepen I was using and copied it into a jsfiddle, which did not function.

I checked everything, same exact settings and libraries. I've tried moving the jQuery, Velocity, and my animation code between the head and body in every variation and sequence.

http://codepen.io/JTBennett/pen/WrRwWP
Functioning

https://jsfiddle.net/6zjc98g1/1/
Not functioning

Here's the code I wrote:

$( ".anbutton1" ).click(function() {

  $(".anpetal").velocity(
    "transition.expandIn", 
              {stagger: 5, drag:true, duration:1000}
  ).delay(4000)

  $(".anwords").velocity(
    "transition.expandIn", 
              {stagger: 65, drag:true, duration:1000}
  ).delay(4000)

});

If I can get it to start working in the jsfiddle, I'll be very happy.

Ad

Answer

Read the console:

Mixed Content: The page at 'https://fiddle.jshell.net/_display/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js'. This request has been blocked; the content must be served over HTTPS.

tl;dr

Your jsfiddle link is hosted over HTTPS and Codepen is hosted over HTTP (not secure).

Change your script to https:// and it will work.
https://jsfiddle.net/DerekL/bpcLn6rb/

Or if you prefer, simply load jsFiddle over HTTP and it will also work as expected.


enter image description here

Also remember to change it to onLoad or onDomready for your jQuery code to be executed correctly.

Ad
source: stackoverflow.com
Ad