Last active
September 20, 2019 07:41
-
-
Save Kvaibhav01/bd596999e02926e0fafcae02cfba95e7 to your computer and use it in GitHub Desktop.
JS code for AnimeJS demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var btn = document.getElementById('cta'); | |
var btn2 = document.getElementById('cta2'); | |
btn.onclick = function () { | |
var morphing = anime({ | |
targets: '.polymorph', | |
points: [ | |
{ value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' }, | |
{ value: '215, 110 0, 110 0, 0 0, 0 67, 76' } | |
], | |
easing: 'easeOutQuad', | |
duration: 1200, | |
loop: false | |
}); | |
anime({ | |
targets: '#blip', | |
opacity: 1, | |
duration: 500, | |
translateY: 150 | |
}); | |
var promise = morphing.finished.then(() => { | |
btn2.onclick = function () { | |
var morphing = anime({ | |
targets: '.polymorph', | |
points: [ | |
{ value: '215, 110 0, 110 0, 0 47.7, 0 67, 76' }, | |
{ value: '215,110 0,110 0,0 49.3,0 215,0' } | |
], | |
easing: 'easeOutQuad', | |
duration: 1200, | |
loop: false | |
}); | |
anime({ | |
targets: '#blip', | |
opacity: 0, | |
duration: 500, | |
translateY: -800 | |
}); | |
}; | |
}); | |
} |
@Sl4rtyb4rtf4st, thanks for pointing it out. I've updated the Gist.
@Kvaibhav01, good on you. Where is the upvote-button?
@Sl4rtyb4rtf4st, there is no such button available for Gist comments I guess. 😿
Thank you! 😄
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is it bad that the indentation in this file is so bad/confusing, I forked it, just to fix the indentation, even though I had no intention on using the file just right now...