What is Reddit's opinion of GSAP?

From 3.5 billion Reddit comments

It's build on GSAP which is an HTML Animation library:

http://greensock.com/gsap

Essentially a combination of TweenLite, a combined set of SVGs encoded in Base64, and a ScrollTo plugin to control the timeline.

Check out GSAP. Great JS library for consistent-looking animations across all browsers. It plays nicely with SVGs, is speedy, and it's got a ton of solid documentation. It's also used by Google and a whole slew of other big name companies for their site animations.

Yep. I'm afraid there's no easy way. You can check out some animation libraries like Velocity or GSAP to help you, but you have to write the logic and animation yourself.

If you could make us a little gif of the animation, we may be able to help you better.

From time to time I tackle HTML5 banners.
I've got two ways, depending on the file size restrictions:
under 50kb → CSS Keyframe animations, simple stuff only.
above 50kb → Gsap

GSAP from http://greensock.com/gsap is SO FAR beyond the alternatives it's almost sad. The tween system is much better than the one in D3 even. I currently don't use it because it's commercial and I'm like a socialist hippie, but if I were still making things at a commercial studio I'd use it in a heartbeat.

I'd use this http://greensock.com/gsap

It offers a timeline library and you can set the timeline progress via javascript so its easy to set the timeline progression to any sort of control you want, including scrolling. There are even some libraries built on top of GSAP specifically for scrolling but I have never used them.

An effect like this really has nothing to do with react and the problems it's trying to solve.

Don't. jQuery is an animation stop gap that isn't performant. You're better off going straight to a library that is specifically designed for animations. One option is VelocityJS that uses jQuery syntax and is pretty small in size. GSAP probably has the most feature rich tweening library available but may be overkill for what you need.

The documentation for both are really good and come with lots of worked examples.

code-wise, quickest/easiest is to use greensock's MP3Loader
1. download greensock package here
2. copy com folder and mp3 file to where your fla is
3. in your code:

import com.greensock.loading.MP3Loader;

var soundpath:String="bgmusic.mp3" var soundloader:MP3Loader = new MP3Loader,{repeat:-1,autoPlay:true}); // repeat -1 to keep looping soundloader.load(); // music should load and autoplay

then to control it:

soundloader.pauseSound() // to pause
soundloader.playSound() // to play
soundloader.volume = 1 // to set volume between 0-1
soundloader.soundPaused // check to see if it's paused

Ah I see. Yes, CSS is VERY important to know, and you should get to know it intimately. I would also learn some basic Javascript, even if coding isn't your forte - as it will strengthen your understanding of how the DOM is structured and how to control elements, either stylistically or with animation. Also, I'd recommend using the greensock library if you're going to be using animation - it's lightweight, extremely powerful/robust and is leaps and bounds better than jquery which is bloated and clunky.

• jQuery animations are not performant. If you intend to create an animation heavy website be sure to either use CSS3 or JS libraries specifically setup to leverage hardware acceleration and the requestAnimationFrame API (eg: GSAP, velocityjs) otherwise anything beyond basic transitions will be janky.

• Animations that are triggered by a scroll action need to be debounce or throttled in some way since scrollEvents often fire far more rapidly and continuously than is useful. This will seriously impact performance if rate limiting is not taken into consideration.

• Graceful degradations/Progressive Enhancements are term devs ignore more and more but you should be providing a base line for users to access your content if your high-end implementation makes the site un-usable for non-top end hardware. This includes pretty much all mobile devices. Parallax is still poor on mobile and work-arounds to make it not-so have consequences for content layout and expected native scrolling behaviour.

• Scroll-jacking is an anti-pattern that will infuriate your users.

• Frame rate drops on initial load are a symptom of blocking script loads and loading assets. Care needs to be taken on minifying code, reducing http requests via JS compilation, asset spritesheets etc and staggering initialisation of effects till they are required.

• There is a general consensus that parallax effects are over-used. They're not necessarily a bad effect but like any popular web design feature they should be used sparingly and when appropriate. Personally, I think the only beneficial use cases for a fully parallax are for truly brochure websites that have little to no actual content and interactive web comics / art projects / data-visualisation where content is purely graphical. Beyond that a subtle parallax effect on ONE header element is all I can stomach in the wild.

