Jump to content
GreenSock

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

Search the Community

Showing results for tags 'plugin'.

  • 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

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

  1. GreenSock

    Flip Plugin

    The Flip Plugin seamlessly animates between states dynamically with minimal code. The video explains more... VIDEO All you need to do is get the initial state using Flip.getState(targets), make whatever changes you'd like to the DOM or styling, and then call Flip.from(state). GSAP handles the rest! Of course like all GreenSock tools, there's a rich API for finessing things and getting exactly the look you want. "FLIP" is an animation technique that stands for "First", "Last", "Invert", "Play" and was coined by Paul Lewis. Here's a demo of how it works: See the Pen How GSAP's Flip Plugin Works by GreenSock ( @GreenSock) on CodePen. Feature highlights Nested transforms? No problem! Most FLIP libraries only calculate basic offsets assuming no transforms beyond x/y, so a scaled parent breaks things. Rotations certainly aren't allowed. GSAP's Flip plugin just works. Set absolute: true to make elements use position: absolute during the flip. This solves layout challenges with things like flexbox and grid. One flip can handle multiple elements and even stagger them. Resize via width/height properties (default) or scaleX/scaleY (scale: true) You get the full power of GSAP under the hood, so you can use any ease, define special properties like onComplete, onUpdate, repeat, yoyo, and even add() other animations with total control of timing, etc. Apply a CSS class during the flip with toggleClass. It'll be removed at the end of the flip. Flip.fit() repositions/resizes one element to fit perfectly on top another (or even a previous state of the same element). It's as easy as Flip.fit(".box1", ".box2"). Add tween properties to make it animate over time, likeFlip.fit(".box1", ".box2", {duration: 1, ease: "power2.inOut", absolute: true}). Compensate for nested offsets, like if a container element is getting flipped along with some of its children and you don't want the offsets to compound (nested: true) Smoothly handles interruptions. Flip one element to another and have them cross-fade (fade: true). For example, a thumbnail image flips to the full-resolution, full-screen image that's a different element completely, but the user just sees the thumbnail seamlessly transition into the full-screen one. Simply set the same data-flip-id attribute on both to match them up. onEnter and onLeave callbacks for when elements enter or leave (like if the flip senses a display: none toggle and there's no matching target to swap), making it easy to elegantly animate on/off elements. Simple example See the Pen FLIP swap element positions by GreenSock ( @GreenSock) on CodePen. Flex example See the Pen Flipping Flexbox by GreenSock ( @GreenSock) on CodePen. Advanced example See the Pen Grid item view with FLIP plugin by GreenSock ( @GreenSock) on CodePen. Learn and see more Want to learn more? the Flip docs are the best place to go. View the Flip showcase View all of the Flip how-to demos Get your hands on the FlipPlugin The FlipPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download the FlipPlugin, just log into your account dashboard and grab the latest version of GSAP. Don't have Club GreenSock? Try the FlipPlugin for free on CodePen! There's a special but fully-functional version of the FlipPluginthat we link to in our demos in our FlipPlugin Collection on CodePen, so feel free to fork any of them and take the FlipPlugin for a spin. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  2. Easily move any element along a path, whether it's an SVG <path>, a list of points, or a bezier curve. Learn more in this video: GreenSock club members also gain access to the MotionPathHelper utility. For more information, check out the MotionPathPlugin docs.
  3. GreenSock

    InertiaPlugin

    InertiaPlugin allows you to smoothly glide any property to a stop, honoring an initial velocity as well as applying optional restrictions on the end value. You can define a specific end value or allow it to be chosen automatically based on the initial velocity and ease or you can define a max/min range or even an array of snap-to values that act as notches. InertiaPlugin even integrates VelocityTracker so that you can have it "watch" certain properties to keep track of their velocities for you and then use them automatically when you do a inertia tween. This is perfect for flick-scrolling or animating things as though they are being thrown (where momentum factors into the tween). For example, let's say a user clicks and drags a ball and and then when released, the ball should continue flying at the same velocity as it was just moving (so that it appears seamless), and then glide to a rest. You can't do a normal tween because you don't know exactly where it should land or how long the tween should last (faster initial velocity would usually mean a longer duration). You'd like it to decelerate based on whatever ease you define in your tween (always use some sort of easeOut, like Power1.easeOut, Strong.easeOut, etc.). Maybe you want the final resting value to always land within a particular range so that the ball doesn't fly off the edge of the screen. But you don't want it to suddenly jerk to a stop when it hits the edge of the screen either; instead, you want it to ease gently into place even if that means going past the landing spot briefly and easing back (if the initial velocity is fast enough to require that). The whole point is to make it look smooth. #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color:#555; margin: 0 0 10px 0; } #container a { color:#71b200; } #container .normalBullets code { font-size: inherit; color: inherit; font-weight: normal; line-height: inherit; font-family: inherit; } #container .normalBullets li strong { font-size: 110%; } #container .normalBullets li { margin-bottom:8px; } #container .blackBG h1, #container .darkBG h1 { color: #ddd; text-shadow: none; } #container .blackBG p { color: #999; } #container .section { width: 100%; text-align: center; position: relative; padding: 20px; } /* .block was causing conflict with wp theme --- renamed below */ #container .customblock { padding: 10px; text-align: left; position: relative; } #container .blackBG { background-color: black; } #container .lightBG { background-color: #e4e4e4; } #container .subtleDark { color: #999; text-shadow: none; } #container .blackBG p strong { color:#ddd; font-weight: normal; } #container .controls { background-color: #222; border: 1px solid #555; color: #bbb; font-size: 18px; } #container .controls ul { list-style: none; padding: 0; margin: 0; } #container .controls li { display: inline-block; padding: 8px 0 8px 10px; margin:0; } /** CODE **/ #container .code { width: 100%; border: 1px solid #555; padding: 0; margin: 20px 0; } #container .code pre.prettyprint { margin:0; overflow: auto; } #container .codeTitle { color: #aaa; background-color: #111; padding: 8px; font-size:18px; border-bottom: 1px solid #555; } #container code, #scroller code { color: black; font-size: 16px; } #container .blackBG code, #container .darkBG code { /* carl removed color: #ccc; */ } #container pre { font-size: 1.1em; padding:8px; background-color:#333; color:white; border: 1px solid #777; } /** TOSS **/ #container .box { background-color: #91e600; text-align: center; font-family: Asap, Avenir, Arial, sans-serif; width: 196px; height: 100px; line-height: 100px; overflow: hidden; color: black; position: absolute; top:0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /** BUTTONS **/ #container .button { display:inline-block; border-radius:8px; border-bottom-width: 2px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6), 0px 3px 6px 0px rgba(0, 0, 0, 0.6); cursor:pointer; text-align: center; font-family: Signika Negative, Asap, Avenir, Arial, sans-serif; position:relative; margin: 4px; color:black; } #container .largeButton { padding: 12px 24px; font-size: 20px; margin: 12px 8px; min-width:110px; } .greenGradient { border: 1px solid #6d9a22; background-color: #699a18; background: linear-gradient(to bottom, #8cce1e 0%,#699a18 52%,#639314 53%,#76b016 100%); /* W3C */ text-shadow: 1px 1px 2px #384d16; color:#fff; text-decoration: none; } /** EXPANDABLE POINTS (FAQ) **/ .expPoint, .expList li { list-style: none; line-height: normal; margin: 0 0 0 8px; padding: 6px 4px 4px 24px; position:relative; border: 1px solid rgba(204,204,204,0); font-size: 110%; color: #111; font-weight: normal; } .expPoint, .expContent { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; line-height: 140%; } .expPoint:hover, .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0; overflow: hidden; color: #444; margin: 2px 0 0 0; padding-top: 0; font-size:16px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } .arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #999; display:inline-block; margin: -4px 8px 0 -14px; vertical-align: middle; opacity:0.8; } .tableCellDesktop { display: table-cell; } .tableCellDesktop img { left: 120px; } @media screen and (max-width: 860px) { .tableCellDesktop { display: block; } .tableCellDesktop img { left: 0px; } }
  4. Hi everyone, I need GSAP WordPress plugin. If anyone know please share here.
  5. Hi, I have build a really small component (see codepen) which is a list of entries with the first being sticky element. I would like to scroll to an entry which seem slightly buggy due to the sticky element, or I am doing something wrong. If you click on the the last element you will see what the problem is. It works well for entries where scrolling is required, but if en entry sits at the end (entry 9 for instance), where we can't scroll to, then the scroller does not scroll to very end but leaves the gap at the bottom (offset of 30px). Is there a way around this (without adding a margin-bottom to the ul list). I hope I could explain it well, if not, please let me know and will try to elaborate. Best regards Thomas PS: the markup can't be changed
  6. Hi, Few months ago I needed a solution for a very special case. I needed to add custom class to the element with custom animated property which I can use everywhere. Related topic: So I ended up with the following plugin, which adds visibility hidden to the element when we reach opacity 0, and removes the visibility property when opacity is not 0. (No, I can not use GSAP inbuilt autoAlpha as that adds visibility visible, but my elements might be hidden with CSS selector) _gsScope._gsDefine.plugin({ propName: "n2AutoAlpha", API: 2, version: "1.0.0", overwriteProps: ["n2AutoAlpha"], init: function (target, value, tween, index) { var start = window.getComputedStyle(target)["opacity"]; if (typeof value === "function") { value = value(index, target); } this._tween = this._addTween(target.style, "opacity", start, value, "n2AutoAlpha"); return true; }, set: function (ratio) { this._super.setRatio.call(this, ratio); if (this._tween) { if (ratio === 0 && this._tween.s === 0) { this._tween.t.visibility = "hidden"; } else if (ratio === 1 && this._tween.s + this._tween.c === 0) { this._tween.t.visibility = "hidden"; } else if (this._tween.t.visibility === "hidden") { this._tween.t.removeProperty("visibility"); } } } }); It works like a charm in most cases. The following scenario is just the simplified version of the production code. The timelines and such are fixed and I can only change the GSAP plugin itself. I have two timelines and both can contain several tween and all tween applies to the same element. When tl1 ends, it starts to play tl2, when tl2 ends, it plays tl1 again. tl1 is an x animation, which also reset the opacity value to the original one. tl2 animates the opacity from 1 to 0 GSAP autoAlpha -> Everything works, expect the animated box do not get hidden when the browser is smaller than 600px. https://codepen.io/anon/pen/JZdzwK Custom plugin -> The visibility status does not change on when tl1 runs from the second time. https://codepen.io/anon/pen/dKorrv When tl2 ends with opacity 0, it sets the visibility to hidden, but somehow the custom plugin skipped in tl1 and visibility hidden is not removed and opacity is not set to 1. Solution would be that the plugin set opacity and adjust the visibility as the core autoAlpha works. How can I reach that in my plugin?
  7. Hello everyone, I have worked on JS-based animations with GSAP libraries for one year. The product I am working on is that provides User Mostly, I use TimelineMax to create timeline animations by using top/left, opacity, scale,... properties. I think my app will be better if I can combine Built-in animations with Timeline, then I can schedule the built animation with duration and offset in my timeline. Built-in animations for example: bounce, slideIn, flash,... reference here: https://daneden.github.io/animate.css/ It's a big challenge to translate from CSS to GSAP based Javascript animations. So I am looking for a plugin powered by GSAP Timeline libs. Please tell me if you have any plugin like that. Thanks a lot.
  8. Although there are already many official plugins available, you will still encounter situations where you want to integrate other third-party libraries such as: three.js, p5.js, and other webgl, canvas libraries. So I don’t know if the official can provide a guide to developing a gsap plugin? Thanks~
  9. Dear support, I am new to GSAP and I consider to become member of business Green, because I am amazed by GSAP's potentional for animation. I am especially interested in the SVGMorph plugin. Ideally I would want to try this: (If it's allowed with the license) Is it allowed with the business Green license to create software plugins from the GSAP library ? 1. Am I allowed to use the (unaltered) GSAP library and the (unaltered) SVGMorph script to create a small custom app that outputs svg data. 2. Use this output svg data from the custom app to drive vector animation tweening in an animation software. We only intend to use this internally in our animation studio as a tool for the production of rendered animation. We don't intend to sell or publish this custom app. We simply love some of the tweening features of GSAP and would like to add them to our tools, but we don't animate for web/SVG. Is this possible with the business Green license or am I infringing on the copyright? Thanks in advance, Sincerely, Jeroen Koffeman
  10. hi! In the code pen you see an animation for the menu. I use the splittext plugin as you can see. First time you open the menu, everything animates as intended. But after closing once, the second time it seems like it's ignoring the timeline. Been fiddling with it for a long time but can't seem to figure it out. Anyone has a hunch of what's going wrong?
  11. Thought I'd post in case someone else finds this useful. Using v0.4.0 of the scramble text plugin I was able to use multibyte emoji in the chars property string after modifying the following lines in scrambleTextPlugin.js: 1) this.chars = chars.split(""); to this.chars = [...chars]; 2) startText = endText.substr(0, ((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0); to startText = [...endText].slice(0,((this._length + (this._tweenLength ? 1 - (ratio * ratio * ratio) : 1) * this._lengthDif) - (l - i) + 0.5) | 0).join(''); 3) endText = endText.substr(i, ((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0); to endText = [...endText].slice(i,((this._length + (this._tweenLength ? 1 - ((ratio = 1 - ratio) * ratio * ratio * ratio) : 1) * this._lengthDif) - i + 0.5) | 0).join(''); Animation looks something like this now... scrambleText: { chars: '??????????????????✌✋?✊????❤????????????????????????????????☕???????????????♨?????⛽?⛵?✈?☀☁??☔⚡⛄??✨???⚽⚾??⛳?♠♥♦♣???????☎?????????????✂???♿?⚠?↗↘↙↖♈♉♊♋♌♍♎♏♐♑♒♓❗©®™????㊙??', ... } Makes use of the spread operator which is ES6, browser compatibility is listed near the bottom of this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator If anyone has improvements they'd be appreciated Also, haven't tested every emoji, but it seems to be working with ^ so far...
  12. Hi guys - To create a tween that animates as you scroll what do you need exactly? I am referencing both tweenmax and scrollmagic and I also added the gsap animation plugin. No matter what I do this doesn't seem to want to work. Please help!
  13. I'm using ThrowPropsPlugin with no success on webpack, I Import TweenMax as import { TweenMax } from 'gsap' and import Draggable from 'gsap/Draggable' They work good, however when I try to use ThrowProps, I import it from the common-js folder of ShockinglyGreen as import 'app/vendor/ThrowPropsPlugin'; No errors, but it won't work either. Any help is much appreciated, thanks!
  14. This works : npm install gsap and npm install @types/gsap by configurig tweenlite into systemjs packaging, worked as expected with angular 2/4 The questions are how to install business green gasp package so I can use with angualr 2/4. How plugins like splittext can be used along with this. Appreciate any help. Thanks
  15. I want the SVG animation that I found on the left to have the same effect on the right element. What am I doing wrong?!!?!!?! This is driving me crazy -- why is there a double stroke effect? How can I fix this. Any assistance would be greatly appreciated. Thanks!
  16. Hey guys, great product. Thank you so much!
  17. carleaql

    Smooth Morph SVG

    Hello, I'm trying to get a smooth animation with MorphSVG: http://codepen.io/carlbren/pen/pEYkRg The steps should as smooth as these ones: http://codepen.io/waterfallmedia/pen/ZbOjRO http://codepen.io/GreenSock/pen/WQjRXE (see the cape animated with waveSVG which is not supported) http://codepen.io/osublake/pen/meepJE You can see a stop between the steps in my animation. Please, do you have any idea of what I could do to not feel the steps in the animation? Thanks!
  18. Hello everybody! I am introducing my effort to clone/mimic the reusable animation from animate.css into greensock version. I am inviting everyone here to contribute to the project I've started on Github! First I would like to thank to the founders and administrators who helped me to understand the difference between animate.css and gsap in terms of animation. GreenSock is the one who has flexible building blocks to create amazing web animation. So yeah! Here we go I am now every masters and new user to contribute to my unofficial plugin! You can find the repo links and demo below! DEMO: http://warengonzaga.github.io/sites/animatecssplugin.html (Underdevelopment) GITHUB REPO: https://github.com/WarenGonzaga/AnimateCSSPlugin (Contribute Today!) OFFICIAL GROUP CHAT: https://tlk.io/animatecssplugin/ OFFICIAL BLOG: http://warengonzaga.com/blog/2016/09/20/animatecssplugin-js-gsap/ (Dead Link wait for further updates) ORIGINAL TOPIC: http://greensock.com/forums/topic/15082-best-way-to-use-gsap-with-animatecss/ Calling for @jonathan, @carl, and also @jack they are the GSAP Legends! Best Regards, Waren Gonzaga
  19. Hello everyone here! I am planning to make custom free unofficial plugin for GSAP (it would be nice to make official plugin). But my only problem is where do I start? There's no documentation on how to make own/custom plugin for GSAP. I would like to make some free custom plugin for GSAP for the purpose to extend the abilities and powers of GSAP. I already create a repo for my plugin project for GSAP and I am inviting you guys to contribute! Any suggestions would be great! Calling for @Jack, @Carl and @Jonathan (They are GSAP legends) Github Repository: https://github.com/WarenGonzaga/AnimateCSSPlugin Best Regards, Waren
  20. Hi there, I'm starting to use DrawSVG and I really can't make the drawing properly. I read the tutorials and watched the videos a few times and all that I need is to make the drawing properly. Firstly, I don't want the text coming up first, I want the drawing happening along the duration of the tween and revealing the text. Please let me know what's is wrong with my pen. It's an excellent plugin and we have the business club here at work, but I'm testing all the plugins before we place into our production. Any help it will be great. Kind regards, Fernando Fas
  21. GreenSock

    ModifiersPlugin

    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. You can define a "modifier" function for almost any property; this modifier intercepts the value that GSAP would normally apply on each update ("tick"), feeds it to your function as the first parameter and lets you run custom logic, returning a new value that GSAP should then apply. This is perfect for tasks like snapping, clamping, wrapping, or other dynamic effects. It's completely up to you! Parameters: value, target The modifier functions are passed two parameters: value (number | string) - the about-to-be-applied value from the regular tween. This is often a number, but could be a string based on whatever the property requires. For example if you're animating the x property, it would be a number, but if you're animating the left property it could be something like "212px", or for the boxShadow property it could be "10px 5px 10px rgb(255,0,0)". target (object) - the target itself For example, change the x of one object based on the y of another object or change rotation based on the direction it is moving. Below are some examples that will help you get familiarized with the syntax. Snap rotation The tween below animates 360 degrees but the modifier function forces the value to jump to the closest 45-degree increment. Take note how the modifier function gets passed the value of the property that is being modified, in this case a rotation number. See the Pen BzJxBB by GreenSock (@GreenSock) on CodePen. Clamp with Modulus The tween below animates x to 500 but the modifier function forces the value to wrap so that it's always between 0 and 100. See the Pen BzJxBB by GreenSock (@GreenSock) on CodePen. Carousel Wrap Have you ever built a carousel and wrestled with making it loop seamlessly? Perhaps you duplicated each asset or wrote some code that moved each item back to the beginning when it reached the end. With ModifiersPlugin you can get a seamless repeating carousel with a single staggerTo()! The example below tweens each box to a relative x position of "+=500". Click the "show overflow" button to see each box get reset to x:0 when it goes beyond 500... See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen. Advanced demos We've only scratched the surface of what ModifiersPlugin can do. Our moderator Blake Bowen has been putting this new plugin to the test and has an impressive collection of demos that will surely inspire you. View the docs for ModifiersPlugin. Caveats: ModifiersPlugin requires TweenLite or TweenMax version 1.19.0 or later. RoundPropsPlugin taps into the same mechanism internally as ModifiersPlugin (to maximize efficiency, minimize memory, and keep kb down). Think of a roundProps tween as just a shortcut that creates a modifier that applies Math.round(), thus you cannot do BOTH roundProps and a modifier on the same property. It's easy to get that functionality, though, by just doing Math.round() inside the modifier function.
  22. Hi, I have a text inside a div and then I'm calling SplitText function to seperate them into lines. But on window resize lines remais too long for mobile and I need them to recalculate on window resize to fit into browser witdth. How can I update on window resize lines that are created from SplitText ?
  23. Hello, I noticed Greensock has an npm package, however I noticed the morphSVG plugin does not have an npm package. When can we expect one to arrive? Thank you.
  24. Here is a fun idea: use GSAP to generate CSS Code. It would be a nice plugin to write a GSAP animation and have it output a CSS animation in N frames. I imagine it would be something like what Bounce.js does (https://medium.com/tictail/bounce-js-smarter-keyframes-ffa13a501ea7#.9tdmhd7z3). There are some environments that due to setup or legal issues it wouldn't allow to add a 3rd party library, but still you need to use the same timing/animation effects you used elsewhere. A plugin that allows you to export your animation to CSS animation will certainly help a lot.
  25. Stumped on this. I would like to use the attr plugin to do a simple animation for my banners, basically just have an image animate in from the side or top. This page makes it seem like I could use the attr plugin to animate the x, y coordinates of an element. I can get the heigh and width animation working as long as I use a table, but can't figure out how to get the x and y working. https://greensock.com/AttrPlugin My html and scripts are attached. Archive.zip
×