Jump to content
GreenSock

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

Search the Community

Showing results for tags 'plugins'.



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 19 results

  1. With some animation engines it can be frustrating trying to get something to rotate in a specific direction. With GSAP you can explicitly set the direction or let GSAP figure out the shortest distance. Watch the video Interactive demo See the Pen DirectionalRotation Visualizer by GreenSock (@GreenSock) on CodePen. Check out the DirectionalRotation Plugin docs for more info.
  2. MorphSVG's default settings typically deliver beautiful results but sometimes you may need to tweak things to get a certain effect or avoid weird transitional states or kinks. This video explains advanced features of MorphSVGPlugin that give you plenty of flexibility. Watch the video For more information and plenty of interactive demos, check out the MorphSVG docs. Happy tweening!
  3. When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works. Video Code CSS html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-color:var(--myColor); } JavaScript TweenMax.to("html", 1, {"--myColor":"orange", yoyo:true, repeat:20}); Demo See the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen. Support for CSS variables was added in GSAP 1.20.0
  4. Hey, Im making a site with Vue and Nuxt and Im using gsap from node modules. In have problems loading the plugins I've bought from a folder. If I want to use e.g ScrollTo plugin - I've tried putting the minified script in a folder and then using it, but it throws me an error that it can't find TweenLite. How would I solve this?
  5. Hello All, We've run into an issue using gsap with Cocos Creator native builds. It seems like some updates they've done recently has caused conflicts with gsap. Previous versions of Cocos Creator had no issues. From what I can tell, the Creator runtime dies when it hits: _createSVG = function(type, container, attributes) { var element = _doc.createElementNS("http://www.w3.org/2000/svg", type), reg = /([a-z])([A-Z])/g, p; for (p in attributes) { element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]); } container.appendChild(element); return element; }, The container.appendChild(element) line. I get an error along the lines of: ERROR: TypeError: container.appendChild is not a function. (In 'container.appendChild(element)', 'container.appendChild' is undefined), location: src/project.dev.js:5718:34 I'm wondering if there's not some DOM elements trying to be accessed that don't exists (the cocos runtime has no real DOM). This function appears to be part of the CSSPlugin. I'm wondering if there's a way to remove the CSSPlugin cleanly from gsap. If anyone could point me in the right direction, I would appreciate it. I didn't find any information regarding custom builds or removing plugins in any of the documentation. Thanks for the help, and thanks for the great lib!
  6. hey guys! GSAP animation is the first and only animation library I have used. Although learning it through the Docs hasn't been difficult, it would be nice to have someone develop an extension for GSAP products for code editors. This extension could provide quick access to parameters, functions stc. I think this has been a community demand for a long time and I would request anyone with knowledge of developing IDE extensions to please take up this project thanks in advance!
  7. Hey folks, I'm trying to setup GSDevTools on a Vuejs using Npm and Webpack. All the plugins are in the folder: /node_modules/gsap I'm using Vuejs and my component looks like: <template lang="html"> <div> <div id="animate" @click="animateIt"> content </div> </div> </template> <script> import {TimelineMax, CSSPlugin, Sine, GSDevTools} from 'gsap' export default { name: 'ComponentName', data: () => ({ var_1: 'dummy' }), methods: { animateIt: function() { var t1 = new TimelineMax() t1.to('#animate', .2, { opacity: 1, ease: Sine.easeInOut }) .to('#animate', .2, { css: { color: red, }, ease: Sine.easeIn }) } }, mounted() { GSDevTools.create() } } </script> For others plugins they work as expected so i can import them when needed using for example: import {TimelineMax, CSSPlugin, Sine, Power4} from 'gsap' But if I add the GSDevTools as for the others this doesn't work. If I import the plugin with: import {GSDevTools} from 'gsap' // or import GSDevTools from 'gsap/GSDevTools' // or import GSDevTools from '../../../node_modules/gsap/GSDevTools' // or import * as GSDevTools from '../../../node_modules/gsap/GSDevTools' // or var GSDevTools = require ('gsap/GSDevTools') // or var GSDevTools = require ('../../../node_modules/gsap/GSDevTools') I got this error: I'm stucked, please Help!!! Thanks
  8. Hello, I am an ember developer and convinced my company to have a closer look at gsap and they did. So we are gsap member and I am now kinda struggling to figure out how I can use the shiny plugins which are not free to use. I use an ember package -> https://github.com/willviles/ember-gsap to load gsap into an ember application. You can import gsap via an es6 import import { TimelineMax } from 'gsap' The ember gsap addon doesnt support any of the business green plugins so I am looking for workarounds. In ember you can add files to the vendor folder which then can be loaded on startup. I know this is very framework specific and I probably dont find anyone here with ember knowledge. so in the ember-cli-build.js you can add something like this. app.import('vendor/CustomEase.min.js') app.import('vendor/CustomBounce.min.js') app.import('vendor/CustomWiggle.min.js') Which now makes the plugins available. The only thing left todo is to import them where you need them. Which is my problem. I dont really know how to import `import CustomWiggle from ?????` it. Any tips ??
  9. Hi, I would want to know if it is possible tu use premium plugins with the npm package (without having to download the package from my account). If it is not possible do you plan to have like a key to unlock the premium plugins using the npm package ? Thanks.
  10. Conversant

    Loaded Plugins

    Is there a way to see what plugins are loaded? For example, I want to be able to detect if CustomEase or ScrollTo is available on a page.
  11. Hi If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests? If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file? At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously) Or is this just a bad idea all round? Emily
  12. Hi. First of all, I'd like to say I'm sorry cause I'm really new in tweening. I've made an example of what I'm trying to do. I need to animate that circle making each stroke to go from 0 to 100, one after other, clockwise. Each one will have a different color. The way I tryied, It did't work at all. The stroke animate, and then back to point zero. I need something more like animating fill.
  13. Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum
  14. Hi, I was wondering if I can call directionalRotation plugin directly in Javascript. Something like: var shortAngle = TweenMax.directionalRotation("420_short"); > shortAngle = 60 I just need the value returned by the plugin, I'm not using it in a Tween or something. Is that possible?
  15. Hey everyone, I was interested in learning more about how to create a physics animation effect, similar to those that I've seen in demos or in live sites (like kairoswatches.com). Specifically, I'm interested in learning more about what goes into the creation of say....a field of star-esque lights that just link and float about behind other things (for instance). I'm not trying to have someone make something for me, but while I am an experienced front-end developer, I find the physics stuff slightly intimidating. In summary, if anyone can recommend some resources/methodologies that would best help me with what I'm trying to achieve I'd appreciate it. If I need to add/provide any other info, just let me know. Thanks!
  16. Hi, I'm wondering whether I should be writing my own plugins for GSAP. I have two cases where this might be nice: 1) First I'm animating richmarkers on google maps. To animate latitude and longitude I must call setPosition. I can do this ok with onUpdate, but then if I'm also animating color, say, it starts to get a bit cumbersome. 2) In another project I'm using fabric.js. I notice you have a plugin for easel.js but not fabric. So for cases like this should I write my own plugin to make the syntax nicer? If so, are there any docs or examples on doing this? Thanks.
  17. Hi guys, I just tried the ThrowPropsPlugin to move a MovieClip in x-direction instead of y-direction like in the example. I took the code from the example and changed every y-value to an x-value. However, it doesn't seem to work smoothly. The drag-movement is somewhat stuttered. Strangely enough, the drag-movement where the position exceeds the bounds runs smoothly. I've attached a minimal working example, maybe someone can have a look and tell me where the code goes wrong. For some reason I'm not allowed to attach any file, so I'll just upload to my Dropbox: https://dl.dropboxusercontent.com/u/289091/ThrowPropsPluginTest.fla
  18. Sometimes I use a plugin's property without activating that plugin. Of course that is my fault and I fixed it. However, I find it helpful to be notified that the plugin was not activated. Currently I inserted into the TweenLite.as function _initProps (line 574): } else { if (!target.hasOwnProperty(p)) { trace("TweenLite._initProps:", p, "is not an activated plugin and not a property of", target, ". Creating PropTween."); } I hesitate to touch the source code, which would be replaced when a new version is released. Do you recommend another way to see a trace statement when the property has not been activated?Can you you see examples of problems with this trace technique? Thank you for reading!
  19. Hi All new to GreenSock I cannot find complete documentation on the TransformAroundAPoint plugin - specifically all the parameters that can be or should be passed in, configuration and perhaps some more examples. I have looked at this page and I would like something in more detail if it is available. http://api.greensock.com/as/com/greensock/plugins/TransformAroundPointPlugin.htm Thanks
×