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

  1. GreenSock

    ModifiersPlugin

    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. This is a good example of the ModifiersPlugin, but as of GSAP 3 you should probably be using GSAP's SnapPlugin for this sort of thing: 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. This is a good example of the ModifiersPlugin, but as of GSAP 3 you should probably be using GSAP's SnapPlugin for this sort of thing: 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 tween! 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... 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.
  2. https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react
  3. Introducing Flip Plugin Flip Plugin lets you seamlessly transition between two states even if there are sweeping changes to the structure of the DOM like re-parenting of elements which would normally cause them to jump to a new position/size. UI transitions that would normally be a nightmare just got remarkably simple to code. Watch the visual walk through video and you'll see why this is not your typical FLIP library. Flip Plugin is a membership benefit of Club GreenSock ("Shockingly Green" & above). It's called "Flip" because it uses the FLIP (First, Last, Invert, Play) animation technique (coined by Paul Lewis). SPECIAL OFFER: Use coupon code FLIP4GSAP during checkout to get 20% off! Valid through Saturday 2021-01-16. There's no better time to be a Club GreenSock member! Resources Full documentation Showcase How-to demos DrawSVG Values Beyond 0-100% DrawSVG now allows you to animate to values beyond the 0-100% range. That means that creating looping/wrapping effects with DrawSVG is even easier! Check out this collection of demos by Craig, a GreenSock moderator and the creator of MotionTricks.com. See the Pen Infinity Symbol Looping by Craig Roblewsky (@PointC) on CodePen. See the Pen Multicolor/target Looping (New DrawSVG) by Craig Roblewsky (@PointC) on CodePen. DrawSVG is one of many Club GreenSock plugins (not in the public downloads or repos). ScrollTrigger snap: "labelsDirectional" When you've got a timeline hooked up to a ScrollTrigger, you've always been able to set snap: "labels" to have it dynamically snap to the closest label, but the new snap: "labelsDirectional" option will take into consideration the direction of scrolling and force it to go to the next label in that direction. So, for example, users aren't forced to drag past the halfway point of sections to have it snap to the next one. It may sound like a small thing, but it can make things feel so much more delightfully intuitive. In the demo below, try changing snap: "labels" for a comparison - notice it'll only snap once you go past halfway? But "labelsDirectional" snaps based on the direction of playhead movement. See the Pen "labelsDirectional" Demo by GreenSock (@GreenSock) on CodePen. Other Improvements and Bug Fixes GSAP 3.6 also has a slew of other improvements and bug fixes so make sure to grab the latest files today!
  4. Hi guys ! Is that possible to couple those two plugins (Physics2d & MothionPathPlugin) to create a kind of "maze" what I want is that the svg circle fall and stop at the end of the path ๐Ÿ˜• i don't see this anywhere :3 thk's
  5. This is a guest post from one of the best teachers of GSAP, Carl Schooff, also known as SnorklTV. If you're new to GSAP or just looking to learn about the GSAP 3 syntax, his video courses are second to none! I can't tell you how many hundred's of questions I've seen in the GreenSock forums about controlling GSAP animations on scroll. I'm so happy there is finally a genuine GreenSock tool to power the future of scroll-driven animations. Before I get into the specifics, it's worth a moment of time to honor those that got us here. A short history of Scroll-driven Animations John Polacek paved the way in 2013 with Superscrollorama, a jQuery plugin that used GSAP under the hood. Many amazing sites were created with this highly-acclaimed, ground-breaking, and trend-setting tool. In 2014 Jan Paepke took the reins and did a complete re-write and SuperScrollarama became ScrollMagic. ScrollMagic was hugely successful as it offered a slew of new features. Excellent demo files made the tool easy for beginners to understand. Awards sites exploded with many clever effects made with the ScrollMagic and GSAP combo. However, as with many solo-led open source projects, it's popularity created a hefty support burden that couldn't be managed. As issues went unanswered in the ScrollMagic repo, more users found their way to the GreenSock forums asking for support on a product GreenSock didn't create or have any way of fixing. ScrollTrigger is born On June 1st, 2020, GreenSock released ScrollTrigger to a sold out audience via a historic YouTube Premiere. ScrollTrigger was built with a totally fresh perspective on how GreenSock animations should be controlled via scroll. Not only does the API offer more features than it's predecessors, but it has a strong focus on performance which really shines in this "mobile-first" world. And as you can expect with any GreenSock product support is phenomenal. For a full list of features, you'll need to check out GreenSock's ScrollTrigger API Docs, but my job here is to get you up and running quickly... so let's go! Watch the Video This video is from my course GSAP 3 Express. I've got over 6 hours of training and loads of exclusive demos to help you master the GreenSock Animation Platform from the ground up at creativeCodingClub.com As always, I load my videos up with info so that I don't have to write a ton of stuff, but here are some key points. Get ScrollTrigger and GSAP ScrollTrigger is hosted on a CDN along with GSAP. Just use the script tags below to load it into your page. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script> Register ScrollTrigger It's recommended to register ScrollTrigger in your JavaScript to avoid tree-shaking with build tools. gsap.registerPlugin(ScrollTrigger); You can get recent CDN Urls from the GSAP Overview in the docs. For use with npm or more advanced build tools check out the GSAP installation videos. Super Basic Demo with a Single Tween The animation is super slow so that you can see how the animation reacts to entering and leaving the scroller-start and scroller-end positions. See the Pen ScrollTrigger QuickStart by Snorkl.tv (@snorkltv) on CodePen. Control a Timeline with ScrollTrigger See the Pen GreenSock ScrollTrigger Timeline by Snorkl.tv (@snorkltv) on CodePen. GreenSock's Toggle Action Demo In the video I explained how toggleActions work and how important they are. For each toggle event (onEnter, onLeave, onEnterBack, onLeaveBack) you can assign an action (play, pause, restart, reset, resume, complete, reverse, none). You'll assign a toggleAction via a 4-part string like "restart pause resume reverse". The best way to understand how they work is to play with the values in the demos above and study the demo below. See the Pen toggleActions - ScrollTrigger by GreenSock (@GreenSock) on CodePen. I'm hoping these resources help get you up and running quickly. For more inspiration check GreenSock's massive collection of ScrollTrigger Demos. What's next? I've only scratched the surface of what ScrollTrigger can do. I'll definitely be creating more training on this awesome tool. If you need help learning GSAP and want to take your skills to the next level check out my courses at CreativeCodingClub.com.
  6. GreenSock

    BezierPlugin

    Note: This plugin was replaced with MotionPathPlugin in GSAP 3. Please see the GSAP 3 release notes for details. Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"? "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm. The values you provide in the array are essentially treated as anchors on the Bezier and the plugin calculates the control points. The target's current/starting values are used as the initial anchor. You can define a curviness special property that allows you to adjust the tension on the Bezier where 0 has no curviness (straight lines), 1 is normal curviness, 2 is twice the normal curviness, etc. Since "thru" is the default Bezier type, you don't need to define a type at all if this is the one you want. "soft" - the values that you provide in the array act almost like magnets that attract the curve towards them, but the Bezier doesn't typically travel through them. They are treated as control points on a Quadratic Bezier and the plugin creates the necessary intermediate anchors. The target's current/starting values are used as the initial anchor. "quadratic" - allows you to define standard Quadratic Bezier data (Quadratic Beziers have 1 control point between each anchor). The array should start with the first anchor, then control point, then anchor, control point, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. "cubic" - allows you to define standard Cubic Bezier data (Cubic Beziers have 2 control points between each anchor). The array should start with the first anchor, then 2 control points, then anchor, 2 control points, anchor, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. For full details please consult the BezierPlugin documentation.
  7. GreenSock

    jquery.gsap.js

    Note: The gsap.jquery.js plugin was created for GSAP version 2 and earlier. We have since released GSAP 3 with many improvements but this plugin was discontinued because it no longer seemed relevant with the widespread shift away from using jQuery for animation. GSAP 3 does NOT support this plugin. We recommend simply using GSAP directly for all your animation needs from now on. Good news for anyone using jQuery.animate() - the new jquery.gsap.js plugin allows you to have GSAP take control under the hood so that your animations perform better; no need to change any of your code. Plus GSAP adds numerous capabilities, allowing you to tween colors, 2D transforms (rotation, scaleX, scaleY, skewX, skewY, x, y), 3D transforms (rotationX, rotationY, z, perspective), backgroundPosition, boxShadow, and lots more. You can even animate to a different className! This plugin makes it very easy to audition GSAP in your project without needing to learn a new API. We still highly recommend learning the regular GSAP API because it's much more flexible, robust, and object-oriented than jQuery.animate(), but for practical purposes this plugin delivers a bunch of power with almost zero effort. Benefits Up to 20x faster than jQuery's native animate() method. See the interactive speed comparison for yourself. Works exactly the same as the regular jQuery.animate() method. Same syntax. No need to change your code. Just load the plugin (and TweenMax or TweenLite & CSSPlugin) and you're done. Adds the ability to animate additional properties (without vendor prefixes): colors (backgroundColor, borderColor, color, etc.) boxShadow textShadow 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin functionality 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin functionality borderRadius (without the need to define each corner and use browser prefixes) className which allows you to define a className (or use โ€œ+=โ€ or โ€œ-=โ€ to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. backgroundPosition clip Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAPโ€™s Bezier system is super flexible in that itโ€™s not just for x/y/z coordinates โ€“ it can handle ANY set of properties. Plus it will automatically adjust the movement so that itโ€™s correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Add tons of easing options including proprietary SlowMo and SteppedEase along with all the industry standards When animating the rotation of an object, automatically go in the shortest direction (clockwise or counter-clockwise) using shortRotation, shortRotationX, or shortRotationY For a detailed comparison between jQuery and GSAP, check out the cage match. Usage Download the files (requires version 1.8.0 (or later) of TweenMax or TweenLite!) and then add the appropriate script tags to your page. The plugin file (jquery.gsap.min.js) itself does NOT include GSAP because you get to choose which files you want to load depending on the features you want. The simplest way to get all the goodies is by loading TweenMax (which includes TweenLite, CSSPlugin, TimelineLite, TimelineMax, EasePack, BezierPlugin, and RoundPropsPlugin too). For example, assuming you put the TweenMax.min.js file into a folder named "js" which is in the same directory as your HTML file, you'd simply place the following code into your HTML file: All the goodies: <script src="js/TweenMax.min.js"></script> <script src="js/jquery.gsap.min.js"></script> If, however, you're more concerned about file size and only want to use TweenLite, CSSPlugin (for animating DOM elements), and some extra eases, here is a common set of script tags: Lightweight: <script src="js/plugins/CSSPlugin.min.js"></script> <script src="js/easing/EasePack.min.js"></script> <script src="js/TweenLite.min.js"></script> <script src="js/jquery.gsap.min.js"></script> Then, to animate things, you can use the regular jQuery.animate() method like this: //tween all elements with class "myClass" to top:100px and left:200px over the course of 3 seconds $(".myClass").animate({top:100, left:200}, 3000); //do the same thing, but with a Strong.easeOut ease $(".myClass").animate({top:100, left:200}, {duration:3000, easing:"easeOutStrong"}); //tween width to 50% and then height to 200px (sequenced) and then call myFunction $(".myClass").animate({width:"50%"}, 2000).animate({height:"200px"}, {duration:3000, complete:myFunction}); See jQuery's API docs for details about the syntax and options available with the animate() method. And yes, the jQuery.stop() method works too. Caveats If you define any of the following in the animate() call, it will revert to the native jQuery.animate() method in order to maximize compatibility (meaning no GSAP speed boost and no GSAP-specific special properties will work in that particular call): a "step" function - providing the parameters to the callback that jQuery normally does would be too costly performance-wise. One of the biggest goals of GSAP is optimized performance; We'd strongly recommend NOT using a "step" function for that reason. Instead, you can use an onUpdate if you want a function to be called each time the values are updated. Anything with a value of "show", "hide", "toggle", "scrollTop" or "scrollLeft". jQuery handles these in a unique way and we don't want to add the code into CSSPlugin that would be required to support them natively in GSAP. If skipGSAP:true is found in the "properties" parameter, it will force things to fall back to the native jQuery.animate() method. So if a particular animation is acting different than what you're used to with the native jQuery.animate() method, you can just force the fallback using this special property. Like $(".myClass").animate({scrollTop:200, skipGSAP:true}); This is our first crack at a jQuery plugin, so please let us know if anything breaks or if you have ideas for improvement.
  8. Hi! I have an animation that reveal my texts line by line with SplitTextJs. The problem I have is that I have my paragraphs that are splited line by line but my lines wraps so one line is now 2 lines It happen mostly when I refresh the page without the cache. On my codepen I need to refresh more than once without the cache to get the problem. Also, sometimes I have a problem with the split when I have some words in italic or in a span. Thank you!
  9. 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
  10. 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. Since launching MorphSVGPlugin, we've made a bunch of improvements and exposed several new features. Here are the highlights... The challenge Before we dive into solutions, it helps to understand the tasks that MorphSVGPlugin must perform in order to work its magic: Convert the path data string into pure cubic Beziers Map all of the segments between the start and end shapes (match them up), typically based on size and position If there are more segments in one than the other, fabricate new segments and place them appropriately Subdivide any segments with mis-matching point quantities If a shapeIndex number isn't defined, locate the one that delivers the smoothest interpolation (shortest overall distance that points must travel). This involves looping through all the anchor points and comparing distances. Convert all the data back into a string Isolate the points that need to animate/change and organize a data structure to optimize processing during the tween. That may sound like a lot of work (and it is) but MorphSVGPlugin usually rips through it with blazing speed. However, if you've got a particularly complex path, you'll appreciate the recent improvements and the new advanced options: Performance tip #1: define a shapeIndex MorphSVGPlugin's default shapeIndex:"auto" does a bunch of calculations to reorganize the points so that they match up in a natural way but if you define a numeric shapeIndex (like shapeIndex:5) it skips those calculations. Each segment inside a path needs a shapeIndex, so multiple values are passed in an array like shapeIndex:[5,1,-8,2]. But how would you know what numbers to pass in? The findShapeIndex() tool helps for single-segment paths, what about multi-segment paths? It's a pretty complex thing to provide a GUI for. Typically the default "auto" mode works great but the goal here is to avoid the calculations, so there is a new "log" value that will act just like "auto" but it will also console.log() the shapeIndex value(s). That way, you can run the tween in the browser once and look in your console and see the numbers that "auto" mode would produce. Then it's simply a matter of copying and pasting that value into your tween where "log" was previously. For example: TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", shapeIndex:"log"}}); //logs a value like "shapeIndex:[3]" //now you can grab the value from the console and drop it in... TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", shapeIndex:[3]}}); Notes shapeIndex:"log" was added in MorphSVGPlugin version 0.8.1. A single segment value can be defined as a number or a single-element array, like shapeIndex:3 or shapeIndex:[3] (both produce identical results) Any segments that don't have a shapeIndex defined will always use "auto" by default. For example, if you morph a 5-segment path and use shapeIndex:2, it will use 2 for the first segment and "auto" for the other four. Performance tip #2: precompile The biggest performance improvement comes from precompiling which involves having MorphSVGPlugin run all of its initial calculations listed above and then spit out an array with the transformed strings, logging them to the console where you can copy and paste them back into your tween. That way, when the tween begins it can just grab all the values directly instead of doing expensive calculations. For example: TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", precompile:"log"}}); //logs a value like precompile:["M0,0 C100,200 120,500 300,145 34,245 560,46","M0,0 C200,300 100,400 230,400 100,456 400,300"] //now you can grab the value from the console and drop it in... TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", precompile:["M0,0 C100,200 120,500 300,145 34,245 560,46","M0,0 C200,300 100,400 230,400 100,456 400,300"]}}); As an example, here's a really cool codepen by Dave Rupert before it was precompiled: http://codepen.io/davatron5000/pen/meNOqK/. Notice the very first time you click the toggle button, it may seem to jerk a bit because the entire brain is one path with many segments, and it must get matched up with all the letters and figure out the shapeIndex for each (expensive). By contrast, here's a fork of that pen that has precompile enabled: http://codepen.io/GreenSock/pen/MKevzM. You may noticed that it starts more smoothly. Notes precompile was added in MorphSVGPlugin version 0.8.1. Precompiling only improves the performance of the first (most expensive) render. If your entire morph is janky throughout the tween, it most likely has nothing to do with GSAP; your SVG may be too complex for the browser to render fast enough. In other words, the bottleneck is probably the browser's graphics rendering routines. Unfortunately, there's nothing GSAP can do about that and you'll need to simplify your SVG artwork and/or reduce the size at which it is displayed. The precompiled values are inclusive of shapeIndex adjustments. In other words, shapeIndex gets baked in. In most cases, you probably don't need to precompile; it's intended to be an advanced technique for squeezing every ounce of performance out of a very complex morph. If you alter the original start or end shape/artwork, make sure you precomple again so that the values reflect your changes. Better segment matching In version 0.8.1, there were several improvements made to the algorithm that matches up corresponding segments in the start and end shapes so that things just look more natural. So even without changing any of your code, loading the latest version may instantly make things match up better. map: "size" | "position" | "complexity" If the sub-segments inside your path aren't matching up the way you hoped between the start and end shapes, you can use the map special property to tell MorphSVGPlugin which algorithm to prioritize: "size" (the default) - attempts to match segments based on their overall size. If multiple segments are close in size, it'll use positional data to match them. This mode typically gives the most intuitive morphs. "position" - matches mostly based on position. "complexity" - matches purely based on the quantity of anchor points. This is the fastest algorithm and it can be used to "trick" things to match up by manually adding anchors in your SVG authoring tool so that the pieces that you want matched up contain the same number of anchors (though that's completely optional). TweenMax.to("#id", 1, {morphSVG:{shape:"#otherID", map:"complexity"}}); Notes map is completely optional. Typically the default mode works great. If none of the map modes get the segments to match up the way you want, it's probabaly best to just split your path into multiple paths and morph each one. That way, you get total control. Animate along an SVG path The new MorphSVGPlugin.pathDataToBezier() method converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a BezierPlugin-based tween so that you can essentially use it as a motion guide. Watch the video Demo See the Pen pathDataToBezier() docs official by GreenSock (@GreenSock) on CodePen. Morph back to the original shape anytime If you morph a path into various other shapes, and then you want to morph it back to its original shape, it required saving the original path data as a variable and feeding it back in later. Not anymore. MorphSVGPlugin records the original path data in a "data-original" attribute directly on the element itself, and then if you use that element as the "shape" target, it will automatically grab the data from there. For example: TweenMax.to("#circle", 1, {morphSVG:"#hippo"}); //morphs to hippo TweenMax.to("#circle", 1, {morphSVG:"#camel"}); //morphs to camel TweenMax.to("#circle", 1, {morphSVG:"#circle"}); //morphs back to circle. Conclusion We continue to be amazed by the response to MorphSVGPlugin and the creative ways we see people using it. Hopefully these new features make it even more useful. How do I get MorphSVGPlugin? If you're a "Shockingly Green" or "Business Green" Club GreenSock member, just download the zip from your account dashboard or the download overlay on GSAP-related page on this site. If you haven't signed up for Club GreenSock yet, treat yourself today.
  11. Hi everyone, I need GSAP WordPress plugin. If anyone know please share here.
  12. 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
  13. 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?
  14. 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.
  15. 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!
  16. 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~
  17. 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
  18. 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?
  19. 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
  20. 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
  21. 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...
  22. 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!
  23. 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
  24. 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!
  25. Hey guys, great product. Thank you so much!
ร—