Jump to content
Search Community

Animation Start Areas?

codi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi codi :)

 

I'm not 100% sure what you're asking, but here are the scripts that site is loading.

<script type="text/javascript" src="node_modules/pixi.js/bin/pixi.min.js"></script>
<script type="text/javascript" src="node_modules/three/build/three.min.js"></script>
<script type="text/javascript" src="node_modules/gsap/src/minified/TweenMax.min.js"></script>
<script type="text/javascript" src="node_modules/gsap/src/minified/plugins/EndArrayPlugin.min.js"></script>
<script type="text/javascript" src="node_modules/preloadjs/0.6.1/preloadjs.min.js"></script>
<script type="text/javascript" src="node_modules/hammerjs/hammer.min.js"></script>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/jquery-mousewheel/jquery.mousewheel.js"></script>

In addition to GSAP, it looks like the bulk of the work is being done by PIxi and Three.js. When you find something you like, you can hit CTRL +U and see the source code. From there you can usually find which scripts are being loaded.

 

Is that what you meant?

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

That's a really nice looking site!

 

You can also look in the "Sources" tab in your dev tools to see everything that has been loaded. From there you can see the actual code used for the site. There's a pretty-print button that will unminify the JavaScript so you can read it. It's pretty huge, like 25,000 lines, but that also includes some other libraries like Angular.

 

From what I saw, Pixi is used for 2d stuff like the menus and text, special effects like the glitch, and video. So yes, there is video, but it's really hard to tell what's video and what's being generated on the main page. Three.js is used for the 3d objects. And GSAP is used to animate it all. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...