Jump to content
GreenSock

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

Search the Community

Showing results for tags 'es6'.



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

  1. GreenSock

    GSAP 2.0 Released

    We've been getting requests for better support of modern build tools. With version 2.0 we're pleased to announce a switch to ES modules via NPM which should make your building, bundling, and tree shaking even smoother. Don't worry, the UMD/CommonJS flavor is still available and the CDN serves the same browser-friendly files as always. If terms like "UMD", "ES Modules", and "tree shaking" leave you scratching your head, fear not - GSAP 2.0 will work like a champ for you (as usual). There are no syntax, API, or browser-support changes. None. The major version bump was primarily due to the switch to ES modules for NPM users, that's all. DOWNLOAD GSAP NOW NPM, ES Modules, Webpack, oh my! Modern bundlers like Webpack and Rollup just love to snack on ES modules these days, usually grabbing them from NPM. So GSAP 2.0 is extra delicious covered in its chocolatey ES module outer shell. (If you're not using a bundler or NPM, skip this section entirely) npm install gsap Then you can import individual classes like: import TweenMax from "gsap/TweenMax"; import Draggable from "gsap/Draggable"; TweenMax includes (and exports) many of the commonly-used classes so you can also do this: import { TweenMax, TimelineLite, Power2, Elastic, CSSPlugin } from "gsap/TweenMax"; (TweenMax includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, DirectionalRotationPlugin, AttrPlugin, and all eases except CustomEase, CustomWiggle, and CustomBounce) As a convenience, there's also an "all" file that imports/exports every GSAP tool (except members-only bonus plugins), so you can do this: import { TimelineMax, CSSPlugin, ScrollToPlugin, Draggable } from "gsap/all"; IMPORTANT: if your animations aren't working as expected, it's likely an issue with tree shaking which can be easily resolved by referencing any plugins you're using. Read more. UMD/CommonJS If your environment doesn't accommodate ES modules yet, don't worry - we've got you covered. There's a "umd" directory that contains...you guessed it...regular old ES5 UMD (Universal Module Definition) versions of the files which are compatible with pretty much everything (RequireJS, Browserify, etc.). So you could import them like: //get the UMD versions. Notice the "/umd/" in the path... import { TweenMax, Power2, TimelineLite } from "gsap/umd/TweenMax"; import ScrollToPlugin from "gsap/umd/ScrollToPlugin"; import Draggable from "gsap/umd/Draggable"; What about bonus plugins like MorphSVGPlugin? Obviously we can't distribute the members-only bonus plugins via NPM, so all you need to do is log into your GreenSock account and download the latest zip which has a "bonus-files-for-npm-users" folder with the bonus plugins. Then just plop that into your project, like maybe in your /src/ folder (or wherever) and import them directly. For example, to save some typing you could rename the "bonus-files-for-npm-users" to simply "gsap-bonus" and put that in the root of your project and then: import MorphSVGPlugin from "./gsap-bonus/MorphSVGPlugin"; import SplitText from "./gsap-bonus/SplitText"; You could certainly put the bonus files in /node_modules/gsap/ if you prefer, but most people don't like doing that because it makes things less portable/updatable. There's a brand new page in the docs dedicated to NPM usage. NEW: Custom rounding increments in RoundPropsPlugin Have you ever needed to round animated values to the nearest 10 or hundredth? With the new object syntax in RoundPropsPlugin, you can round properties to various custom increments, not just integers! Simply pass in [property]:[increment] pairs like so: TweenLite.to(element, 5, { x:600, y:100 roundProps:{ x:10, //round x to nearest increment of 10 y:0.1 //round y to nearest increment of 0.1 } }); Watch the video Demo See the Pen RoundPropsPlugin Update by GreenSock (@GreenSock) on CodePen. NEW: SplitText "specialChars" SplitText recognizes a new specialChars property that allows you to specify an array of special characters to protect. This is typically used for multi-character symbols like in some languages where there are pairs (or sometimes even 4 characters) combined to form a single character. See the Pen SplitText with specialChars feature by GreenSock (@GreenSock) on CodePen. No need to do this for most emoji's, though, because those are already supported natively in SplitText! Got questions? If you haven't checked out the forums, you're missing out! It's a great place to get your questions answered and participate in the community. We carefully monitor and answer questions there. Or feel free to contact us directly if you prefer. Changelog View the full changelog here (note: version 2.0.0 is just 1.20.5 with a version bump to avoid breaking changes for NPM users) Happy tweening! DOWNLOAD GSAP NOW
  2. Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time. (2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain. (3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve? Would be great if I can some tips from you awesome guys! Have a good day! Pascal
  3. Hi there, I have two javascript-files in my included in my html page, each calling this in it's beginning: import TweenLite from 'gsap'; Later, when I try to call the TweenLite.to function, I get this error in the second file that I include in my html: Uncaught TypeError: Cannot read property 'to' of undefined at bodyScroll (app.js:692) at HTMLAnchorElement.<anonymous> (app.js:640) at HTMLDocument.dispatch (jquery.js:5201) at HTMLDocument.elemData.handle (jquery.js:5009) Any ideas? EDIT: It seems like TweenLite pollutes the global namespace. Shouldn't this never be the case with browserify?
  4. hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) { TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0 TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut }); TweenLite.to(this.sprites.c2.scale, 1, { delay:0.2, x: 1.4, y: 1.4, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) }); TweenLite.to(this.scale, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) }); TweenLite.to(this.scale, 1.2, { delay:0.2, x: 1.3, y: 1.3, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) }); this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) }); }); }; and than, when release click i want kill all thoses. i use es6 decomposer the Error come from TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); pointerUP(e) { // kill all animations FIXME: ? TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); // start new animations ...... from the cancel this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: slot.position.zero.x, y: slot.position.zero.y, ease: Power4.easeInOut }); }); visual help .... thank for help
  5. Hello community ! I'm having trouble importing plugins. I use the gsap npm doc with gsap v2.0.2. When I use this : import { TweenMax } from 'gsap'; TweenMax works perfectly fine. But when I want to use the scrollToPlugin with this for example : TweenMax.to('.my-div', 2, { scrollTo: { y: 'max' } }); I do this : import { TweenMax, ScrollToPlugin } from "gsap/TweenMax"; or import { TweenMax, ScrollToPlugin } from "gsap/all"; I get errors saying : TweenMax.js:13 Uncaught SyntaxError: Unexpected identifier or all.js:13 Uncaught SyntaxError: Unexpected identifier Thank you very much for your help !
  6. Hi there, I know this might not be a pure gsap related issue, but I hope someone can point me into the right direction. I want to avoid the use of jQuery and instead want to use pure javascript with es6 syntax. Therefore I created a button.js file, in which I want to create the module for my button animation powered by gsap. The jQuery version already works, so I simply have to translate this version into an es6 module but I am failing and keep getting "Cannot tween a null target". Obviously I am doing something wrong in the es6 syntax, but I can't figured it out Here is my button.js – codepen throws the same error: import TweenMax from 'gsap'; export default class Button { constructor() { this.btns = document.querySelectorAll('.tg-btn'); this.init(); } init() { for(let i = 0, max = this.btns.length; i < max; i++) { let el = this.btns[i]; console.log(el); console.log(i); let a = el.querySelector('.inner1'); let b = el.querySelector('.inner2'); let c = el.querySelector('.inner3'); let d = el.querySelector('.inner4'); let e = el.querySelector('.inner5'); let m = 0; let n = 50; let o = "center"; let p = null; let tl = new TimelineMax({paused: true}); var t = tl .set(el,{willChange:"transform"}) .set([e[i], d[i]], {opacity: 0,width: 1,right: "center" === o ? -n / 2 : -n - 20}) .set(e[i], {rotationZ: "45deg"}) .set(d[i], {rotationZ: "-45deg"}) .to(a[i], .2, {opacity: 0,left: 15,ease: Sine.easeIn}) .to(c[i], .3, {right: "center" === o ? -n / 2 : -n - 20,ease: Expo.easeOut}, .1) .to(c[i], .5, {width: n,ease: Expo.easeOut}, .3) .to([e[i], d[i]], .2, {opacity: 1,ease: Sine.easeOut}, .35) .to(e[i], .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) .to(d[i], .3, {width: 8,ease: Quart.easeOut,transformOrigin: "100% 50%"}, .45) // to right animation tl.addLabel("midpoint", .8), tl.add(function() { tl.stop() }, "midpoint"), tl.set(a[i], {left: -15}, "midpoint0.31"), tl.to([c[i], d[i], e[i]], .3, {right: -600,ease: Expo.easeIn}, "midpoint0.31"), tl.to(a[i], .3, {opacity: 1,ease: Sine.easeOut}, "midpoint0.5"), tl.to(a[i], .3, {left: 0,ease: Sine.easeOut}, "midpoint0.5"), tl.stop(); //el.animation = t; el.data('someTimeline', t); //create the event handler el.addEventListener('mouseover', function(){ alert("trigger"); t.play(); }); el.addEventListener('mouseout', function(){ t.reverse(); }); } } destroy() { window.removeEventListener('mouseover'); } } new Button();
  7. Great news gsap is moving to es6! I like treeshaking and keep everything as small as possible! However, what I don't understand is what the difference is between importing modules from 'gsap' vs. importing from 'gsap/all'. So far I was importing modules from 'gsap', but in the docs I read it's better to import from 'gsap/all' for treeshaking sakes. But when I look at the all.js file inside gsap it's importing the modules, like I would do myself when I import directly from 'gsap', because the project structure is build that way, it seems. Both ways work fine in having the same results onscreen, so I just looked at the output bundle size when I build the same project using imports from 'gsap', vs imports from 'gsap/all', and to my surprise there is a big difference in filesize: Importing from 'gsap': total project bundle here is 547kB Importing from 'gsap/all': total project bundle here is 612kB So importing from 'gsap/all' results in a 65kB larger bundle!! Btw, these import line's I'm using: import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/all'; // vs import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; I thought that would be the other way around, because 'gsap/all' was adviced in the doc. But with this result I'd say it's better to import from 'gsap'. @GreenSock Am I missing something here? What's the reason there is an extra option to import from 'gsap/all' instead of just 'gsap'? Thanks in advance!
  8. Hello @GreenSock Jack or somebody else who could help met with this, For a while now I'm using webpack together with the gsap npm package and uglifyjs. I keep things up to date and so far everything was working fine, until today. After updating the gsap package from 1.20.4 to 1.20.6 suddenly uglifyJs starts complaining. I only updated gsap, so only the gsap module has changed. I just found out gsap 1.20.4 works fine, and the problem starts with gsap 1.20.5: After searching for a solution I found that gsap 1.20.5 contains es6 code, which is not there in 1.20.4. This is what I see in TweenLite (1.20.5): const gs = _gsScope.com.greensock; export { TweenLite as default }; export const SimpleTimeline = gs.core.SimpleTimeline; export const Animation = gs.core.Animation; export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope; export const EventDispatcher = gs.events.EventDispatcher; UglifyJs here complains about the constant destructuring on the forelast line which it doesn't understand: 'Name expected' But even if it did understand it and continues its process, I would had a problem, because my project should output es5 and uglifyjs comes after transpiling. So this untranspiled es6 code is causing problems with uglifyJs in the webpack workflow. Also the minified versions of gsap 1.20.5 seem to have untranspiled es6 code now. I can't set UglifyJs to be on es6, because I want my project to output es5 code and uglifyJs is after the transpiling, like it should in webpack. My own projectcode is written in es6 and I use webpack babel to transpile to es5, but Babel is not transpiling the node_modules folder and I really like to keep it that way and think of that as best practice. I see most of the gsap code still is written in es5, so my guess would be something went wrong compiling the lib. But the above es6 lines (maybe more?) are in all gsap folders (gsap, gsap/umd, gsap/src/minified and gsap/src/uncompressed). Did something go wrong? Or am I missing something here? Thanks in advance!
  9. Hey there, happy new year first of all I am a bit confused with an animation i tried to achieve... i basically want to have each image separately animated and not all of them together...i tried to loop over all elements but its still animating all images together...would i need a timeline or is the approach completely wrong? const who = { trigger: [...document.querySelectorAll(".slide")], image: [...document.querySelectorAll(".slide img")], init: () => { who.trigger.forEach(element => { element.addEventListener("mouseover", who.animateOnMouseEnter); element.addEventListener("mouseout", who.animateOnMouseOut); }); }, animateOnMouseEnter: () => { console.log("animateOnMouseEnter"); who.image.forEach(element => { TweenMax.to(element, 0.25, { y: 35, ease: Power1.easeOut, repeat: 0 }); }); }, animateOnMouseOut: () => { console.log(" animateOnMouseOut"); who.image.forEach(element => { TweenMax.to(element, 0.75, { y: 0, ease: Bounce.easeOut, repeat: 0 }); }); }, debug: () => { // }, destroy() { // } }; who.init();
  10. Hey there, i tried to set up a Codepen, but unfortunately i couldn't get it work ....i am basically using webpack and es6 promises as well as enqurie.js and scrollmagic with gsap to trigger different tweens/scenes and kill them when the breakpoint is changed, unfortunately i get a animation.tweenShowcaseDesktop.kill is not a function on a specific tween. Since i am not able to make it work in codepen here is the module where i trigger the tweens and scrollmagic : I know its a very long snippet and shot , but maybe someone will spot my mistake right away. thanks a lot guys and keep up the awesome work. animation.js import ScrollMagic from 'scrollmagic'; import 'animation.gsap'; import 'debug.addIndicators'; import TweenMax from 'TweenMax'; import 'EasePack'; // eslint-disable-line /* eslint-disable no-unused-vars, no-undef */ /** * ***************************************************************************** * Mobile */ export const controllerMobile = new ScrollMagic.Controller(); /** * Service Tiles Mobile */ export function triggerServiceMobile() { const serviceTileFigure = document.getElementsByClassName( 'js-service-tile__fig', ); for (let i = 0; i < serviceTileFigure.length; i += 1) { const sceneServiceMobile = new ScrollMagic.Scene({ triggerElement: serviceTileFigure[i], reverse: true, triggerHook: 1, offset: 0, duration: 280, }) .on('start', () => { serviceTileFigure[i].classList.add('js-service-tile__fig--is-active'); }) .on('end', () => { serviceTileFigure[i].classList.remove( 'js-service-tile__fig--is-active', ); }) // .addIndicators() .addTo(controllerMobile); } } /** * ***************************************************************************** * Desktop */ export const controllerDesktop = new ScrollMagic.Controller(); /** * Service Desktop */ export const tweenServiceDesktop = TweenMax.fromTo( '.c-service', 1, { autoAlpha: 0, scale: 1, y: 200 }, { ease: Power0.easeIn, autoAlpha: 1, scale: 1, y: 0 }, ); export function triggerServiceDesktop() { // const sections = document.getElementsByTagName('section'); const sceneServiceDesktop = new ScrollMagic.Scene({ triggerElement: '#trigger', reverse: false, triggerHook: 0.75, }) // .addIndicators() .setTween(tweenServiceDesktop) .addTo(controllerDesktop); } /** * Portfolio Desktop */ export const tweenShowcaseDesktop = TweenMax.staggerFromTo( '.c-showcase-item', 0.4, { autoAlpha: 0, scale: 0, y: 0 }, { ease: Power4.easeOut, autoAlpha: 1, scale: 1, y: 0 }, 0.3, ); export function triggerShowcaseDesktop() { const showcaseTiles = document.getElementsByClassName('c-showcase-item'); const sceneShowcaseDesktop = new ScrollMagic.Scene({ triggerElement: '.c-showcase', reverse: false, triggerHook: 0.5, }) // .addIndicators() .setTween(tweenShowcaseDesktop) .addTo(controllerDesktop); } and my entry where i import and trigger them: // Mobile Animationen enquire.register(breakpoint.forPhoneOnly, { match() { import('changeLogoColor') .then((changeLogoColor) => { changeLogoColor.default(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); import('animation') .then((animation) => { animation.triggerServiceMobile(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerMobile.destroy(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, }); // Desktop Animationen enquire.register(breakpoint.forTabletPortraitUp, { match() { import('animation') .then((animation) => { animation.triggerServiceDesktop(); animation.triggerShowcaseDesktop(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, unmatch() { import('animation') .then((animation) => { animation.controllerDesktop.destroy(); animation.tweenShowcaseDesktop.kill(); animation.tweenServiceDesktop.kill(); }) .catch(e => console.error(`${e.name} : ${e.message}`)); }, });
  11. OUTDATED! These webpack issues are getting out of hand, so I made a little demo to help you get started. But first, have you considered not importing GSAP? I would suggest using a CDN instead as your app will load much faster since it's not included in the bundle and can be pulled directly from the user's browser cache. GSAP is available on both cdnjs and jsDelivr. JsDelivr is kind of unique in that you can bundle all your files up in a single HTTP request! And dependencies that are not resolved by webpack can still become dependencies of the output by using the externals option. For example, if you are using React you could do this using the unpkg CDN. <script src="https://unpkg.com/react@15.3.1/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script> And then in your webpack.config, you would configure those libraries like this... module.exports = { externals: { "react": "React", "react-dom": "ReactDOM" }, ... }; If that's not an option for you, here's the repo I made. To run it, install webpack and the dev-server first npm install webpack webpack-dev-server -g, and then npm install to install the demo. Use npm start to start the dev-server on port 8080. If you're wondering where my gsap import is, there isn't one. I made TweenMax global using the ProvidePlugin. https://github.com/OSUblake/gsap-webpack
  12. Hi, I'd like to know how to import the Easing package when using ES6? Or any other for that matter. At the moment I noticed that even though I did not import easing, it's available when importing TweenLite. So, I'd like to understand what I'm importing and when I have to import (a package, or the need to be specific). import { TweenLite } from "gsap"; TweenLite.fromTo(this.refs.logo, 0.8, { opacity: 0, x: 50 }, { opacity: 1, x: 0, ease: Bounce.easeOut })
  13. Just something to think about... The module issue is not going to go away until the source code is split up into actual modules. I've seen a lot of suggestions on GitHub, but I don't think any of them take into account the future. The JavaScript landscape changes too rapidly to depend on one type of technology. Just look at the decline of Grunt and Bower. Instead of creating modules for a specific loader (AMD, CommonJS, UMD, global), just create ES6 modules and let the user decide on the loader. This is the best way to design for future since it's going to be part of the language itself. To show how this would work, I split the TweenLite file up different modules including: Animation, SimpleTimeline, TweenPlugin, Easings, Ticker, and EventDispatcher. The only changes I really made were to the easings, to allow exporting eases individually because I didn't include the current GSAP way of defining classes. I also added an object called "gs" that get's passed around to the different modules as a work around to all the variables that get reused in the original file. So things like the ticker and rootTimeline instance are on that object. This was a quick proof of concept, and I really didn't do any testing so I might have missed something, but I am able to request GSAP modules in the browser using an ES6 module loader polyfill. This will also work with NodeJS. So now I can request stuff like this... (although I didn't actually do the CSSPlugin) // Get individual components import { TweenLite, CSSPlugin, Power4 } from "greensock"; TweenLite.to(myElement, 1, { x: 400, ease: Power4.easeInOut }); Of course this is only for users that want to use modules. For users that like using source files the traditional way, you could create a "dist" folder with these files already built, similar to current file structure of the src folder.
  14. I'm able to import and use TweenMax in Angular2 with ES6 and it's working great in the environment. I've include the gsap libs into my build through npm and I'm importing the module using ES6 like so: /** * Import Libs */ import * as TweenMax from 'gsap'; /** * Exports for others scripts to use */ window.TweenMax = TweenMax; but when attempting to import the Draggable utility import * as Draggable from '../node_modules/gsap/src/minified/utils/Draggable.min'; I get the following error: Draggable.min.js:15 Uncaught Error: Cannot find module "TweenLite" In ES6 do I have to export TweenMax first for the Draggable module or is there another method for making the TweenMax module available for the Draggable module?
×