Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 06/18/2019 in all areas

  1. 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 Tweening
    6 points
  2. 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 Tweening
    5 points
  3. 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
  4. 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
  5. 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
  6. 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 Tweening
    4 points
  7. 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=1010
    3 points
  8. I think this thread is the only other time I've seen a question about Cocos Creator.
    3 points
  9. 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 Tweening
    3 points
  10. 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 Tweening
    3 points
  11. 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
  12. 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_elements
    2 points
  13. 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
  14. 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
  15. 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
  16. @Visual-Q is gettin' all fancy with it.
    1 point
  17. Cool, I didn't think about easing.
    1 point
  18. 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
  19. @ZachSaucier @GreenSock I have updated my comment with an example ?
    1 point
  20. Good catch, @PointC. And yes, @knalle, I just added a note to the docs. Cheers!
    1 point
  21. 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
  22. 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/SteppedEase
    1 point
  23. 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 Mikel
    1 point
  24. 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
×
×
  • Create New...