For anyone coming here via searches later; they are indeed using NodeCG, and the code will be open sourced after the event like the AGDQ15 overlay was: https://github.com/gamesdonequick

(Also, take a look at GSAP, it's very powerful for complex animations and precise timing)

Do you want it animated like in Hearthstone? If so I recommend you find an animation lib (first google result) -

For displaying the cards:

1. You will need Image assets for all the cards obviously.
2. show the card with the ID of the card that user clicks
3. ??
4. done

In this case they are mostly using a fullpage plugin like the one from Alvaro that someone linked already coupled with GSAP JS animations that get executed when the "onComplete" functions from the fullPage plugin are called.

If you really needed to get it working in ie8 you should use something like gsap.

Otherwise you could use the example you have and that should (double check) gracefully degrade and turn off it's effect for ie8. (due to transition and transform not existing in ie8)

Coding by hand is your best bet here. Working in the same field, I use HTML with jQuery, and almost always have GSAP included for animation. Of course this depends where you're hosting it from.

Edge is, in my experience, far too heavy/unnecessarily complicated (not to mention bloated) for simple banners, and will hopefully not be pushed as much as Flash was.

Oh, got it lol. That's a pretty broad question. There are a lot of techniques that get used. Here is a good place to start though. You can build animations as timelines and then use scroll values to move through them.

special effects on text that things like gsap has. http://greensock.com/gsap

I love it a lot. So it might be something like text fades in and out, or while in dialogue text fades in letter by letter.
Might sound incredibly simple to you, but I really like this and I was looking for an engine that has things like that I could take advantage of. Why do you recommend scene2d in libgdx? How does it help with UI's?

Side note: I have come to the conclusion that if your considering using Velocity.js in a project... you should really use GSAP instead. I get the appeal of Velocity but GSAP is 100x more powerful and absolutely worth spending a little extra time to learn its api. (Velocity replicates the jQuery animate api almost exactly).

GSAP is the new industry standard for any kind of animation, SVG or otherwise: http://greensock.com/gsap

You're in luck, they just previewed a shape/path morphing plugin! Not released yet AFAIK https://www.youtube.com/watch?v=Uxa9sdaeyKM&feature=youtu.be

Personally I would recommend gsap

Get something along the lines of what you need running in codepen (or even just the barebones css and html) and I will take a look and help you further

For HTML5 based animations, I use Greensock's GSAP extensively. It can be small or large library wise, and doesn't require jQuery, though you can use it to make object selecting easier.

Yes, it's a hand-coding library, but if you've ever used their library for Flash, that will make it easy to pick up.

I haven't looked into a timeline-based tool yet for animation since there's a lot of restrictions with banner work that I do, but supposedly you can output an animation created in Flash to HTML5 animation. Give it a try with things you've already created.

Or try google's SWF to HTML5 converter. It's pretty impressive.

You may want to use something like the GSAP library.

For mouse speed, you will have to detect the movement vector and adjust the timescale of the animation.

This won't be easy. Hope you're prepared.

> I was recently working with a lot of CSS animations and transitions and discovered that there's not really a good way to successively chain animations in a performant way

What's wrong with -webkit-animation-delay, webkitAnimationEnd (and other vendor-specific versions)? (Serious question, you say there's not a good way I'm wondering if you found problems with these)

Also, have you looked at gsap?

There's a lot of interesting stuff on the front end to learn about. Some newer things include:

• Mobile/responsive stuff
• CSS animations
• JS animations (like gsap)
• react.js
• Polymer Web

I too am looking for a Javascript framework, or still debating if ever need to use one. Angular seems interesting. So much to learn, not enough time!

I'm mostly a backend guy, but also interested in front end stuff.

If you're an oldschool Flash guy who used a lot of Greensock's libraries for animations, you might want to take a lot at his JS versions, which share much of the same functionality/methods as the older Actionscript versions: http://greensock.com/gsap

Between that, SVG artwork, and a bit of compositing via CSS or canvas, you should be able to do a lot.