Jump to content
Search Community

Search the Community

Showing results for tags 'roughease'.

  • 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
  • Supercharge

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 7 results

  1. Hi, I am trying to create a simple image change timeline animation. I have 2 images of a bird flapping its wings. When I hover over it I want to set image 1 to visibility: hidden and set image 2 to visibility: visible and have that animation repeat. I'm also wanting to have the animation pause on the currently visible image when the user moves their mouse away. I don't want the change to fade, I want it to be a hard image change. Here is the code I was trying but I'm having no luck. I know there must be a better/easier way to do this. gsap.set(this.pigeonImg1, { autoAlpha: 0 }); gsap.set(this.pigeonImg2, { autoAlpha: 1 }); const pigeonTL = gsap.timeline({ paused: false, repeat: -1 }); pigeonTL.to(this.pigeonImg1, { autoAlpha: 0, duration: 0 }); pigeonTL.to(this.pigeonImg2, { autoAlpha: 1, duration: 0 }); pigeonTL.to(this.pigeonImg1, { autoAlpha: 0, duration: 0 }); pigeonTL.to(this.pigeonImg2, { autoAlpha: 1, duration: 0 }); Any help would be greatly appreciated. Thanks
  2. I wonder if there is a way to shake an object in place around its current position. I tried RoughEase and tweening from x,y to x,y with the same value. But the shaking will only be visible when they differ. Is there a simpler way than use an onUpdate callback? Thanks
  3. GreenSock

    Ease Visualizer

    The ease-y way to find the perfect ease Easing allows us to add personality and intrigue to our animations. It's the magic behind animation, and a mastery of easing is essential for any skilled animator. Use this tool to play around and understand how various eases "feel". Some eases have special configuration options that open up a world of possibilities. If you need more specifics, head over to the docs. Notice that you can click the underlined words in the code sample at the bottom to make changes. Quick Video Tour of the Ease Visualizer Take your animations to the next level with CustomEase CustomEase frees you from the limitations of canned easing options; create literally any easing curve imaginable by simply drawing it in the Ease Visualizer or by copying/pasting an SVG path. Zero limitations. Use as many control points as you want. CustomEase is NOT in the public downloads. To get access, create a FREE GreenSock account. Once you're logged in, download the zip file from your account dashboard (or anywhere else on the site that has a download button). Club GreenSock members even get access to a private NPM repo to make installation easier in Node environments.
  4. I'm trying to create a flicker effect (eventually intended for some christmas light images) that will flicker the light off and on on repeat, and with a yoyo effect so there isn't a jump between opacity:1 and opacity:0 when the tween repeats. Right now, nothing is happening in my codepen and I'm not really sure where I went wrong!
  5. Probably a weird feature request but would it be possible if SteppedEase could utilise similar functions such as template in RoughEase? The scenario is that I want to use SteppedEase but want the stepping to start to happen gradually and by the end of the animation, reach the highest point i.e. kind of like what Expo.easeOut equation produces. The closest I could get was to use RoughEase but it creates a rough animation, as it is supposed to. SteppedEase is orderly but very linear and RoughEase is very random and well, rough. P.S. I am aware of the randomise flag in RoughEase.
  6. I've been trying to work up a 'shaking' effect on elements, using RoughEase. Rotations, x, y all get stuck at the end and don't return to their original spots, as yoyo:true, repeat:1 would seem to indicate they would. (centPoint is stageWidth/2, stageHeight/2) —I'm sure I'm missing something but I was curious whether doing yoyo and repeat with transformAroundPoint and RoughEase was a problem in some way… private function makeNewShakeUpTimeline($objects:Array):TimelineMax { var tl:TimelineMax = new TimelineMax; var centPoint:Point = new Point(TTConstants.FULL_WIDTH/2,TTConstants.FULL_HEIGHT/2); var dirx:String = Math.random() > .5 ? "+=20" : "-=20"; var diry:String = Math.random() > .5 ? "+=20" : "-=20"; tl.add(TweenMax.to($objects,.5,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:1,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:false,points:50,strength:3})}),0); dirx= Math.random() > .5 ? "+=10" : "-=10"; diry = Math.random() > .5 ? "+=10" : "-=10"; tl.add(TweenMax.to($objects,.25,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:3,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:false,points:40,strength:2})}),.5); dirx= Math.random() > .5 ? "+=5" : "-=5"; diry = Math.random() > .5 ? "+=5" : "-=5"; tl.add(TweenMax.to($objects,.25,{transformAroundPoint:{point:centPoint},rotation:dirx,yoyo:true,repeat:3,x:dirx,y:diry, ease:RoughEase.ease.config({clamp:true,taper:"out",points:30,strength:1})}),.75); return tl; }
  7. TweenLite.to(_mcfire, 1, {y:0, x:0, ease:RoughEase.create(2.4, 25, false, Quart.easeInOut, "out", false)}); i get this : Line 407 1067: Implicit coercion of a value of type com.greensock.easing:Ease to an unrelated type Function. i don't get the problem
×
×
  • Create New...