Search the Community
Showing results for tags 'modifersplugin'.
Found 3 results
-
Hi, I have some elements undergoing a z axis transform but I need them to maintain their own perspective (using the perspective function on the transform as opposed to using the perspective property of their parent element). When I perform a vanilla z axis animation GSAP will add something like the following style tag: style="transform: translate3d(0px, 0px, 200px)" I was thinking maybe there might be something I could do with the modifier plugin but this seems to allow modifying values before they are concatenated into a templated style update. Does anyone know how I could include a perspective function in the transform. e.g. style="transform: perspective(90px) translate3d(0px, 0px, 200px)" The Mozilla docs use a perspective function in their translate3d reference so it should be valid. I'm just not sure how I can get GSAP to include this modifier. Any thoughts good people of the Greensocks forum? -
Hi Everyone, I've been trying to recreate one of the infinite Draggable carousel that I've seen in this forum Any idea of what I'm missing? Thank you in advance
-
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)
