Jump to content

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

Search the Community

Showing results for 'normalize lerp clamp'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi, I'm new here. I'm trying to figure out how to realize what's in the link rallyinteractive. However, I have some troubles in clamping the color block in the middle. Any help would be appreciated.
  2. 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 Promise New SnapPlugin (included in the core) Access/control the global timeline translateX, translateY, rotate, rotateX, and rotateY aliases You can define units for x/y transforms Built as modern ES6 modules with exports Utility methods Other improvements and changes How do I get it? What was REMOVED? Other notes Ready to play? Questions? Bugs? Resources GSAP 3 Highlights video - Learn more about a few of the features we think you'll like most about GSAP 3 GSAP 3 Starter Pen - Play around with GSAP 3 in CodePen! This pen allows you to copy the resource URLs easily. Download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in the local download above that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. Half the file size of the old TweenMax! No kidding! It retains virtually all of the old functionality while adding 50+ features (as you'll see below). Simplified API No more "Lite/Max" flavors. TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated into a single "gsap" object. So simple! For example: //simple tween like the old TweenMax.to(...) gsap.to(".class", {duration:2, x:100}); //create a timeline and add a tween var tl = gsap.timeline(); tl.to(".class", {duration:2, x:100}); Internally, there's one "Tween" class (replaces TweenLite/TweenMax) and one "Timeline" class (replaces TimelineLite/TimelineMax), and both have all of the features like repeat, yoyo, etc. When you call one of the gsap methods like .to(), .from(), etc., it returns an instance of the appropriate class with easily chainable methods. Duration is now defined in the vars object (the old syntax still works). This offers several benefits: Improved readability It fits much better with keyframes It allows default durations to be inherited (more on that below) You can use function-based values //OLD - duration was 2nd parameter TweenMax.to(".class", 1, {x:100}); //NEW - duration is now a property of the vars object gsap.to(".class", {duration:1, x:100}); Shortened string-based eases - less typing, more readable, and zero import hassles. Here's the new convention for all of the standard eases: //OLD ==> NEW Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor Elastic.easeIn ==> "elastic.in" Elastic.easeInOut ==> "elastic.inOut" Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)" //and the other configurable eases are much easier!: SteppedEase.config(5) ==> "steps(5)" SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)" RoughEase.ease.config({points:40}) ==> "rough(40)" ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)" Backward compatibility The new GSAP even adjusts itself to accommodate the old syntax! There's technically no more TweenMax, TweenLite, TimelineLite, or TimelineMax, but they're all aliased so that the vast majority of legacy code still works, untouched! You don't have to rewrite all your code to use GSAP 3, but we'd recommend shifting to the new, more concise syntax for all your new projects. Set defaults on timelines that get inherited by child tweens You don't have to keep setting the same ease over and over again...or duration...or whatever. Just set defaults on the parent timeline: gsap.timeline({defaults:{ease:"back", duration:2}}) .to(".class-1", {x:100}) //inherits the ease and duration from the parent timeline! .to(".class-2", {y:200}) //this one too Any defaults you set this way will get pushed into every child tween - it's not limited to a certain subset of properties. Advanced staggers everywhere There's no need for the old staggerTo()/staggerFrom()/staggerFromTo() methods because you can add staggers to regular tweens: gsap.to(".class", { x:"+=100", duration:1, stagger: 0.5 //simple stagger of 0.5 seconds }); //or get advanced: gsap.to(".class", { x:"+=100", duration:1, stagger: { amount:2, from:"center", grid:"auto", onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween } }); Don't worry - the stagger methods are still there to support legacy code. MotionPathPlugin (replaces BezierPlugin) Turn any SVG <path> into a motion path! There's even a MotionPathHelper utility that lets you EDIT your own path interactively in the browser (club members only)! Watch the video: The basic playground from the video is at: https://codepen.io/GreenSock/pen/9bdac66e1cb0ad0aa24396565f340e9c?editors=0010 Features: autoRotate along the path. Offset by any amount. Animate from any spot along the path to any other spot using "start" and "end" progress values like start:0.3, end:0.8 to animate from 30% along the path to 80%. you can even loop around (like end:1.5) or go backwards! Align the target with any other element, like make a <div> line up perfectly with an SVG <path> or another element, and start animating along the motion path from there. Feed in an array of values to have it build a motion path that goes through them. It doesn't even have to be "x" and "y" values - it can be almost any property of the target. You can even control the "curviness" of that path that gets plotted. There are some utility methods attached to MotionPathPlugin like stringToRawPath(), rawPathToString(), getRawPath(), sliceRawPath(), transformRawPath(), and pointsToSegment(). MotionPathPlugin will be in the public files, and the MotionPathHelper utility will be a members-only perk. New random(...) capabilities Define random values in a string as a range (like "random(-100, 100)") or an array (like "random([red, blue, green])") and GSAP will swap in an appropriate random value for each target! This makes advanced randomized effects crazy simple. You can even have the random number rounded to the closest increment of any number! For example: gsap.to(".class", { x:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 5! }); Or pass in an array-like set of values and GSAP will randomly select one of those: //randomly selects one of the values (0, 100, 200, or 500) x:"random([0, 100, 200, 500])" There's also a gsap.utils.random() function that you can use directly if you prefer. We'll cover the utility methods later. Get property values, with unit conversion capabilities gsap.getProperty("#myElement", "backgroundColor"); gsap.getProperty("#myElement", "x"); //works with GSAP transform properties too. This would return something like "100px" Pass a unit as the 3rd parameter and GSAP will return the value converted for you! gsap.getProperty("#element", "width", "em"); //returns the width in em units! (for CSS values only) If you omit the unit parameter, it will return a NUMBER (at least for simple values where parseFloat() returns a number). For example, a "top" or "left" or "x" property that's technically "20px" would be returned as 20 (no unit suffix) because it's so common to need to deal with numbers in animation. In practical use, it would be annoying to get values like "20px" back from getProperty() and have to manually wrap it in parseFloat(). But again, if you want the unit included, just pass in that unit like gsap.getProperty("#element", "x", "px"); New "effects" extensibility You can author a function that does custom animation and then make it into a named effect that can be called anytime with new targets and configurations. So, for example, think of writing an “explode” effect yourself (a function that accepts targets and a configuration object and spits back an animation/timeline). You define it once, and call it anytime, like: gsap.effects.explode(".class", {speed:25}); GSAP wizards can build crazy-cool effects that folks can simply copy/paste into their project once and then trigger effects easily directly through GSAP. Here's a super-simple "fade" effect to show the concept: // register the effect with GSAP: gsap.registerEffect({ name: "fade", defaults: {duration:2}, //defaults get applied to the "config" object passed to the effect below effect: (targets, config) => { return gsap.to(targets, {duration: config.duration, opacity:0}); } }); // now we can use it like this: gsap.effects.fade(".box"); GSAP is providing 3 key services here: It parses the “targets” into an array. So if selector text is passed in, it becomes an array of elements passed to the effect function. It applies defaults to the vars object for you. No need to add a bunch of if statements or do the defaults yourself. It provides a centralized way of registering/accessing these “effects”. You can think of it almost like jQuery plugins, but for GSAP-based animation effects. Keyframes If you have one set of targets that should animate to various states, instead of creating a whole new tween for each one (re-defining the same targets each time), you can pass an array of keyframes (vars objects) and they'll be perfectly sequenced. Use a "delay" value to create gaps/overlaps!: gsap.to(".class", {keyframes: [ //<-- an array of keyframes! {x:100, duration:1}, {Y:200, duration:1, delay:0.5}, //create a 0.5 second gap {rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds ]}); These keyframes are basically like individual tweens, so you can even use callbacks like onStart, onComplete, etc. Relative ">" and "<" position prefix When building out a timeline sequence, it's VERY common to want to place the next animation relative to the previous tween's start or end. Since the default behavior is to put things at the end of the timeline, it's usually easy to get that effect, but what if you want the next tween to start at the same time as (or like 0.2 seconds after) the previously-inserted one? What do you do? I bet you either slap a label in there and keep referencing that label. Or maybe you memorize time stamps. Or if you're like me, sometimes you even look at the duration and do the math ("the duration of the previous one is 1 second, and I want it to start 0.2 seconds after that one starts, so I'll do "-=0.8" and pray that I don't need to mess with the timings very much and remember to edit in 2 places"). In GSAP 3 there's a better way. There are now these prefixes for the position parameter in timelines: "<" references the most recently-added animation's START time ">" references the most recently-added animation's END time And you could optionally offset things with numbers too. Examples: var tl = gsap.timeline(); tl.to(...) .to(..., "") //starts immediately after the previous tween's end time (sequenced) .to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative) Think of them like pointers - "<" points to the start, ">" points to the end (of the most recently-added animation). Why do we even need ">"? Imagine a scenario like this: tl.to(... {duration:10}) .to(... {duration:2}, "-=10") //starts way earlier .to(...) // See the issue? Since it's tacked onto the end of the timeline, that's actually at the end of that first 10-second tween, NOT the 2nd tween. It's the correct behavior, but when you're animating it's often very handy to be able to insert things relative to the most recently-added one. Animate to a width/height of "auto" This sounds simple, but it can be very handy when you're expanding something to whatever size would naturally fit its contents. New "repeatRefresh" feature Setting repeatRefresh:true causes a repeating tween to invalidate() and re-record its starting/ending values internally on each iteration. This is only useful when you use dynamic values (relative, random, or function-based). For example... gsap.to(".class", { duration: 1, repeat: 5, repeatRefresh: true, //<- forces things to refresh each repeat iteration x: "random(-100,100)",//now x will go to a different random value on each repeat y: "+=50" //and y will keep moving 50px further down on each repeat }); Note: duration and delay do NOT refresh on each iteration. New then() method that returns a Promise Some people prefer to use Promises instead of onComplete callbacks. You can now tag on a then() call to the end of any tween/timeline that'll return a Promise. gsap.to(".class", {duration:1, x:100}).then(yourFunction).then(...); New SnapPlugin (included in the core) Think of this as a replacement for RoundPropsPlugin (still in the core for backward compatibility) but with a more intuitive name and more features. It basically adds a modifier to any property that implements one of the following snapping behaviors to every value DURING the tween (live, not just to the end value): //snap to an increment: gsap.to(".class", { x: 1000, snap: { x: 20 //x snaps to the closest increment of 20 (0, 20, 40, 60, etc.) } }); //snap to the closest value in an array: gsap.to(".class", { x: 1000, snap: { x: [0, 50, 150, 500] //x snaps to the closest value in this array } }); //snap to a value in an array, but only when it's within a certain distance/radius of one of those values: gsap.to(".class", { x:1000, snap: { x: {values:[0, 50, 150, 500], radius: 20} //x snaps to the closest value in the array but only when it's within 20 pixels of it. } }); You can define as many snap properties as you want. Access/control the global timeline gsap.globalTimeline.timeScale(0.1); //slow everything down gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls() translateX, translateY, rotate, rotateX, and rotateY aliases To better match the names that most developers are used to in CSS, "translateX", "translateY", "rotate", "rotateX", and "rotateY" are mapped to x, y, rotation, rotationX, and rotationY. So, for example, you can do this: gsap.to(".class", { translateX: 100, // same as x:100 translateY: 100, // same as y:100 rotate: 360 // same as rotation:360 }); And yes, directional rotation values work for DOM elements: rotation:"270_short" //animates in the shortest direction! rotation:"270_cw" //animates clockwise rotation:"270_ccw" //animates counter-clockwise You can define units for x/y transforms gsap.to(".class", { x:"50vw", //units! (default is px) y:"5em" }); GSAP 3.0 no longer leverages matrix() and matrix3d() for CSS transforms which is why it can accommodate units like this. Built as modern ES6 modules with exports Nuff said. And of course there are browser-friendly, minified ES5 files provided as well. Utility methods GSAP exposes some very useful utility methods. Many of them can even return functions so that they can be plugged directly into tweens and leverage GSAP's function-based capabilities meaning they'll get called once for each target (rather than just using the same end value for them all). The included functions are checkPrefix(), clamp(), distribute(), getUnit(), interpolate(), mapRange(), normalize(), pipe(), random(), snap(), splitColor(), toArray(), unitize(), wrap(), and wrapYoyo(). Below is a demo that covers several of the utility methods. Check out the utility methods docs for more info! And here's one that demonstrates how to build your own custom plugin (in this case, it's an unofficial BlurPlugin): Other improvements and changes gsap.getById() - when you assign an id to an animation, you can find that instance by id. The core engine will find colors inside complex strings and animate them properly (no plugins necessary). And of course it'll find all the numbers inside complex strings and animate those as well. function-based values receive a 3rd parameter - the entire array of targets from the tween. This can be useful for advanced effects. gsap.to(".class", { x: function(index, target, targets) { return index * 50; } }); timeScale() can go negative! That’s essentially what “reverse()” does under the hood. yoyoEase gets applied by parent timelines when they yoyo (only if the tween that has the yoyoEase doesn't have a repeat of its own, otherwise you'd get compounded yoyoing). This may sound complex, but it's super convenient and intuitive when you try it. Just create a timeline with a repeat & yoyo, then drop a tween into it that has a yoyoEase defined and you'll see how it works. New iteration() method that lets you get/set the iteration number of a repeating animation. overwrite is false by default, and all other overwrite modes have been eliminated except: "auto" - looks for other active tweens and only kills duplicate/conflicting properties true - immediately overwrites all tweens of the same target(s) regardless of whether or not there are duplicate/conflicting properties. Why make this change? Overwriting caused confusion for some folks and could be tricky to troubleshoot, so it seemed prudent to have users opt-in. Of course you can change the default mode with gsap.defaults({overwrite:"auto"}); (in GSAP 2.x and earlier, "auto" was the default) nextLabel(), previousLabel(), and currentLabel() methods in Timelines (previously getLabelAfter(), getLabelBefore(), and currentLabel()) New read-only tween.targets() method that returns an array of the targets (previously the API didn't provide a way to access the targets of a tween instance). gsap.updateRoot(time) lets game developers update the root timeline manually (after unhooking it from GSAP's ticker). Listening for tick events has been streamlined: //OLD: TweenMax.ticker.addEventListener("tick", yourFunction); TweenMax.ticker.removeEventListener("tick", yourFunction); //NEW: gsap.ticker.add(yourFunction); gsap.ticker.remove(yourFunction); The callback also gets passed some valuable information as parameters: time, deltaTime, and frame (in that order) ModifiersPlugin is baked into the core, as is SnapPlugin, RoundPropsPlugin, EndArrayPlugin and AttrPlugin. And yes, it's still half the size that TweenMax 2.x was. ease:"linear" is a shortcut for the old ease:Linear.easeNone (which still works). ease:"none" also works. In advanced staggers, grid:[columns, rows] is flip-flopped to grid:[rows, columns] to follow convention with 2D arrays. TextPlugin, ScrambleTextPlugin, and SplitText all handle even complex Emojis now. onOverwrite was removed in favor of a new onInterrupt callback that fires if/when the tween is killed before it completes. This could happen because its kill() method is called or due to overwriting. Defaults have been consolidated to 2 methods. So instead of TweenLite.defaultEase, TweenLite.defaultOverwrite, TweenLite.defaultStringFilter, etc., there is now gsap.defaults({ease:"power2.in", duration:1}) //for tween-related default (stuff you'd pass in via vars objects) gsap.config({autoSleep:120, force3D:"auto"}); //for other, more general settings. How do I get it? GSAP 3 Starter Pen - Play around with GSAP 3 in CodePen! This pen allows you to copy the resource URLs easily. You can point your CodePens GSAP 3 core: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Or download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in the local download above that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. What was REMOVED? BezierPlugin - replaced with MotionPathPlugin (not in the core). RoughEase, SlowMo, and ExpoScaleEase. These will be to put into an external option - they just seemed so rarely used that it wasn't worth the kb cost for everyone. cycle support. It has been replaced by gsap.utils.wrap(). skewType. It’s all just “normal” CSS-style skewing (not “compensated”) “useFrames” (I doubt more than 20 people ever used that feature anyway) className tweens. CSSPlugin.cascadeTo() “{self}” reference in params. Seemed like a waste and almost nobody uses it, especially since by default callbacks are scoped to the tween/timeline instance anyway. “scope” values at all (except callbackScope). So no onCompleteScope, onUpdateScope, onStartScope, etc. There's no TweenMax.updateTo() or TweenMax.killChildTweensOf() methods. No more TweenLite.selector or TweenMax.selector (it's pointless with document.querySelectorAll() that's in browsers now). No Timeline.addCallback() method (it overlaps in functionality with Timeline.call(), or you can even use add() to add a simple callback with no parameters). MorphSVG's pathDataToRawBezier() method - use rawPathToString() instead. The new Ease() constructor in favor of the new gsap.registerEase(). Draggable's "scroll" | "scrollTop" | "scrollLeft" types. TweenLite.defaultEase, TweenLite.defaultOverwrite, TweenLite.defaultStringFilter, etc. There is now gsap.defaults() and gsap.config() where you can change these properties: gsap.defaults({ease:"power2.in", duration:1}) //for tween-related default (stuff you'd pass in via vars objects) gsap.config({autoSleep:120, force3D:"auto"}); //for other, more general settings. TweenMax.pauseAll(), TweenMax.resumeAll(), and TweenMax.globalTimeScale() are gone in favor of directly accessing methods on the globalTimeline: gsap.globalTimeline.pause(); gsap.globalTimeline.resume(); gsap.globalTimeline.timeScale(0.5); Other notes To avoid tree shaking issues and avoid fancy instantiation tricks, users should register any plugins that aren't in the core before using them, like: //list as many as you want. It doesn't hurt to register the same one multiple times. No need to include ones that are in the GSAP core like CSSPlugin, AttrPlugin, ModifiersPlugin, SnapPlugin, EndArrayPlugin, and RoundPropsPlugin. gsap.registerPlugin(MotionPathPlugin, TextPlugin); You can directly access the "labels" object of Timeline instances to get the key/value pairs. ThrowPropsPlugin has been renamed InertiaPlugin and has some new features. lagSmoothing() is applied directly on the ticker, like: gsap.ticker.lagSmoothing(false); FAQ How did you cut the file size so much? Removed BezierPlugin, RoughEase, SlowMo (ease), and ExpoScaleEase from the core, but all of those eases (RoughEase, SlowMo, and ExpoScaleEase) are in a separate EasePack file that's only about 1kb gzipped. Dumped legacy code for thing like IE8 and workarounds for very old browsers. Removed some of the complex math code involved in building matrix() and matrix3d() values from scratch in favor of using native strings like translate(), rotate(), rotateY(), etc. in CSS transforms. Handle fewer edge cases where it's appropriate to just train users to input cleaner values. For example, the old CSSPlugin would parse things like margin:"10px 5px" to bust it out into marginTop, marginBottom, marginLeft, and marginRight internally. But it seemed appropriate to keep the core leaner and tell people to define those values individually. (Let me know if you disagree). It helped to consolidate all the Lite/Max flavors into a single Tween and Timeline class. Instead of 4 different render() methods with lots of redundancies, we only have 2 that are much more concise. Skipped inlining some things like pieces of the easing logic. Lots of refining and reorganizing code, passing around object references instead of using "this" keyword, arrow functions, and various techniques for shortening code. What old code will definitely break? Anything that references TweenMax.ticker or TweenLite.ticker (use the new gsap.ticker, and remember that to add listeners to the ticker it's much simpler - see above) Anything that references _gsTransform (use the new gsap.getProperty() method instead) TweenLite.isTweening() - it's now gsap.isTweening() TimelineLite.exportRoot() - it's now gsap.exportRoot() Anything referencing one of the removed features mentioned above, like className tweens. BezierPlugin-based animations (replaced by MotionPathPlugin). Timeline .call() method no longer has a "scope" parameter (3rd). In modern development, it just seemed unnecessary and got in the way. The "cycle" feature of the old stagger methods is gone, in favor of the new (cleaner) way explained above. timeline.getLabelTime("myLabel") has been removed. Use timeline.labels.myLabel instead. Anything that references a tween's "target" property (it's now a targets() getter that always returns an array). Anything that directly references ThrowPropsPlugin (it's renamed InertiaPlugin and it doesn't have a .to() method attached to it because it's totally unnecessary now with the new API not requiring a duration). Anything that references an ease's "getRatio()" method. Eases are pure functions now, so you'd feed the value into the ease directly, like "power2(0.25)". Do you have demos for all these cool new features? Yep! Check out the collection. We included some of our favorites below as well. GSAP 3 Logo Playground by Jack Doyle Stack Loader by Chris Gannon Race Car Island by Steve Gardner Squiggle Text Animation by Cassie Evans GSAP 3 Cube Swimmer by Pete Barr Low Poly Experiment by Chris Gannon Alien Abduction by Cassie Evans Cube Walk 3 by Pete Barr A special shout-out to @dsenneff who created the GreenSock 3 intro animation! Ready to play? GSAP 3 Starter Pen - A CodePen template that already has the GSAP 3 files loaded. Fork away and have a blast! This pen allows you to copy the resource URLs easily. Download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in the local download above that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. We will be featuring the top six GSAP 3 demos when it launches along with attribution to the creators. If you create a demo using GSAP 3 that you'd like to submit, please let us know! Questions? Bugs? Hit us up in the forums or contact us directly. Are you interested in having a GSAP employee teach your teach how to use the new version or speak at your next conference? Contact us and we'll do our best to make it happen! We'd love to hear what you think of GSAP 3. Happy tweening!
  3. Hi Kreativzirkel, "normalize OR lerp OR clamp" copy and paste in the Forums Search (see above) will present all posts and comments by BLAKE regarding this topics. Best regards Manfred
  4. I guess you don't mean the post in the current thread. But I can't find a link. I would love to read Blakes post about normalize, lerp and clamp
  5. How to create a scroll driven animation seems like a much different question than what you were originally asking. The easiest way to go about this is to learn ScrollMagic which is a very robust api for controlling GSAP animations via scroll. http://scrollmagic.io/examples/ Check out Petr Tichy's ScrollMagic resources: https://ihatetomatoes.net/?s=scrollmagic&post_type=post&ref=5 Blake has posted often about controlling animations via scroll without ScrollMagic so you could try to re-engineer some of these to suit your needs: and be sure to read this post where Blake talks all about normalize, lerp and clamp and there are a bunch of great videos to watch too.
  6. I guess you didn't see my last post from that thread. http://greensock.com/forums/topic/14912-parallax-scrolling-sections/?p=64150 I had a demo on there showing how to map values to Draggable... http://codepen.io/osublake/pen/4242b3be53fba428093ba873b7ec07af?editors=0010 I just looked at Chrysto's site. The functions he posted are actually the same ones I posted. percentToRange is lerp (linear interpolation), rangeToPercent is normalize, and right below those he had a bounds function, which does the same thing as clamp.
  7. GreenSock


    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. You can define a "modifier" function for almost any property; this modifier intercepts the value that GSAP would normally apply on each update ("tick"), feeds it to your function as the first parameter and lets you run custom logic, returning a new value that GSAP should then apply. This is perfect for tasks like snapping, clamping, wrapping, or other dynamic effects. It's completely up to you! Parameters: value, target The modifier functions are passed two parameters: value (number | string) - the about-to-be-applied value from the regular tween. This is often a number, but could be a string based on whatever the property requires. For example if you're animating the x property, it would be a number, but if you're animating the left property it could be something like "212px", or for the boxShadow property it could be "10px 5px 10px rgb(255,0,0)". target (object) - the target itself For example, change the x of one object based on the y of another object or change rotation based on the direction it is moving. Below are some examples that will help you get familiarized with the syntax. Snap rotation The tween below animates 360 degrees but the modifier function forces the value to jump to the closest 45-degree increment. Take note how the modifier function gets passed the value of the property that is being modified, in this case a rotation number. See the Pen BzJxBB by GreenSock (@GreenSock) on CodePen. Clamp with Modulus The tween below animates x to 500 but the modifier function forces the value to wrap so that it's always between 0 and 100. See the Pen BzJxBB by GreenSock (@GreenSock) on CodePen. Carousel Wrap Have you ever built a carousel and wrestled with making it loop seamlessly? Perhaps you duplicated each asset or wrote some code that moved each item back to the beginning when it reached the end. With ModifiersPlugin you can get a seamless repeating carousel with a single staggerTo()! The example below tweens each box to a relative x position of "+=500". Click the "show overflow" button to see each box get reset to x:0 when it goes beyond 500... See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen. Advanced demos We've only scratched the surface of what ModifiersPlugin can do. Our moderator Blake Bowen has been putting this new plugin to the test and has an impressive collection of demos that will surely inspire you. View the docs for ModifiersPlugin. Caveats: ModifiersPlugin requires TweenLite or TweenMax version 1.19.0 or later. RoundPropsPlugin taps into the same mechanism internally as ModifiersPlugin (to maximize efficiency, minimize memory, and keep kb down). Think of a roundProps tween as just a shortcut that creates a modifier that applies Math.round(), thus you cannot do BOTH roundProps and a modifier on the same property. It's easy to get that functionality, though, by just doing Math.round() inside the modifier function.
  8. Had this kicking around in my head for awhile so I thought I'd give it a try. Uses a tl with ScrollTo and a tween mapped to deltaY to scrub through it's progress. Has some promise maybe - some jankiness presumably due to constant firing of deltaY and the tween getting overwitten so many times but maybe there's way to throttle or normalize this to improve it? I also noticed using the scrollbar seems to make it inoperable, not sure what the relationship there is?
  9. Hi there, First post here! I'm working on a React/Gatsby app which references this tutorial. I've solved most of the issues except for the following error: TypeError: Cannot read property 'easeOut' of undefined I've tried a bunch of variations of imports destructuring etc but Quad is never defined. My code is as follows: import React, { Component } from "react" import Layout from "../components/layout" import SEO from "../components/seo" import { TweenMax, Quad, Sine, Back } from "gsap/TweenMax" const prettyLetter = require( 'pretty-letters' ) export default class IndexPage extends Component { componentDidMount() { var options = { groupClass: 'char-group-', groupTag: 'span' } prettyLetter('a', options) const lineEq = (y2, y1, x2, x1, currentVal) => { // y = mx + b var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1 return m * currentVal + b } const lerp = (a,b,n) => (1 - n) * a + n * b const distance = (x1,x2,y1,y2) => { var a = x1 - x2 var b = y1 - y2 return Math.hypot(a,b) } const getMousePos = (e) => { let posx = 0 let posy = 0 if (!e) e = window.event if (e.pageX || e.pageY) { posx = e.pageX posy = e.pageY } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop } return { x : posx, y : posy } } let winsize; const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight} calcWinsize() window.addEventListener('resize', calcWinsize) // The feDisplacementMap element const feDisplacementMapEl = document.querySelector('feDisplacementMap') class Menu { constructor() { this.DOM = { svg: document.querySelector('svg.distort'), menu: document.querySelector('nav.menu') } // The images (one per menu link) this.DOM.imgs = Array.from(Object.assign.apply(Object, [this.DOM.svg.querySelectorAll('g > image')])) // The menu links this.DOM.menuLinks = Array.from(Object.assign.apply(Object, [this.DOM.menu.querySelectorAll('.menu__link')])) // Mouse position this.mousePos = {x: winsize.width/2, y: winsize.height/2} // Last mouse positions (one to consider for the image translation movement, another for the scale value of the feDisplacementMap element) this.lastMousePos = { translation: {x: winsize.width/2, y: winsize.height/2}, displacement: {x: 0, y: 0} } // feDisplacementMap scale value this.dmScale = 0 // Current menu link position this.current = -1 this.initEvents() requestAnimationFrame(() => this.render()) } initEvents() { // Update mouse position window.addEventListener('mousemove', ev => this.mousePos = getMousePos(ev)) this.DOM.menuLinks.forEach((item, pos) => { const letters = Array.from(Object.assign.apply(Object, [item.querySelectorAll('span')])) const mouseenterFn = () => { // Hide the previous menu image if (this.current !== -1) { TweenMax.set(this.DOM.imgs[this.current], { opacity: 0 }); } // Update current this.current = pos // Now fade in the new image if we are entering the menu or just set the new image's opacity to 1 if switching between menu items if (this.fade) { TweenMax.to(this.DOM.imgs[this.current], 0.5, { ease: Quad.easeOut, opacity: 1 }) this.fade = false } else { TweenMax.set(this.DOM.imgs[this.current], { opacity: 1 }) } // Letters effect TweenMax.staggerTo(letters, 0.2, { ease: Sine.easeInOut, y: this.lastMousePos.translation.y < this.mousePos.y ? 30 : -30, startAt: {opacity: 1, y: 0}, opacity: 0, yoyo: true, yoyoEase: Back.easeOut, repeat: 1, stagger: { grid: [1,letters.length-1], from: 'center', amount: 0.12 } }) } item.addEventListener('mouseenter', mouseenterFn) }) const mousemenuenterFn = () => this.fade = true const mousemenuleaveFn = () => TweenMax.to(this.DOM.imgs[this.current], .2, { ease: Quad.easeOut, opacity: 0 }) this.DOM.menu.addEventListener('mouseenter', mousemenuenterFn) this.DOM.menu.addEventListener('mouseleave', mousemenuleaveFn) } render() { // Translate the image on mousemove this.lastMousePos.translation.x = lerp(this.lastMousePos.translation.x, this.mousePos.x, 0.2) this.lastMousePos.translation.y = lerp(this.lastMousePos.translation.y, this.mousePos.y, 0.2) this.DOM.svg.style.transform = `translateX(${(this.lastMousePos.translation.x-winsize.width/2)}px) translateY(${this.lastMousePos.translation.y-winsize.height/2}px)` // Scale goes from 0 to 50 for mouseDistance values between 0 to 140 this.lastMousePos.displacement.x = lerp(this.lastMousePos.displacement.x, this.mousePos.x, 0.1) this.lastMousePos.displacement.y = lerp(this.lastMousePos.displacement.y, this.mousePos.y, 0.1) const mouseDistance = distance(this.lastMousePos.displacement.x, this.mousePos.x, this.lastMousePos.displacement.y, this.mousePos.y) this.dmScale = Math.min(lineEq(50, 0, 140, 0, mouseDistance), 50) feDisplacementMapEl.scale.baseVal = this.dmScale requestAnimationFrame(() => this.render()) } } new Menu() } render() { return ( <Layout> <SEO title="Home" keywords={[`Artist`, `Brisbane-based`, `drawing`, `painting`, `watercolour`, `sculpture`, `installation`, `video`, `embroidery`]} /> <div style={{ paddingBottom: 100 }}> <svg className="distort" width="350" height="450" viewBox="0 0 350 450"> <filter id="distortionFilter"> <feTurbulence type="turbulence" baseFrequency="0.07 0.01" numOctaves="5" seed="2" stitchTiles="stitch" x="0%" y="0%" width="100%" height="100%" result="noise"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"/> </filter> <g filter="url(#distortionFilter)"> <image className="distort__img" x="50" y="50" xlinkHref={require('../images/1.jpg')} height="350" width="250"/> <image className="distort__img" x="50" y="50" xlinkHref={require('../images/2.jpg')} height="350" width="250"/> </g> </svg> <nav className="menu"> <a href="#" className="menu__link">Shanghai</a> <a href="#" className="menu__link">Taipei</a> <a href="#" className="menu__link">Bangkok</a> <a href="#" className="menu__link">Kyoto</a> </nav> </div> </Layout> ) } }
  10. I noticed you've got allowEventDefault:true on the Draggable. Have you tried deleting that? I know that when building Draggable, it was a huge nightmare trying to normalize all the browser behavior with click/drags/pointerEvents/mouseEvents/touchEvents because they all have various bugs/quirks/differences. That's one of the reasons we have an onClick handler in Draggable - so you can save yourself from some of these nightmares and let us handle them internally I'm curious why you're trying to avoid using it.
  11. I think this might be similar to your demo. And @ZachSaucier did something similar here. I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this: https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/ They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation. I just noticed that article mentions Jesper Landberg. https://codepen.io/ReGGae/ He is no stranger to these forums. I wonder if that is where he learned about lerp .
  12. I stripped a bunch out of that demo and took a different approach. I created a paused tween that scrolls the content div to its maxScroll position like so: var scrollTween = TweenMax.to(content, 5, {scrollTo:maxScroll, paused:true}); I then used the onDrag property of the knob's Draggable to update the progress of that tween: Draggable.create(knob, { type:"rotation", bounds:{minRotation:0, maxRotation:360}, onDrag: function() { //use current rotation (a value between 0 and 360) to generate a value between 0 and 1 to pass to the progress of the scrollTween var progress = normalize(this.rotation, 0, 360); console.log("progress = ", progress); scrollTween.progress(progress); } }); //returns a value between 0 and 1 //normalize(180, 0, 360) // returns 0.5 function normalize(value, min, max) { return (value - min) / (max - min); } ***note: that demo loads GSAP's ScrollToPlugin from: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/ScrollToPlugin.min.js If you need a great study on scroll positions, normalize and clamp check out @OSUblake demos here: https://greensock.com/forums/topic/16514-continuously-tween-on-click-taphold/?do=findComment&comment=73118
  13. Happy to help! Interesting question. You could use GSAP's RoughEase to do something like this (I moved your biker up some to better show the effect): https://codepen.io/ZachSaucier/pen/OYxvNj?editors=0010 If you wanted it to be random every time he went across the screen you could change the ease in the onComplete function. I'd recommend putting the generator into its own function though, like so: function getRoughEase() { return new RoughEase({ template: Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: true}); } var bounceEase = getRoughEase(); Then changing the onComplete to this.tl = new TimelineLite({ onComplete: function() { bounceEase = getRoughEase(); this.delay(2).restart(true); }, }); and setting the ease of the bumping animation to that ease variable: .to(this.moped, 2, { y: 30, // The max height you want to move ease: bounceEase }, "-=2") which produces https://codepen.io/ZachSaucier/pen/XweEKw?editors=0010
  14. Sorry, but I failed to upload screenshots. It's the color lines that change colors every time I click the letters in the left. For example, when letter "T" is clicked, the color line would turn red and move from below screen to middle. It's one of the Official Examples in the website. I know how to change the color, but I'm not quite sure how to clamp the color block shapes every time another letter is clicked and how the lines are squeezed and extended. I assume it's about GSAP animation, right? Thanks for the reply!
  15. @both Thanks ! ? Horizontal is not tried yet, working on vertical. It's working with jquery 3.4. But I've little problem, I'm unable to add or remove class active to nav li a var $navButtons = $("ul.nav li a").filter("[href^=#]"); this is not working for me. Below is my code to add navigation, please check var navList = ""; $(".slide").each(function (i) { navList += "<li><a href='#" + (i + 1) + "' class='slide-" + (i + 1) + "'></a></li>"; }); if ($('ul.nav').length < 1) { $("<ul class='nav'></ul>").prependTo($(".slides-container").parent()); } $('ul.nav').html(navList); $("ul.nav li a").on('click', function (e) { e.preventDefault(); }); Now I've little simplified scrolling code to find out problem, please check below var $window = $("section"); var $navButtons = $("ul.nav li a"); var $slidesContainer = $(".slides-container"); var $slides = $(".slide"); var $currentSlide = $slides.first(); //Animating flag - is our app animating var isAnimating = false; //The height of the window var pageHeight = $window.innerHeight(); //Going to the first slide goToSlide($currentSlide); /**Adding event listeners**/ $window.on("mousewheel DOMMouseScroll", onMouseWheel); /**When user scrolls with the mouse, we have to change slides**/ function onMouseWheel(event) { //Normalize event wheel delta var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail; //If the user scrolled up, it goes to previous slide, otherwise - to next slide if (delta < -1) { goToNextSlide(); } else if (delta > 1) { goToPrevSlide(); } //event.preventDefault(); } /**If there's a previous slide, slide to it**/ function goToPrevSlide() { if ($currentSlide.prev().length) { goToSlide($currentSlide.prev()); } } /**If there's a next slide, slide to it**/ function goToNextSlide() { if ($currentSlide.next().length) { goToSlide($currentSlide.next()); } } /**Actual transition between slides**/ function goToSlide($slide) { //If the slides are not changing and there's such a slide if (!isAnimating && $slide.length) { //setting animating flag to true isAnimating = true; $currentSlide = $slide; //Sliding to current slide TweenMax.to($slidesContainer, 1, { scrollTo: { y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this }); TweenMax.fromTo(".title span:nth-child(even)", 1, {y: "50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); TweenMax.fromTo(".title span:nth-child(odd)",1, {y: "-50%",opacity: 0}, {ease:SlowMo.ease.config( 0.4, 0.4),y: "0%",opacity: 1}); } } /**Once the sliding is finished, we need to restore "isAnimating" flag. You can also do other things in this function, such as changing page title**/ function onSlideChangeEnd() { isAnimating = false; } Is it possible to convert nav li a into, <div class="nav"> <div class="slide-1">Slide 1</div> <div class="slide-2">Slide 2</div> <div class="slide-3">Slide 3</div> <div class="slide-4">Slide 4</div> </div>
  16. Ah lord, that was the one I edited & left for later, whoops! Swapped the vars back now lol. Good shout on the normalize though, going to give that a try. Cheers!
  17. I don't really have time at the moment to dissect all the code/logic and fix it for you, but from a cursory glance it looks like issues with how you're handling the whole last/current/next data. Your slideIt() function doesn't accept any parameters, yet you're feeding 3 parameters to it from your next() and prev() methods. Furthermore, that function looks like it's only considering "last" and "current" values (which you're setting in next()), but not "next" (which you're setting in prev()). Perhaps you just need to normalize things on "current" and "next". In short, I'm pretty sure it's a logic issue in the way you're handling last/current/next and has nothing to do with GSAP or zIndex
  18. I need to update those demos to some fresher/better ones:P Between the other code in those demos the actual logic for the effect is pretty straight forward. You just lerp the scroll value, check the diff between the new and old value... and apply that value to anything.. like a skew in this case. Something like the below (not tested). let scrollTarget = 0 let scrollCurrent = 0 let ease = 0.1 const skewTarget = someElement window.addEventListener('scroll', () => { scrollTarget = window.scrollY }) function render() { scrollCurrent += (scrollTarget - scrollCurrent) * ease const diff = scrollTarget - scrollCurrent const vel =+ diff skewTarget.style.transform = `skewY(${vel}deg)` requestAnimationFrame(render) } requestAnimationFrame(render)
  19. hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) { TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0 TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut }); TweenLite.to(this.sprites.c2.scale, 1, { delay:0.2, x: 1.4, y: 1.4, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) }); TweenLite.to(this.scale, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) }); TweenLite.to(this.scale, 1.2, { delay:0.2, x: 1.3, y: 1.3, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) }); this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) }); }); }; and than, when release click i want kill all thoses. i use es6 decomposer the Error come from TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); pointerUP(e) { // kill all animations FIXME: ? TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); // start new animations ...... from the cancel this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: slot.position.zero.x, y: slot.position.zero.y, ease: Power4.easeInOut }); }); visual help .... thank for help
  20. Alright I think I have my questions figured out. In your pen http://codepen.io/osublake/pen/0d4742d2200d028ed42297cb874af2b5, I am trying to make sense of the following TweenLite.set(item, { backgroundColor: color, rotation: 180 * sign, xPercent: 100 * sign, yPercent: 100, autoAlpha: 0, scale: 0 }); var tween = TweenLite.to(item, 0.45, { autoAlpha: 1, scale: 1, rotation: 0, xPercent: 0, yPercent: 0, paused: true, force3D: true }).progress(1); So .item has properties set using .set(), and has a tween via var tween. What is the purpose of .progress(1)? Does that mean that the tween properties has already taken place and the item is now visible because the virtual playhead is now at the end of the animation? What is the difference between using requestAnimationFrame VS. TweenLite.ticker.addEventListener("tick", update); Which method is more standard and produces better performance, in my current situation would you recommend using ticker vs rAF? In the normalize examples, I understand the min, max, and value parameters but how can I get better at coming up with those figures? Is there like a cheat sheet or those are pretty much what I will use 90% of the time? The normalize and clamp functions are really helpful. I hope I am not being a pain by asking the above questions, my JS is only average and I am trying to get better at it. You guys have been amazing at responding and I want to sincerely say this is the friendliest forum that I have joined.
  21. Hi and welcome to the GreenSock forums, Thanks for the demo. Instead of recreating the tween with different end values for x on each scroll I think you will be better off just creating the tween once and changing its timeScale() timeScale() allows you to adjust the speed of an animation animation.timeScale(0.5) // half speed animation.timeScale(1) // normal speed animation.timeScale(2) // double speed The demo below shows how you can smoothly adjust the timeScale of a timeline using an html5 input slider. You can normalize your scroll position values and pass them into the timeScale of your tween
  22. Hi Therddlr, Glad you are eager to learn.SVG definitely has its quirks, but as Jack mentioned, GSAP does a lot to normalize behavior. I'm sure you will do fine with GSAP. If you want to make your head spin a bit, read through the SVG Gotchas thread. Some great info in here:
  23. The SVG spec doesn't support 3D transforms - that's why rotateY doesn't work for you. And as I said in your other thread, GSAP uses the transform attribute rather than CSS transforms in order to deliver cross-browser consistency (work around various bugs and inconsistencies). You'll notice that the percent-based transform-origin values DO work as expected even though if you look at DevTools they're technically set to 0px. That's on purpose actually. We did a bunch of work to normalize things across browsers by adjusting all the other values in the matrix() accordingly. So it looks/works exactly the same, but the transform-origin's components are zero for SVG elements in order to make things work great across all browsers. Here's a fork showing that they work as expected: See https://css-tricks.com/svg-animation-on-css-transforms/ Does that clear things up?
  24. Yeah, I'd be very careful about using 3D animations in SVG - it probably won't work in all browsers. GSAP originally used CSS transforms on SVG elements, but we discovered a bunch of little annoying bugs and inconsistencies across browsers (unrelated to GSAP), so we switched to using the "transform" attribute instead to normalize behavior and to be consistent with the spec. I'm sure you'll see that 3D CSS transforms work in Chrome and some other browsers (which is probably why anime.js was 'working'), but I suspect you'd find that your stuff broke in various other browsers. We work really hard to deliver consistency across browsers with GSAP as much as possible.
  25. Yes, that's to get around browser bugs (if I remember correctly, Safari had various glitches related to non-zero z values in transform-origin). We did a bunch of work to normalize things across browsers by making transform-origin's z component 0 and then adjusting all the other values in the matrix3d() accordingly. So it looks/works exactly the same, but the transform-origin's z component is always zero in order to make things work great across all browsers.