Jump to content
GreenSock

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

Search the Community

Showing results for tags 'wiggle'.

  • 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 8 results

  1. GreenSock

    CustomWiggle

    CustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties. Note that the video is using GSAP 2 format. Demo: CustomWiggle Types Options wiggles (Integer) - Number of oscillations back and forth. Default: 10 type (String) "easeOut" | "easeInOut" | "anticipate" | "uniform" | "random" - tThe type (or style) of wiggle (see demo above). Default: "easeOut" amplitudeEase (Ease) - Provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude's progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. timingEase (Ease) - Provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example CodePen to play around and visualize how it works. How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, and ease just controls the ratio of movement toward whatever value you supply for each property in your tween. Sample code //Create a wiggle with 6 oscillations (default type:"easeOut") CustomWiggle.create("myWiggle", {wiggles:6}); //now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began. gsap.to(".class", {duration: 2, rotation:30, ease:"myWiggle"}); //Create a 10-wiggle anticipation ease: CustomWiggle.create("funWiggle", {wiggles:10, type:"anticipate"}); gsap.to(".class", {duration: 2, rotation:30, ease:"funWiggle"}); Wiggling isn't just for "rotation"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on "x" and "y", as demonstrated here. Download CustomWiggle CustomWiggle and CustomBounce are membership benefits of Club GreenSock. It's our way of saying "thanks" to those who support GreenSock's ongoing efforts. Joining Club GreenSock gets you a bunch of other bonus plugins and tools like MorphSVGPlugin as well, so check out greensock.com/club/ for details and sign up today. Note: CustomWiggle is not in the GitHub repository or CDN; it's only available for download at GreenSock.com. Demos 
 CustomWiggle Demos
  2. Hello, i'm trying to replicate a wiggle effect in adobe animate using gsap i'm using custom template for gsap library, i have a lot of movieclips (45) and i have to animate them in x and y position randomly so i think gsap is the way to do that... Someone coul'd help me to achieve this result tnx in advance Giuseppe
  3. I've been playing with the morphsvg bow and arrow demo: http://codepen.io/chrisgannon/pen/epZyEK?editors=0010 I was trying to get a wiggle strain when the bow was fully pulled, and using CustomWiggle and rotation with easeInOut produced some cool results, but I was trying to get the Bow and string to relax part of the way back to the relaxed/straight state. Is there anyway to animate a wiggle ease in and out partway back through an animation? Thanks.
  4. Hello GreenSock community, This is my 1,000th post here on the forum so I thought I’d say thank you to all of you. You’re such a fantastic group of friendly, creative people. Your code, questions and demos inspire me every day. I learn just as much by answering questions as I do by asking them so the first thousand has been a wonderful education for me. Thank you all for your participation here in GreenSockLand. Special thanks to Jack and Carl for letting me hang out and talk through 1,000 posts. You guys rock! To commemorate the occasion, I made a new little demo. I’ve been having so much fun lately with CustomEase, CustomBounce and CustomWiggle that I thought they should be the focus of the 1,000 post commemorative demo. Commemorative 1,000 Post Demo: http://codepen.io/PointC/pen/PpqyaO/ Speaking of the new CustomWiggle feature - (shameless self-promotion) – if anyone missed my Wiggle World demo, be sure to check it out. It allows you to interactively play with some of the new wiggle settings. Wiggle World: http://codepen.io/PointC/pen/ZLPdoY/ Thanks again everyone for my first 1,000 posts. I’m looking forward to another thousand. You’re an awesome community. As always, happy tweening to all. - Craig PS If there are any forum lurkers out there who are a little nervous about jumping in, please give it a shot. The GreenSock neighborhood houses a truly special group of people on the web.
  5. I have a simple wiggle in the codePen example, and I'm trying to see if I can save the position after each circle moves into it's first position and then move it around again randomly (all within the blue box). Right now when it wiggles, it returns to it's original position in-between each wiggle. Is that possible ? I looked at the 'swarm' example, but I am having a hard time making sense of the code, and I really would like to see how I can capture the position after it moves out into position the first time, and then move each circle around from that position each time it wiggles around. Thanks in advance.
  6. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Have you ever tried getting a realistic wiggle effect or tweaking just how bouncy an ease is? What about adding squash and stretch to a bounce? These are not easy tasks. Well, until now. Even though CustomEase, lets you create literally any easing effect that you can imagine (bounces, wiggles, elastic effects, whatever) by drawing them, it's difficult to plot a complex wiggle or bounce while making sure all the points are spaced correctly. Wouldn't it be nice if you could just set a few parameters (like number of wiggles or bounciness) and have that complex easing curve created for you? Wish granted. CustomWiggle CustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties (see the docs for details). Demo: CustomWiggle Types See the Pen CustomWiggle Demo : resized by GreenSock (@GreenSock) on CodePen. Options wiggles (Integer) - number of oscillations back and forth. Default: 10 type (String) "easeOut" | "easeInOut" | "anticipate" | "uniform" | "random" - the type (or style) of wiggle (see demo above). Default: "easeOut" amplitudeEase (Ease) - provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude's progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. timingEase (Ease) - provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, an ease just controls the ratio of movement toward whatever value you supply for each property in your tween. Sample code //Create a wiggle with 6 oscillations (default type:"easeOut") CustomWiggle.create("myWiggle", {wiggles:6}); //now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began. TweenMax.to(".class", 2, {rotation:30, ease:"myWiggle"}); //Create a 10-wiggle anticipation ease: CustomWiggle.create("funWiggle", {wiggles:10, type:"anticipate"}); TweenMax.to(".class", 2, {rotation:30, ease:"funWiggle"}); Wiggling isn't just for "rotation"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on "x" and "y", as demonstrated here. CustomBounce GSAP always had the tried-and-true Bounce.easeOut, but there was no way to customize how "bouncy" it was, nor could you get a synchronized squash and stretch effect during the bounce because: The "bounce" ease needs to stick to the ground momentarily at the point of the bounce while the squashing occurs. Bounce.easeOut offers no such customization. There was no way to create the corresponding [synchronized] scaleX/scaleY ease for the squashing/stretching. CustomEase solves this now, but it'd still be very difficult to manually draw that ease with all the points lined up in the right spots to match up with the bounces. With CustomBounce, you can set a few parameters and it'll create BOTH CustomEases for you (one for the bounce, and one [optionally] for the squash/stretch). Again, think of CustomBounce like a wrapper that creates a CustomEase under the hood based on the variables you pass in. Options strength (Number) - a number between 0 and 1 that determines how "bouncy" the ease is, so 0.9 will have a lot more bounces than 0.3. Default: 0.7 endAtStart (Boolean) - if true, the ease will end back where it started, allowing you to get an effect like an object sitting on the ground, leaping into the air, and bouncing back down to a stop. Default: false squash (Number) - controls how long the squash should last (the gap between bounces, when it appears "stuck"). Typically 2 is a good number, but 4 (as an example) would make the squash longer in relation to the rest of the ease. Default: 0 squashID (String) - the ID that should be assigned to the squash ease. The default is whatever the ID of the bounce is plus "-squash" appended to the end. For example, CustomBounce.create("hop", {strength:0.6, squash:2}) would default to a squash ease ID of "hop-squash". How do you get the bounce and the squash/stretch to work together? You'd use two tweens; one for the position ("y"), and the other for the scaleX/scaleY, with both running at the same time: //Create a custom bounce ease: CustomBounce.create("myBounce", {strength:0.6, squash:3, squashID:"myBounce-squash"}); //do the bounce by affecting the "y" property. TweenMax.from(".class", 2, {y:-200, ease:"myBounce"}); //and do the squash/stretch at the same time: TweenMax.to(".class", 2, {scaleX:140, scaleY:60, ease:"myBounce-squash", transformOrigin:"center bottom"}); See the Pen CustomBounce from GreenSock by GreenSock (@GreenSock) on CodePen. Where can I get it? CustomWiggle and CustomBounce are membership benefits of Club GreenSock ("Shockingly Green" and "Business Green" levels). It's our way of saying "thanks" to those who support GreenSock's ongoing efforts. Joining Club GreenSock gets you a bunch of other bonus plugins and tools like MorphSVGPlugin as well, so check out greensock.com/club/ for details and sign up today.
  7. Hi there, i'm trying to replicate an animation i did in After Effects using the Wiggle expression. The problem is that my animation in Greensock is far from looking as 'fluid' as the one i did in after effects. The way i did my animation in after effects i set up how much a value will change and the frequency of this change. for instance: wiggle(freq, amp) wiggle(2, 50); Have a look at the code i created, on the same link you can check out the animated gif i'm trying to replicate. http://codepen.io/anon/pen/qBxir/ The animation is basically a constant wobbly effect on all those icons, i also want the animation to be random. Do you guys see this as a good way of doing this? I tried changing the easing but i still couldn't get it to look close to the gif. Is there a better way of doing this? Cheers, Thales
  8. Hello all. I have been using your fine library to animate a set of banner ads for a client going live soon. Fairly late in this process, a team member discovered a 1 pixel jitter or wiggle only in Safari. We are using Google DoubleClick, and we also have a private viewer to show clients ads. In both cases, after uploading these animated ads, in Safari the ad will shift back and forth by about one pixel while elements in it are animating. To phrase it in a different way, when the ad is on a page within an iFrame, the iframe or possibly the container it's in shifts side to side in a wiggle by about one pixel. The animations display slightly differently in Safari as opposed to Chrome. This is not as significant as the jitter. This has been found in Safari Version 9.0 in OSX El Capitan and Yosemite. I stripped the ad of any client-specific images, text, or information and uploaded it to CodePen to try and isolate what's going on. I also had to strip out all the DoubleClick specific code because CodePen would not allow it to run with that code. I really have to apologize because this is very ugly at the moment as I try to debug this. So far I have not been able to get the iframe to jitter in CodePen. However in the "Details" view, the animation is affecting the font weight of the page header text! I feel like this is related. I am at wits end. I'm hoping that if you look at it here and can understand why the font is changing during animation, it will help me understand why the ad is affecting its container during animation in Safari. EDIT: To be clear, right now the behavior I'm asking for help debugging is in CodePen, that the font weight of the header in the top left is flickering during the animation of my banner ad. I think this must be caused by the same thing that is making it jitter in Google DoubleClick preview and in our internal adviewer page, which also uses iframes. Any help would be much appreciated. Best, Stephen Link: http://codepen.io/stevium/details/WQdEyG/
×