Leaderboard

Hi and welcome to the GreenSock forums. The demo below should give you an idea of how something like that is set up http://fiddle.jshell.net/Zuriel/qGcd9/?utm_source=website&utm_medium=embed&utm_campaign=qGcd9

Hi and welcome to the GreenSock forums, Thanks for the demo. Stuff like this where you want a bunch of different transitions on the same elements isn't always as straightforward as you might think. It can get kind of messy taking existing timelines and then trying to put them in different timelines at different times especially if you are reversing them. Once you put user interaction into the mix and let people jump to any state at any time it just gets complicated. For situations like this its probably better to create your animations on the fly. In basic terms you can create functions that create animations for animating certain elements out, and certain elements in. So you might call a function that creates your "AnimateLoadingOut" timeline and then call a function that creates your AnimateErrorIn timeline. You can glue the timelines that those functions create together into a parent timeline. Again, it isn't exactly easy to do or explain quickly. The article below is packed with information on the technique of using functions to create timelines. https://css-tricks.com/writing-smarter-animation-code/

Hi @OSUblake, Based on your pen (Motion Path Callbacks) I had this idea - still in progress: 'On foot' - that means: classically with my knowledge - I can control the process well. But your camera should be the next trigger ... Thanks and kind regards Mikel

Hi and welcome to the GreenSock forums, I couldn't open your video file. Apparently QuickTime (Mac) doesn't like it. Not exactly sure of the effect you want. Animating the position of div corners isn't really a standard thing. But if you want to do something like: http://jsfiddle.net/ajgagnon/traebhhe/5/ It uses GSAP and perspectivetransform.js which you can read about here: https://github.com/edankwan/PerspectiveTransform.js Is there something on youtube or another site that can help us better understand the effect you are after?

I thought your circle based camera was pretty creative. Unfortunately, it won't for every situation. Understanding how the camera I made is pretty simple. There are 3 components that you need to deal with. The viewport. The viewable area. What you can see. Basically a container, with overflow: hidden on it. The world. It should be larger than the viewport, and is the parent container for everything. The target. What you want to follow. It moves around the world. And the rest is basically just knowing how to center a rectangle inside another rectangle. For those that don't, or need a refresher... // Coordinates to center the smallBox inside the bigBox var x = bigBox.width / 2 - smallBox.width / 2; var y = bigBox.height / 2 - smallBox.height / 2; // Or even simpler var x = (bigBox.width - smallBox.width) / 2; var y = (bigBox.height - smallBox.height) / 2; We want the target to remain in the center of the viewport, so every time it moves, we'll need to update the camera. So start off by figuring out the coordinates to center it, just like above. The target is moving around the world, so we can't move the target to those coordinates. Rather, we need to find out how far away the target is away from those coordinates, and then move the world by that difference. That will move the target into place, and now you have a functioning camera! var x = (viewport.width - target.width) / 2; var y = (viewport.height - target.height) / 2; var dx = x - target.x; var dy = y - target.y; world.x += dx; world.y += dy;

Hi @hendrikeng, surely this pen gives you some suggestions. $ (this) is part of the solution ... Happy tweening ... Mikel

What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. ? AdjustmentFilter ? CRTFilter ? GlitchFilter ? ReflectionFilter ? KawaseBlurFilter ? RadialBlurFilter ? MotionBlurFilter ? OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.

Hi, I re-found this library that was recently revamped and it appears to work in IE using intersect observer... demo: https://russellgoldenberg.github.io/scrollama/basic/ repo: https://github.com/russellgoldenberg/scrollama info: https://pudding.cool/process/introducing-scrollama/

This thread has several examples that might be worth checking out. I think there was another thread similar to it, but I can't find it at the moment.