How do I start and what tools should I use to develop websites with amazing animations?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm a frontend developer but so far I only developed websites without great animations, only few CSS animations and no such great or outstanding transition effects between pages.
I use frameworks like Angular and Vue (no React for now) and am aware of libraries like GSAP.
Right now I'm still wondering how I can achive a result like the following websites:
https://octoplus.ch/it
https://monza.ferrari.com/it-it/monza-sp2 (look at the amount of details of this one!)
... but don't know where to start from, which tools to use to have such great animations and a fluid user experience. Can someone point me in the right direction?
Thank you!
user-interface animation css-animations
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
add a comment |
I'm a frontend developer but so far I only developed websites without great animations, only few CSS animations and no such great or outstanding transition effects between pages.
I use frameworks like Angular and Vue (no React for now) and am aware of libraries like GSAP.
Right now I'm still wondering how I can achive a result like the following websites:
https://octoplus.ch/it
https://monza.ferrari.com/it-it/monza-sp2 (look at the amount of details of this one!)
... but don't know where to start from, which tools to use to have such great animations and a fluid user experience. Can someone point me in the right direction?
Thank you!
user-interface animation css-animations
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
add a comment |
I'm a frontend developer but so far I only developed websites without great animations, only few CSS animations and no such great or outstanding transition effects between pages.
I use frameworks like Angular and Vue (no React for now) and am aware of libraries like GSAP.
Right now I'm still wondering how I can achive a result like the following websites:
https://octoplus.ch/it
https://monza.ferrari.com/it-it/monza-sp2 (look at the amount of details of this one!)
... but don't know where to start from, which tools to use to have such great animations and a fluid user experience. Can someone point me in the right direction?
Thank you!
user-interface animation css-animations
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
I'm a frontend developer but so far I only developed websites without great animations, only few CSS animations and no such great or outstanding transition effects between pages.
I use frameworks like Angular and Vue (no React for now) and am aware of libraries like GSAP.
Right now I'm still wondering how I can achive a result like the following websites:
https://octoplus.ch/it
https://monza.ferrari.com/it-it/monza-sp2 (look at the amount of details of this one!)
... but don't know where to start from, which tools to use to have such great animations and a fluid user experience. Can someone point me in the right direction?
Thank you!
user-interface animation css-animations
user-interface animation css-animations
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
asked Nov 8 '18 at 12:34
Leonardo MinatiLeonardo Minati
1501112
1501112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Most of what you see on those sites are created by libraries that can manipulate the html5 <canvas> element.
Libraries that handle <canvas>:
- Three.js
- Babylon.js
- D3.js
For example, what I would do to create something like https://octoplus.ch/it is to create a Three.js based website. The loading you see at the start is when Three.js loads assets from the website, you can't have a loader without something to load. After that all you're seeing is a Three.js application with a scene and animations. Note that they might not be using Three.js, but that's how I'd make it since I'm familiar with it. They use something similar to it.
I would use Nuxt.js or Vue for handling the initial website stuff, like the loading part, binding the loading value to a variable with Vue.
So to summarize what I'd recommend for you is a Nuxt.js application that uses either Three.js, Babylon.js or D3.js for the fancy graphics.
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
Thank you for your suggestions Simon! :)
– Leonardo Minati
Nov 14 '18 at 15:52
You're welcome :)
– Simon Hyll
Nov 15 '18 at 1:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53207845%2fhow-do-i-start-and-what-tools-should-i-use-to-develop-websites-with-amazing-anim%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Most of what you see on those sites are created by libraries that can manipulate the html5 <canvas> element.
Libraries that handle <canvas>:
- Three.js
- Babylon.js
- D3.js
For example, what I would do to create something like https://octoplus.ch/it is to create a Three.js based website. The loading you see at the start is when Three.js loads assets from the website, you can't have a loader without something to load. After that all you're seeing is a Three.js application with a scene and animations. Note that they might not be using Three.js, but that's how I'd make it since I'm familiar with it. They use something similar to it.
I would use Nuxt.js or Vue for handling the initial website stuff, like the loading part, binding the loading value to a variable with Vue.
So to summarize what I'd recommend for you is a Nuxt.js application that uses either Three.js, Babylon.js or D3.js for the fancy graphics.
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
Thank you for your suggestions Simon! :)
– Leonardo Minati
Nov 14 '18 at 15:52
You're welcome :)
– Simon Hyll
Nov 15 '18 at 1:58
add a comment |
Most of what you see on those sites are created by libraries that can manipulate the html5 <canvas> element.
Libraries that handle <canvas>:
- Three.js
- Babylon.js
- D3.js
For example, what I would do to create something like https://octoplus.ch/it is to create a Three.js based website. The loading you see at the start is when Three.js loads assets from the website, you can't have a loader without something to load. After that all you're seeing is a Three.js application with a scene and animations. Note that they might not be using Three.js, but that's how I'd make it since I'm familiar with it. They use something similar to it.
I would use Nuxt.js or Vue for handling the initial website stuff, like the loading part, binding the loading value to a variable with Vue.
So to summarize what I'd recommend for you is a Nuxt.js application that uses either Three.js, Babylon.js or D3.js for the fancy graphics.
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
Thank you for your suggestions Simon! :)
– Leonardo Minati
Nov 14 '18 at 15:52
You're welcome :)
– Simon Hyll
Nov 15 '18 at 1:58
add a comment |
Most of what you see on those sites are created by libraries that can manipulate the html5 <canvas> element.
Libraries that handle <canvas>:
- Three.js
- Babylon.js
- D3.js
For example, what I would do to create something like https://octoplus.ch/it is to create a Three.js based website. The loading you see at the start is when Three.js loads assets from the website, you can't have a loader without something to load. After that all you're seeing is a Three.js application with a scene and animations. Note that they might not be using Three.js, but that's how I'd make it since I'm familiar with it. They use something similar to it.
I would use Nuxt.js or Vue for handling the initial website stuff, like the loading part, binding the loading value to a variable with Vue.
So to summarize what I'd recommend for you is a Nuxt.js application that uses either Three.js, Babylon.js or D3.js for the fancy graphics.
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
Most of what you see on those sites are created by libraries that can manipulate the html5 <canvas> element.
Libraries that handle <canvas>:
- Three.js
- Babylon.js
- D3.js
For example, what I would do to create something like https://octoplus.ch/it is to create a Three.js based website. The loading you see at the start is when Three.js loads assets from the website, you can't have a loader without something to load. After that all you're seeing is a Three.js application with a scene and animations. Note that they might not be using Three.js, but that's how I'd make it since I'm familiar with it. They use something similar to it.
I would use Nuxt.js or Vue for handling the initial website stuff, like the loading part, binding the loading value to a variable with Vue.
So to summarize what I'd recommend for you is a Nuxt.js application that uses either Three.js, Babylon.js or D3.js for the fancy graphics.
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
answered Nov 14 '18 at 4:01
Simon HyllSimon Hyll
99311025
99311025
Thank you for your suggestions Simon! :)
– Leonardo Minati
Nov 14 '18 at 15:52
You're welcome :)
– Simon Hyll
Nov 15 '18 at 1:58
add a comment |
Thank you for your suggestions Simon! :)
– Leonardo Minati
Nov 14 '18 at 15:52
You're welcome :)
– Simon Hyll
Nov 15 '18 at 1:58
Thank you for your suggestions Simon! :)
– Leonardo Minati
Nov 14 '18 at 15:52
Thank you for your suggestions Simon! :)
– Leonardo Minati
Nov 14 '18 at 15:52
You're welcome :)
– Simon Hyll
Nov 15 '18 at 1:58
You're welcome :)
– Simon Hyll
Nov 15 '18 at 1:58
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53207845%2fhow-do-i-start-and-what-tools-should-i-use-to-develop-websites-with-amazing-anim%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
