Anime: Not working on Codepen.io

Created on 30 Jun 2016  Â·  7Comments  Â·  Source: juliangarnier/anime

When I downloaded the framework and began to experiment with the functions and API, I was unable to modify the div I created, even though I used the correct syntax. I attempted to call the script through this pen: http://codepen.io/juliangarnier/pen/4032af61ca0478304ab7b31b70a44804. Unfortunately, while CodePen recognized the syntax, it would not execute the animation.

<script src="anime.min.js"></script>
<div class="waden"></div>

.waden {
height: 200px;
width: 200px;
background: #000000
}

var myAnimation = anime({
target: '.waden',
translateX: '16px',
rotate: 360,
borderRadius: '8px',
duration: 2000,
loop: true,
`

All 7 comments

You must load anime.js before executing anime({}).

That's what I did, in the HTML section of Codepen. It still would not register the animation, even though I linked it as such:

<script src="anime.min.js"></script>

:(

(I just edited the original post to show what I did.)

You have 'target' instead of 'targets'

http://codepen.io/hotmilo23/pen/YWVAkd?editors=1111

@lukebatchelor Unfortunately, I set the up the script like you showed me, yet it still won't work. Here's a link to what's going on:

screenshot 175

The script tag you have there would only work if you had the file saved and being delivered on the same domain you are on. You need it to point to a server that is serving that file.

<script src="https://rawgithub.com/juliangarnier/anime/master/anime.min.js"></script> for example.
That pulls the script directly from this repo.

In codepen you can also put dependencies under settings -> JavaScript.

.

Instead of pointing to gihub, you could point at the pen you posted earler too.
http://codepen.io/juliangarnier/pen/4032af61ca0478304ab7b31b70a44804.

Hope that helps

Awesome! Thanks, Luke! I'll try and see if it works in the morning. :D
On Jul 1, 2016 12:48 AM, "lukebatchelor" [email protected] wrote:

The script tag you have there would only work if you had the file saved and
being delivered on the same domain you are on. You need it to point to a
server that is serving that file.

for example.
That pulls the script directly from this repo.

In codepen you can also put dependencies under settings -> JavaScript.

https://camo.githubusercontent.com/8f277e738bfb34601a47d68a6ef707b33efe36cf/687474703a2f2f692e696d6775722e636f6d2f73414d366c36462e706e67
.

Instead of pointing to gihub, you could point at the pen you posted earler
too.
http://codepen.io/juliangarnier/pen/4032af61ca0478304ab7b31b70a44804.

Hope that helps

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/juliangarnier/anime/issues/19#issuecomment-229853042,
or mute the thread
https://github.com/notifications/unsubscribe/ARH6TLecR4NHFNz5fhSNMm-qLIOIYtzaks5qRJwCgaJpZM4JB4rr
.

@lukebatchelor @juliangarnier Thank you both so very much for helping. It worked when I changed the source of the script, as per Luke's instructions, to:

<script src="https://rawgithub.com/juliangarnier/anime/master/anime.min.js"></script>

I'll be sure to start using this framework more often, and if possible, I'd like to start contributing to this repository. :D

Was this page helpful?
0 / 5 - 0 ratings

Related issues

trusktr picture trusktr  Â·  6Comments

ndimatteo picture ndimatteo  Â·  5Comments

edenprojectde picture edenprojectde  Â·  5Comments

dpw1 picture dpw1  Â·  4Comments

jackedgson picture jackedgson  Â·  3Comments