Search the Community

Showing results for tags 'plugin'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • 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 41 results

  1. teejay_hh

    ScrollTo and position Sticky

    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
  2. RolandSoos

    Custom GSAP plugin unexpected behavior

    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?
  3. xpo_greensock@knorex.com

    Built-in animations plugin powered by GSAP libraries

    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.
  4. bazan.erick

    Can't use ThrowProps in Webpack

    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!
  5. 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~
  6. 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
  7. flowen

    timeline problem with splittext

    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?
  8. Praney Behl

    FabricJS Plugin?

    Hi, I have been playing with the Fabric.js library for a little while. What like about it is the ease of transforming objects and a couple more. I am wondering if there is a plugin for Fabric.js available with GSAP? If not then how to use Fabric.js like transformations(at http://fabricjs.com/customization/) in Kinetic.js? Thanks in advance, Praney
  9. Tamas

    How to use Draw SVG Plugin

    I have simple question. When I going to use the Draw SVG Plugin does it work like, that I have a svg illustration and I drag it into the plugin and the plugin will create the path code and animation as well? The plugin automatically convert the svg into js path codes? So I don't need to write the illustration lines in js? I'm quite beginner so hope it's clear what is my question! Thanks in advance for all advice
  10. sumtype

    Emoji with ScrambleText Plugin

    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...
  11. 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!
  12. 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
  13. 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!
  14. JasperSpeicher

    String concat Error in 1.19.1

    Hey guys, great product. Thank you so much!
  15. 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!
  16. Hi, I am using the Draggable plugin and I need to enable/disable it sometimes. I can't find a sample on the help documentation to control this. The follow exemple seems not to work : Draggable.enable(); Thanks for your help.
  17. WarenGonzaga

    AnimateCSSPlugin is now Open!!!

    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
  18. WarenGonzaga

    How to make Plugin for GSAP?

    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
  19. fernandofas

    Not working out DrawSVG plugin

    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
  20. edonbajrami

    Splittext on window resize

    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 ?
  21. shai

    npm package for MorphSVG plugin

    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.
  22. emmanuelulloa

    GSAP to CSS Keyframes/Animation

    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.
  23. sschulman

    animating with Attr Plugin

    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
  24. Hi! I'm working on a custom plugin that is project specific. Basically, I created a class that represents an SVG arc and the plugin will tween the rotation of the arc around a point and change its thickness etc. Everything works perfectly except when I try to pass in an array of targets, in which case only the first element in the array is tweened, despite init() being called and run successfully. I've spent all day trying to figure this out and I can't make any headway, and I was hoping someone here had seen something similar and could give me some insight. I copied the code over to a codepen to see what I'm talking about, but it is probably easier to just to clone the repo: https://github.com/tysmithnet/gsap-svg-arc-plugin Just load up index.html Key files: SvgArc.js - class abstracting the svg arc, pretty much just knows how to create an SVG path gsap-svg-arc-plugin.js - the gsap plugin index.html - test file illustrating the issue Thanks for looking! T
  25. afulldevnull

    Publishing plugins

    Hi there, I checked the licensing terms, and didn't see anything related to the publishing of plugins. Are there any restrictions on publishing a custom plugin as FOSS? Thanks, T