AE animations on scroll?
- Started
- Last post
- 13 Responses
- mg33
I've been browsing the web tube for some info, but wondering if any of you have recommendations from experience for the best way to handle layer-based animations in HTML.
We're looking at the ability to build stuff in After Effects and display on scroll. What are the best ways to do this?
Been looking into Lottie and Bodymovin plugins, planning to talk to a dev resource as well but figured someone here has done this kind of thing and might have a suggestion.
- Hayoth0
Probably videos that load when you hit a certain coordinate?
- dee-dubs0
apple have done this a few times.. i seem to remember someone doing a breakdown of how they did it..
- helloeatbreathedrive4
I don't know about a breakdown but I love this;
- Damn that is slick and great on mobile!mg33
- This is awesomedbloc
- Is this the kind of thing you are trying to do mg?dbloc
- nice but weird. it looks like an overlay canvas is doing all the tricks. thats the one what actually changes on scroll.sted
- dbloc - more or less, yes. Less words / more images and motion for content we produce.mg33
- dee-dubs1
Found one
- feel0
bodymovin and lottie has commands like gotoAndPlay, playback, pause and other commands so you can control it with other code
- antimotion0
Sony be moved breakdown
Not sure if actual site is still up but it was impressive for sure:
- PonyBoy0
Have you taken a look at ScrollMagic / Greensock (GSAP)?
lottie ties your hands a bit from an interactive pov... packed w/pre-generated data that can't be changed dynamically (at least last time I checked).
- I will be. I got curious about Lottie because it works in Webflow along with AE.mg33
- Greensock is heavy for this.sted
- I respectfully disagree, set :) GSAP is used on over 10M sites and is accessed via a simple CDN—chances are most users going to his site already have it cachedPonyBoy
- Not to mention the entire size of GSAP is tiny in comparison to the JSON files you have to load from your own serverPonyBoy
- ... or are you not talking about load time / file size at all but instead the possible learning curve for whomever to do what they wish to do?PonyBoy
- and oops... scrollmagic is completely separate of GSAP... I primarily only use it as a trigger and GSAP handles the movementPonyBoy
- evilpeacock0
This was buried in my Pinboard links collection too; Looks useful.
- mg330
Thanks for the responses.
As a follow up, I'm really just trying to wrap my head around how we can make animations in After Effects that can be easily inserted into code and triggered by user actions (scroll, load, on view, triggered on hover or click, etc.)
I definitely realize there's tons of this stuff that could be fully coded with CSS, SVG, etc. etc. but we're trying to use resources we have without resorting to heavy developer needs. Ideally, one of our devs builds a reusable module / or bit of code that only requires an hour or so of applying the triggers to the AE output (or whatever it is) so that we can insert the animation into a page (which on this particular site would be in Drupal).
- PonyBoy0
This is late to the game and you may already be well through the project (going the AE route? I'd be curious to know) but I wanted to take back my suggestion to use scrollMagic as a trigger...
Try Waypoints: http://imakewebthings.com/waypoi…
...triggers perfectly... you can scroll to any class / ID and still use GSAP as your animating tool.I'm in the middle of working on something w/our long lost qbner 'cosmo' utilizing this... I'll try and share when the time comes (if we're allowed).
- this page works as a simple demo:
http://imakewebthing…PonyBoy
- this page works as a simple demo:
- evilpeacock0
This is one of the better video on scroll tutorials I've seen, just published two days ago: