What is the best way to do normal and parallax animations?

[alessiop95801939]

I would like to create animations like on this site,

201˚

which is the best way and the most performing one?
on the net is a lot on scrollmagic and gsap, are they the best?

[osgood_]

Not sure but its way beyond the skill scope of what anyone can do around these parts....to me it looks like one of these new breeds of SPA (Single Page Applications) websites possibly built with React or some similar javascript framework, maybe even bespoke coding. The only issue is its very slow to load on account the javascript has to fully load first before you see any content, so yeah on the one hand its f--k--g amazzzzzzzzzzzzzing work/skill and on the other hand it might just pee people off if they want to get at the information fast.

This is the way the web is moving and its moving in this direction hugely fast. Im noticing a lot of talk and  shift to dropping old workflows and moving to using javascript components to build websites these days, so for anyone lagging behind and has 10+ years left in the business my advice is go and learn how they are constructed.....else youre going to be dust in a few years.

[Nancy OShea · Accepted solution]

That site is built with React.js. 

React - A JavaScript library for building user interfaces

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

That site is built with React.js. 

React - A JavaScript library for building user interfaces

Are you going to learn this shite yet...........any plans to? Not necessarily this framework but one of the other flavours?

I'm intrigued but from what I've seen its way beyond me.......then I guess when I first started out learning html/css/php/javascript it was beyond me too!

Not sure I can put my life on hold for a couple of years, while I get up to speed only for it to fall out of favour.........hummm

Os

[Nancy OShea]

osgood_  wrote

https://forums.adobe.com/people/Nancy+OShea   wrote

That site is built with React.js. 

React - A JavaScript library for building user interfaces

Are you going to learn this shite yet...........any plans to? Not necessarily this framework but one of the other flavours?

All I can say is REACT is not on my bucket list at the moment.  But things may change.

Right now, I'm getting into BrightScript which is the proprietary code used by Roku (streaming TV )

Wish me luck!

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

Right now, I'm getting into BrightScript which is the proprietary code used by Roku (streaming TV )

Never heard of it but good luck.

Sounds like you are moving intoTV streaming then.

[alessiop95801939]

I'm not very interested in what they used for this site, but which one do you think is the best for these effects in terms of fluidity and ease of use,

what do you think of gsap? and scrollmagic? there are others?

react.js seems like you do not like it very much

[pziecina]

A lot depends on how you write your javascript?

If you use jQuery then a framework like velocity.js or animate.js which uses the same code format as jQuery is probably the easiest to learn.

If you are more comforable with 'standard' js then look for one that is a js animations extension. That is because there is nothing that any animation framework can do, that 'standard' js cannot.

[alessiop95801939]

I'm at the beginning I have no particular preferences yet,

I would like to have an overview of the best choices in terms of performance and potential...

[Nancy OShea]

GSAP claims to be faster and smoother than CSS or jQuery.   Almost every website these days is already using some form of jQuery.  So jQuery based animations might make more sense than introducing another scripting library which may or may not be compatible.

[pziecina]

All animation frameworks/librarys make the coding of animations easier, as they have already coded the functions/objects for you, so all you have to do is reference the function/object and pass it the required parameters. The trade off with that is that even if you do not use a function, the end user must still download all of the framework/library, even if you only use a handfull of the 100's or 1000's of the functions provided in the framework.

Learning to code animations yourself using a combination of css (transforms/transitions/keyframe-animations) and the browsers built in js (js animations) will always be quicker to execute, but take longer to code.

The velocity.js animation library I mentioned, uses the jQuery 'syntax' for coding but does not require jQuery to be loaded, (though you can use it with jQuery without problems).

The question really comes down to your requirerments -

There are not many tutorials/books available to learn complexed animations without using a framework/library, but once you do learn a framework/library you are stuck with using it for anything you do, (future employers may not use the one you choose). Learning the css/js required may take longer, but then you will know what you are doing, and more importantly how the code works, and you can build your own library of code to reuse on other projects.

One word of caution though. At the moment frameworks/librarys are all the fashion, untill the next in-fashion framework/library comes along to replace it.