There are a number of plugins available to use with GSAP to enhance web animation; from visuals to behind the scenes, advances in technology certainly have opened up the animation sector in the last few years.
3D Parallax Photo Carousel
The “Parallax effect” has become really popular of late, most likely because it looks so spectacular when it’s in use. The 3D Parallax Photo Carousel plugin (developed by creativeocean) makes creating this effect easy, with easily editable smart custom controllers and templates.
What is a “Parallax effect”
This is where the illusion of depth is created for the user as the page moves. Users have to scroll to see it, which makes for a smooth browsing experience as there are no sudden movements, the user is fully in control of how the page moves and reacts.
- Built using GSAP, jQuery & CSS/CSS3
- Touch enabled
- Parallax effect in movement
- Rotates images along a 3D ring
- Watercolour titles
ScrollTrigger allows you to animate in a number of environments including DOM, SVG, CSS, Canvas….it’s an extremely versatile plugin that allows ScrollTrigger areas to control whether animations play, pause, resume, complete, restart and so on.
ScrollTrigger is built on GSAP and offers maximum performance for all types of areas including updates, intersection points, transforms and the GPU.
- Pin elements in place
- Keep animations in view during scrolling
- Callback system
- Supports both horizontal and vertical scrolling
- Tracks velocity
- Automatic resizing
- Function based start/end values
The Flip Plugin was introduced last year with the GSAP 3.6 update and aids coding for UI transitions, something that has historically been a headache inducing task. Flip gives seamless transitions between two states, even accounting for things like re-parenting of elements which would normally cause jumps to new positions and sizes.
You do have to be a member of Club GreenSock (Shockingly Green level, currently £69 per year) to access this plugin, but if this is you then Flip is well worth a look!