Search the Community
Showing results for tags 'modifiersplugin'.
-
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.
- 20 replies
-
- loop
- modifiersplugin
-
(and 4 more)
Tagged with:
-
I've attempted to review other forums and while I see how the solution was created in the other codepens. What I'm not sure about is *why* its working and that seems to be my missing piece for the infinite looping vertical images I'm attempting to create. Effectively copied the codepen from 10/5/21 and it works but i cannot figure out how to get the loop to occur seamlessly without any particular jumping.
- 1 reply
-
- vertical scrolling
- vertical scroll
-
(and 2 more)
Tagged with:
-
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 replies
-
- modifiers
- modifiersplugin
-
(and 2 more)
Tagged with:
-
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.
-
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!
-
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 });
-
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!
-
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)
Tagged with: