Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock last won the day on July 24 2019

GreenSock had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


GreenSock last won the day on July 24 2019

GreenSock had the most liked content!

Community Reputation

8,117 Superhero

About GreenSock

  • Rank

Contact Methods

Profile Information

  • Gender
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

49,059 profile views
  1. GreenSock

    Flip Plugin

    The Flip Plugin seamlessly animates between states dynamically with minimal code. The video explains more... VIDEO All you need to do is get the initial state using Flip.getState(targets), make whatever changes you'd like to the DOM or styling, and then call Flip.from(state). GSAP handles the rest! Of course like all GreenSock tools, there's a rich API for finessing things and getting exactly the look you want. "FLIP" is an animation technique that stands for "First", "Last", "Invert", "Play" and was coined by Paul Lewis. Here's a demo of how it works: See the Pen How GSAP'
  2. GreenSock


    If you'd like the inbetween values in a tween to always get snapped to the nearest value in a given array or increment, use the snap special property. Just pass in an object with the property that you want to snap and the value(s) that you want it to snap to. For example, if you're tweening the x, y, and alpha properties of an object and you want to snap the x and y values (not alpha) every time the tween is rendered, you could do something like this: gsap.to(element, {duration: 2, x: 300, y: 200, alpha: 0.5, snap: { x: 50, // Snaps to the nearest incrememt of 50 (0, 50, 100, etc.) y:
  3. GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about. Here's an overview of what's new. What to do first Read about all the exciting improvements: "Top 5 Features of GSAP 3" "GSAP 3 Release Notes" - All the juicy details (warning: it's long) View the GSAP 3 Documentation Look at some demos for inspiration Start animating! GSAP 3 Starter Pen - Play around with GSAP 3 in CodePen! This pen allows you to copy the resource URLs easily. You can
  4. GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about, but to keep this post manageable, we’ll cover only 5. You might also be interested in the GSAP 3 highlights video. See the release notes for all the juicy details. 1. Half the size of the old TweenMax! No kidding! GSAP retains almost all of its old functionality while adding 50+ features. We’ve learned a lot over the years and hopefully that shows. The core has been completely rebuilt from the ground up as modern ES modules. 2. Simplified API No more “Lite” and
  5. GreenSock

    GSAP 3 Release Notes

    Quick links Resources Half the file size of the old TweenMax! Simplified API Backward compatibility Set defaults on timelines that get inherited by child tweens Advanced staggers everywhere MotionPathPlugin (replaces BezierPlugin) New random(...) capabilities Get property values, with unit conversion capabilities New "effects" extensibility Keyframes Relative ">" and "<" position prefix Animate to a width/height of "auto" New "repeatRefresh" feature New then() method that returns a Pro
  6. MotionPathHelper is a Club GreenSock utility that enables you to edit paths directly in your browser and not have to go back and forth between a graphics editor and your browser. Try it out! For more information, check out the MotionPathHelper docs.
  7. Easily move any element along a path, whether it's an SVG <path>, a list of points, or a bezier curve. Learn more in this video: GreenSock club members also gain access to the MotionPathHelper utility. For more information, check out the MotionPathPlugin docs.
  8. GreenSock


    InertiaPlugin allows you to smoothly glide any property to a stop, honoring an initial velocity as well as applying optional restrictions on the end value. You can define a specific end value or allow it to be chosen automatically based on the initial velocity and ease or you can define a max/min range or even an array of snap-to values that act as notches. InertiaPlugin even integrates VelocityTracker so that you can have it "watch" certain properties to keep track of their velocities for you and then use them automatically when you do a inertia tween. This is perfect for flick-scrolling or a
  9. The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See why GSAP is used by over 8,500,000 sites and many major brands. Hang in there through the learning curve and you'll discover how fun animating with code can be. We promise it's worth your time. Quick links Loading GSAP Tweening Basics CSSPlugin 2D and 3D transforms Easing Staggers Callbacks