Skip to content

Instantly share code, notes, and snippets.

@Kvaibhav01
Last active September 20, 2019 07:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Kvaibhav01/bd596999e02926e0fafcae02cfba95e7 to your computer and use it in GitHub Desktop.
Save Kvaibhav01/bd596999e02926e0fafcae02cfba95e7 to your computer and use it in GitHub Desktop.
JS code for AnimeJS demo
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
});
};
});
}
@AndrewRMillar
Copy link

AndrewRMillar commented Sep 18, 2019

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...

@Kvaibhav01
Copy link
Author

@Sl4rtyb4rtf4st, thanks for pointing it out. I've updated the Gist.

@AndrewRMillar
Copy link

@Kvaibhav01, good on you. Where is the upvote-button?

@Kvaibhav01
Copy link
Author

@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