Search the Community
Showing results for tags 'plugin'.
Found 54 results
-
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
-
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! -
Hey guys, great product. Thank you so much!
-
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!
-
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.
-
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
- 4 replies
-
- 1
-
-
- animate.css
- gsap
- (and 1 more)
-
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
-
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 ?
-
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.
-
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
-
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 -
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
-
Hi! I'm writing a plugin for a project I'm working on and I'm running into an issue where my plugin's init method is called twice when used in conjunction with TweenMax.from(). Is this by design or am I making a mistake somewhere? Consistently, the sequence of calls is init(), set(1), set(0), init(). Any insight you could give me on this behavior would be greatly appreciated. Thanks!
-
Hi, Working on some banner ads, where filesize is important, I was wondering if it is possible to use the yoyo effect without loading TweenMax.min.js . At the moment it's the only effect I'm using TweenMax for, but it's an extra 76 kb if I'm not mistaking. I included a codepen demo where I built the yoyo effect as a TweenLite sequence, but it's not very beautiful to copy paste this every time I want a similar effect. Been looking around at the forum, but can't really find a solution (Using the CDN links is of course an option, I know). Thanks in advance, Wouter
-
Hi, Can anyone help: I'm using the scrollTo plugin and I need a callback that will fire if the Tween is interrupted by the user manually scrolling. Does functionality like this exist or is it possible to create it? Thanks, Will
-
I am getting a very odd result when using this code: import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([MotionBlurPlugin]); function init():Void{ mc._visible = false; doFrame1(); } function doFrame1():Void{ mc._visible = true; TweenLite.from(mc,.5,{_x:mc1._x, motionBlur:true,delay:2}); } init(); There is a jump that happens before the animation. This only occurs if I use another movieclip _x for the tweenlite, which I absolutely have to do. In the main version the other mc acts like a tracker. Any ideas? https://www.dropbox.com/sh/f9fa8tnvb37ty9z/wBidYq3aYx This is a reference file. Thx P
-
Hi there, I am using GSAP with Kineticjs and I am very happy with the combo. One of the things I like most about GSAP - alongside its features and super performance - is the way it helps me organizing my code and overall workflow. I think Kinetic and GSAP are a very good match for all sort of canvas-based applications. I have a couple of questions/doubts about the Kineticjs GSAP plugin - which I use a lot (the autoRotate support provided by the kinetic+bezier plugins saved me literally hours of pain). The questions are quite Kinetic-specific but this forum feels like the right place to discuss this topic. The GSAP Kinetic plugin handles drawings automatically by default (unless "autoDraw" is set to false - that took me quite a while to find!). On the other hand Kinetic has recently introduced batchDraw as a way to minimize layer redrawing by "batching up" updates in a special animation. I am not 100% sure what the best drawing strategy is when the two libs are combined: - Should the GSAP plugin be changed to use layer.batchDraw instead of layer.draw by default with autoDraw=true? Or should that be configurable (and when would one pick one vs the other)? - One should set autoDraw=false and handle updates manually by calling layer.batchDraw onUpdate? I currently use the latter almost always as it feels like I am having more control on what gets drawn (for example when animating many groups/shapes belonging to the same layer simultaneously in different tweens/timelines). In my understanding this means each GSAP "tick" queues up drawing requests into a Kinetic Animation which then performs the actual drawing when its own RAF fires - and that does not seem very efficient (as there are 2 RAF at the same time). Please correct me if I got it all wrong. Ideally I would like the GSAP plugin to do "the right thing" with batching (it seems it sort of does already?) - but would that work reliably when shapes belonging to the same layer are animated by different tweens/timelines simultaneously (that's my most frequent use-case)? Many thanks to the group for any advice on this. Keep up with the great work.
-
Hey All, I have been working with svg.js a lot recently. I noticed you guys have a raphael plugin, which is brilliant. svg.js and Raphael are very similar however svg.js has the added bonus of being able to work with masks and clipping paths. I have created my own plugin which is basically your Raphael plugin with some modifications, it works nicely for transforming svgjs objects, the only thing it doesn't allow you to do alter the transformation origin/anchor, im currently trying to work this out because svg.js doesn't have native support for this unfortunately. If you're interested at all I've dropped it onto a gist All the best, Rob
-
Hello.. Thanks ahead of time for any help! Im trying to animate a pseudo-element with the CSSRulePlugin. But it will only animate the old syntax of :before instead of the new CSS3 double colon syntax ::before. The double colon :: is supposed to help in CSS3, with separating the difference between pseudo classes : and pseudo elements ::. My example (click Run): http://codepen.io/jonathan/pen/enhFy JS: var rule = CSSRulePlugin.getRule(".myClass:before"), rule2 = CSSRulePlugin.getRule(".myClass2::before"); TweenMax.to(rule, 2, {cssRule:{ backgroundColor:"#F43C09" }}); TweenMax.to(rule2, 2, {cssRule:{ backgroundColor:"#F43C09" }}); CSS: .myClass:before { color:#FFF; background-color:#F7A009; content:"This content is a Pseudo Element "; } .myClass2::before { color:#FFF; background-color:#F7A009; content:"This content is a Pseudo Element "; } In my above example you will see both :before and ::before. When i try to animate the ::before i get this error in the console: uncaught exception: Cannot tween a null target. Am i missing something? Thank you for any assistance!
-
where can i finde some sample from useing plugin like blur in as2?
-
Hello, I've got an animation of some objects looping through a bezier using the BezierPlugin. I want to fire a function to make the objects stop with an ease, wherever they are but along the bezier curve. Imagine a racetrack and there's suddenly a red flag, all the cars need to come to a halt all of a sudden. How would I go about that? I tried overwriting the tween but it just stops. Another question as well on how the bezier the plugin draws, how can I make it not start drawing the bezier from x:0 y:0. Say I want it to start on the middle of the stage instead. Thanks!
-
How do you set delay in scrollTo plugin? for example: tlS.to(window, 2, {scrollTo:{y:$(".goImg").offset().top, delay:4}, ease:Power4.easeInOut}) I want to delay it for 4 second but it doesnt work. and I not sure is this a bug or not that when I set ease to ease:Back.easeInOut, the scrolling stop working also...
-
Hello GreenSock, Lately, I've been getting into some projects that combine the Flash display list, the Starling framework, and the Away3D framework. What a crazy mixed up world -- especially when it comes to rotation properties. As a Flash-based Stage3D framework, Away3D "sensibly" defaults to degrees (despite what some of my Unity guys might think of that). However, Starling kinda gums up the proverbial works by hopping to radians for expressions of rotation. Granted, if an AS3 developer is using matrix transforms on a regular basis, radians are going to make some sense. But for most Flash (and GreenSock) users migrating to Starling, this can be a challenge. Perhaps we could register a new plugin that provides "useRadians:true" at the level of simple rotation tweens. I've enjoyed the convenience of "useRadians" on both the ShortRotationPlugin and the BezierPlugin, but when it comes to simple rotations (especially where ShortRotation is not applicable), the only solution I found has been to create custom unit-converting "myRotation" getter/setter on the custom class. What is your suggestion? Maybe I'm missing something obvious, if so please rap my knuckle. Otherwise, might this call for a new plugin? such as... TweenMax.to(myStarlingSprite, 10, {radianRotation:{rotation:Math.PI*2}, repeat:-1, ease:Linear.easeNone}); // rotate the starling sprite '360 degrees' every 10 seconds
-
Hello, I would like to use the JS Raphael plugin to make a world map like this one, made for the original Raphael plugin. http://raphaeljs.com/world/ How would I do that? Thanks! Zach
