Jump to content
GreenSock

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

Search the Community

Showing results for tags 'custom'.



More search options

  • 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

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 5 results

  1. GreenSock

    Introducing CustomEase

    Are your animations meant to feel playful? Robotic? Slick? Realistic? If they had a voice, what would they sound like? To become an animation rock star, you must develop a keen sense of easing because that's what determines the style of movement between point A and point B. GreenSock's new CustomEase frees you from the limitations of canned easing options. Create literally any ease imaginable. Zero limitations. CSS animations and WAAPI offer cubic-bezier() which is great but with only two control points it's impossible to create more complex effects like bouncing, elastic, wiggles, rough/jerky eases, etc. Plus you can't make an ease return to its starting values (like a ball jumping into the air and falling back to the ground with a bounce). Features Unlimited anchors and control points. Copy/Paste any SVG <path> (including direct copy/paste from Adobe Illustrator). Use CSS cubic-bezier() values (For example, from cubic-bezier.com). Editor has snapping, undo, sample code and other conveniences. Start with any standard ease and customize it. getSVGData() method turns any ease into SVG <path> data for display at the size you define. Extremely optimized for runtime performance. Free for anyone with a GreenSock account. Reading Ease Curves, Editing, and Using CustomEase Here's an in-depth video tour that'll get you up to speed with exactly how to use CustomEase: Ready to play? Check out the new Ease Visualizer with CustomEase support. Click "Custom" to edit the curve as much as you want: Simple Example See the Pen Video: Single Tween with CustomEase by GreenSock (@GreenSock) on CodePen.&#13;We strongly recommend creating your CustomEases initially (rather than in each tween) to maximize performance and readability. You then reference them by ID in your tweening code. When an ease is created, it must parse through the points and do various calculations to prepare for blisteringly fast runtime performance during the animation, so executing those calculations when your page/app loads is typically best. Download CustomEase To get CustomEase, you must have a GreenSock account which is completely free to set up. Plus it gets you access to our community forums (a fantastic place to learn and get your questions answered). The widget below lets you sign up or if you're already logged in, it'll give you immediate access to the download zip that contains CustomEase in the "easing" directory. Note: CustomEase is not in the github repository or CDN; it's only available for download at GreenSock.com. [loginwidget]
  2. Hi all, I am looking for a custom scroll bar with Draggable Scroll. For simulate a scroll like mcustomscrollbar or iscroll and keep the touch fonction for mobile. I don't like the native scrollbar, i am looking for a thin/cute bar who appear only on mouse move. Anyone have something like this ? I have see : http://codepen.io/MAW/pen/WbvOrM But not working on FF/IE Thanks for reading
  3. Hi there, I'm new to GSAP and am trying to evaluate it for some animations for a project I'm working on. I found some examples of using tweenlite to animate a custom property and was able to create a test that does this. I'm not sure how or if I can extrapolate that concept into animating multiple values at the same time with one tweenlite call. What I'm doing is animating a square box with a Matrix3D transform. (this only needs to work in webkit) To calculate the Matrix3D transform I'm using a handy bit of Javascript called PerspectiveTransform.js (https://github.com/edankwan/PerspectiveTransform.js) where I can pass the width & height of my element, and specify x&y coordinates for all four corners of the element. The script then calculates the Matrix3D transform required to distort the element to those new coordinates. I have a jsfiddle example that illustrates this. The first box has a Matrix3d transform applied showing the desired result. In this test the bottom right corner is moved from 250,250 to 220,220. I found examples on these forums that let me figure out how to animate that by creating an object with set/get functions. I need to figure out if I can do the same but for the "y" coordinate of that bottom right corner as well at the same time. I can only call the transform function once per frame of the animation because it generates a matrix3d transform for the whole element...not just a corner. In the end I'll actually have to animate all 4 corners of the element for a total of 8 coordinates. http://jsfiddle.net/jhBYw/1/ If anyone can help and tell me if this is even possible with GSAP or if there is a better way to do this I would greatly appreciate it. I know it is has been done: http://www.is-real.net/experiments/css3/wonder-webkit/ <div class="box1"></div> <div class="box2"></div> <a href="#">run</a> .box1 { background: blue; width:250px; height:250px; -webkit-transform:matrix3d(0.956521739, -0.043478261, 0, 0.000347826, -0.043478261, 0.956521739, 0, 0.000347826, 0, 0, 1, 0, 0, 0, 0, 1); } .box2 { background: blue; width:250px; height:250px; } function transformPerspective(elem, br_x, br_y) { var transform = new PerspectiveTransform(elem, 250, 250, true); // the properties represent the 4 corners are "topLeft", "topRight", "bottomLeft" and "bottomRight" transform.bottomRight.x = br_x; transform.bottomRight.y = br_y; // check the polygon error before updating if(transform.checkError()==0){ transform.update(); // update the perspective transform elem.style.display = "block"; // show the element }else{ elem.style.display = "none"; // hide the element } } var box = $('.box2').get(0); var endValX = 220; var currValX = 250; obj = {}; obj.getDistortVal = function() { return parseInt(currValX); }; obj.setDistortVal = function(new_x) { currVal = parseInt(new_x); transformPerspective(box,currVal, 250); }; var animate = function(e) { e.preventDefault(); TweenLite.to(obj, 0.2, {setDistortVal: endValX, ease: Power2.easeInOut}); }; $('a').on('click',animate);
  4. I'm trying to tween a custom object property with string values, but they are changed to NaN. Why are they been treated as number? .fromTo(_bg, 0.7, { currentBg:'bg1', curentBgType:'gradient', ratio:0 }, { currentBg:'bg2', curentBgType:'gdImg', ratio:1 },0.001 )
  5. So I haven't had any luck finding an answer to this via Google or the forums here yet, so hopefully someone can help. Is there a way to specify what (other than the selected item) the selection rectangle uses to set its size, if a TransformManager is applied to a Sprite with multiple children? Scenario: I have a Sprite with 2 children: a Bitmap, and a Shape. The Shape has a blendmode of ERASE, so the user can "erase" the image below it, but if the user 'paints' outside the visible area of the image, it increases the selection box size. I only want the selection box to be sized to the image, not the size of the image + erase layer. Does that make sense? Thanks in advance! -Jarrod
×