Jump to content
GreenSock

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

Search the Community

Showing results for tags 'modifiersplugin'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 9 results

  1. 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?
  2. Hi. I was trying to reverse engineer this demo using the Modifiers plugin: https://codepen.io/GreenSock/pen/QEdpLe I got it to go downwards on the Y access okay, but I'm running into issues getting to get it to go up. Any help? Also, if you could explain how the % mod works, that would be great. Please no jquery.
  3. Hi, Can anyone help me with the code that I have? The issue that I'm facing is that when i try to snap a container using the following syntax, the animation seems to skip. { x: "+=" + 200, modifiers: { x: function (x, target) { x = gsap.utils.snap(200, parseInt(x)); return x + "px"; } } } I also used the snap plugin to snap the container into place however, the issue still persisted in this case too. { x: "-=" + 200, snap: { x: 200 } } Any help would be greatly appreciated.
  4. I have been experimenting and going through all the previous forum question on the 'carousel code pen' you guys and gals have provide. I am simply trying to resize the boxes to roughly 100 px or 200 px and make the entire wrapper like 3000px long. That way resizing the browser wont effect the carousel. This is fairly simple but I just couldn't get it to work when changing the value, I guess i don't fully understand how the modifier plug in works. I would really appreciate the help!
  5. GreenSock

    ModifiersPlugin

    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.
  6. GreenSock

    GSAP 1.19.0 Released

    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!
  7. How would you reverse the direction of this carousel loop without doing any transforms? This is one of the examples for the modifiers plugin. I tried the following but it doesn't loop the items back until all have moved -500. Probably an easy fix. Thanks. TweenMax.to(".box", 5, { ease: Linear.easeNone, x: "-=500", //move each box 500px to left modifiers: { x: function(x) { return x % 500; } }, repeat: -1 });
  8. non-working example: now works! http://codepen.io/philipbell/pen/YZxewm It's snapping to it's new X value instead of tweening. Example of what I'm trying to achieve: http://codepen.io/philipbell/pen/XMaZEo The same equation works when used in a separate tween. I've used this same method in timelines, but for some reason it's not working for a 'to' tween. Why is animContainerR snapping to it's x value when passed through the modifyer plugin? Thanks!
  9. 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 .
×