Search the Community
Showing results for tags 'modifiers'.
Found 8 results
-
Hello, I am getting this error for an animation -> invalid modifiers tween value: [object Object]. I am using gsap version 2 inside a React project. I've read from another forum post that its because the plugin is not loaded. My question is how do you load it inside an actual project, not codepen?
-
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. This is a good example of the ModifiersPlugin, but as of GSAP 3 you should probably be using GSAP's SnapPlugin for this sort of thing: 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. This is a good example of the ModifiersPlugin, but as of GSAP 3 you should probably be using GSAP's SnapPlugin for this sort of thing: 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 tween! 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... 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. -
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. GSAP version 1.19.0 introduces some exciting new features for advanced users as well as conveniences for everyone (even the "greenest" novices). The most noteworthy improvements are summarized below: Function-based values Instead of a number (x:100) or string (width:"300px") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below. See the Pen BzmGba by GreenSock (@GreenSock) on CodePen. ...and more GSAP 1.19.0 is more ES6-friendly (for example, you can npm install gsap and then import {TweenLite, Elastic, TimelineMax} from "gsap" in your project). Plenty of bug fixes too. See the whole list in the github changelog. DOWNLOAD GSAP TODAY Happy tweening! -
Hi, How to deal with others properties in modifiers function ? var animation = TweenMax.to(".box", 25, { ease: Linear.easeNone, x : "+=600", modifiers: { x: function (x) { return x%600; }, /* opacity: function(i){ if(x>400){ return 0 } return 1; } */ }, repeat: -1 });
-
Hi, I've tried using Modifiers Plugin with Draggable as follows: Draggable.create(".box", { type:"x", modifiers: { x: function(x) { return x % 500; } } }); It did not work. Is there any other way to override the x value before it is applied to the draggable element while dragging? Alternatively I was trying to find a way to initiate dragging on an element without applying the transforms to it. Thanks, Max
-
Just wanted to share some nice functions I came across that can be used with the ModifiersPlugin. Doing a normal modulus calculation restarts the value at 0, which may not be what you want. 500 % 500 // => 0 This function will allow you to do a modulus operation for a min/max range. wrap(500, -100, 500); // => -100 function wrap(value, min, max) { var v = value - min; var r = max - min; return ((r + v % r) % r) + min; } And this is a modified version of that function that will make the modulus value "yoyo". mirroredWrap(600, -100, 500); // => 400 function mirroredWrap(value, min, max) { var v = value - min; var r1 = max - min; var r2 = r1 * 2; v = (r2 + v % r2) % r2; return v > r1 ? (r2 - v) + min : v + min; } With the first wrap function you can do some interesting stuff, like making an object appear in two different places, kind of like in those old asteroid games. http://codepen.io/osublake/pen/XpbmYr/?editors=0010 And with the mirroredWrap, you can do stuff like creating multiple bounces with a single tween. http://codepen.io/osublake/pen/mRJeNX/?editors=0010 .
- 1 reply
-
- 12
-
-
- modifiers
- modifiersplugin
- (and 2 more)
-
Try out picadipity.com to see GreenSock in action! From your help I was able to build a control that features infinite looping of pictures using modifiers. The control also supports draggable and throwable behavior with stops at notches that centers the pictures. I am using the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js"></script> <script th:src="@{js/greensock/ModifiersPlugin.min.js}"></script> <script th:src="@{js/greensock/ThrowPropsPlugin.min.js}"></script> This has been great fun developing this control!
-
I've been noticing lately that it would be very handy if there was a way to wrap values during a tween, just like the hours on a clock. 9 + 4 hours = 1. I made a demo that does this for positioning, but it's not very performant because it creates a lot of tweens on every update. http://codepen.io/osublake/pen/4d1b3311b08073d0bebfa061a2199e61?editors=0010 Creating something like that could be greatly simplified if there was a way for GSAP to do that internally. A modulo operator has been proposed for a future version of ECMAScript using this syntax. -2 mod 12 So we could use the word "mod" to tell GSAP to run the value through a modulo function before applying the value. TweenLite.to(foo, 1, { x: "800mod600" }); So what's going to happen is that it will tween to 600, go back to 0, and tween to 200. This would make creating carousels/sliders a breeze. var index = 0; $("#prev").click(function() { move(-1); }) $("#next").click(function() { move(1); }) function move(steps) { index += steps; TweenLite.to(".slider", 1, { xPercent: index + "00mod500" }); } Pretty simple! No cloning, calculating positions, or secondary updates required. And because it's position will automatically reset, you can click through the slides as fast you want. The only problem I see with the mod is that it resets the value to 0. This is probably not something you want to happen for something like scaling, so there should be a way to define a base value. Maybe something like this. TweenLite.to(foo, 1, { scale: "2mod0.5+=1" }); Thoughts?
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
