Leaderboard
Popular Content
Showing content with the highest reputation on 06/18/2019 in all areas
-
Hello @Jaexplorer and welcome to the GreenSock forum! The CSS calc() function is not even a CSS property that you animate, it is a computed equation value that gets parsed by the CSS parser in the browser like @Visual-Q advised above. So technically calc() is not a property that is animatable, since it is a function that is used as a value. And like @OSUblake advised the browser just reports the calculated value when requested by GSAP or any other JS property that accepts a <calc>, <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>. Please see the CSS calc() spec: https://drafts.csswg.org/css-values-3/#calc-computed-value https://drafts.csswg.org/css-values-3/#calc-notation https://drafts.csswg.org/css-values-3/#calc-syntax https://drafts.csswg.org/css-values-3/#calc-type-checking Happy Tweening6 points
-
Your probably looking for the onDrag function: https://greensock.com/docs/Utilities/Draggable onDrag: Function - a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc. Happy Tweening5 points
-
Calc is not just a simple property it's an equation that is passed in to css for parsing. There are many rules governing how it works and it can be written in a number of ways with much more complicated equations than just this + that , that I think would make it very difficult to implement directly in gsap.4 points
-
My demo literally shows you how to use calc. GSAP cannot animate calc like you want because the browsers reports the width in pixels.4 points
-
If you want to animate calc, then use CSS vars kind of like this. https://codepen.io/osublake/pen/OvbqXL If you need more help, please provide a demo. Pictures are not helpful.4 points
-
That explains it.. That is why i asked above you if you were setting your initial CSS transforms outside of GSAP. In your case using the jQuery css() method. GSAP has no way of knowing when you set a transform outside of it, especially when using the jQuery css() method. That is why it is always better to set your transforms with GSAP like i advised above, so GSAP is kept in the loop of what your changing. So you don't change CSS your trying to animate oustside of GSAP. Happy Tweening4 points
-
If you REEAAALLY want gsap to write a calc that animates... I probably would never actually do this, but it was fun to figure out... var tween = TweenMax.to('.img-wrapper', 1, { width: 1, modifiers: { width: function() { return ('calc(' + (tween.progress() * 100) + '% + ' + tween.progress() * 4 + 'rem)') } }, ease:Linear.easeNone }) *Updated with Jack's suggestion TweenMax.to('.img-wrapper', 3, { width: 1, modifiers: { width: function() { // this.ratio respects ease return 'calc(' + (this.ratio * 100) + '% + ' + (this.ratio * 4) + 'rem)'; } }, ease:Expo.easeInOut }); https://codepen.io/Visual-Q/pen/LKRLvO?editors=10103 points
-
3 points
-
I think this thread is the only other time I've seen a question about Cocos Creator.3 points
-
You should try setting the initial transform and perspective with GSAP. It will handle all the browser vendor prefixes if needed for each browser. And then will allow GSAP to record and keep track of your CSS transform changes. TweenMax.set(".drag_zone", {scale:1, x: "-50%", perspective: "600px"}); // then your other GSAP code goes here Also keep in mind that GSAP also has xPercent and yPercent instead of using x or y, for when you need to do a percentage based transform for translateX and translateY. xPercent and yPercent, percentage based transforms: https://greensock.com/gsap-1-13-1 https://codepen.io/GreenSock/pen/rAetx If your still having an issue please create a codepen demo example like I described above. Happy Tweening3 points
-
Hello @ninmorfeo and Welcome to the GreenSock Forum! How are you setting your initial transform translate3d() ? Are you setting it with GSAP using a set() or are you doing it some other way in the CSS outside of GSAP? The reason being is you could be setting it outside of GSAP. But this will be hard to debug without seeing your code in context. But to better help you please create a limited codepen demo example so we can see your code live and in an editable environment. Happy Tweening3 points
-
Nice job @Visual-Q! If you want to respect easing, you could just use this.ratio instead of tween.progress(): TweenMax.to('.img-wrapper', 5, { width: 1, modifiers: { width: function() { return ('calc(' + (this.ratio * 100) + '% + ' + this.ratio * 4 + 'rem)'); } }, ease:Power4.easeOut }); ?2 points
-
Jack mentioned: As far as I know I don't think that has changed since that post so I recommend you use JavaScript to get your dimensions and feed those into your tweens. Maybe this will help. https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements2 points
-
JavaScript has numerous ways to measure widths and heights so I'd recommend using one of those. Check out this post by Jack about supporting calc(). Happy tweening.2 points
-
2 points
-
oh I found the solution .... I set the transformation property of dynamically created objects not through the jquery css method but via the gsap set and now works well with the external jquery.path library too. TweenMax.set($("#" + chi), { scale: 0.6, rotationX:20});2 points
-
2 points
-
If you only specify the rx (or ry) attribute, the browser assumes the missing value is equal to the one you specified. I don't think I've ever used the convertToPath() method with a missing attribute like that so I've never seen that happen. @GreenSock should be along later with additional details. For now if you specify both the rx and ry attributes you should see the desired output. Happy tweening.2 points
-
1 point
-
1 point
-
Sorry I don't know what I was supposed to look at in your link so I'll guess based on your description. If you want to have the inner container start at parents padding then extend to full viewport you could also animate parents padding to 0. Then the inner container would fill the viewport at 100%. If you make a codepen it will be much easier to help you.1 point
-
1 point
-
Good catch, @PointC. And yes, @knalle, I just added a note to the docs. Cheers!1 point
-
I'd go with a steppedEase. You can even use a stagger and cycle if you like. https://codepen.io/PointC/pen/qzNZjd Happy tweening.1 point
-
Note sure about whether you can throttle a callback in that way, but you could probably make your tween behave the way you want with stepped Ease. https://greensock.com/docs/Easing/SteppedEase1 point
-
hi @WD40andTape, Just a few suggestions on the aspect speed https://codepen.io/osublake/pen/XXbLer https://codepen.io/mikeK/pen/gyYWEe https://codepen.io/osublake/pen/aEbvWX Kind regards Mikel1 point
-
If you're animating groups you need to add a parent group to it and apply the clip-path to the parent. https://codepen.io/PointC/pen/pXgxwm Happy tweening.1 point