Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by JD9

  1. Try this app if you're on a Mac (Older version, free to use I guess): SiteSucker 2.3.6 It let's you download entire websites, you can choose your base url and dig / scrape / crawl / download from there (e.g. http://greensock.com/docs/#/HTML5/ in your case). You can also "localize" file paths. If that doesn't work, and you know a bit of Python, a whole world of open source web crawler tools exist. Have a look at http://scrapy.org/ It's like GoogleBot, only "a tiny little bit" less advanced. PS: Since these tools exist, I dropped you the urls. But I recommend that you first ask Jack / Carl for permission to use such scraper-tools to download / localize the GreenSock docs for your personal use. PS2: you can also run MongoDB, a document data store / no-SQL engine. It uses BSON (binary JSON) to store data (e.g. some data you first scraped and then mapped). You can then re-format your content of interest to another format (your own, local, pages that get fed data from MongoDB). -Jos
  2. Exploding snow! Very very cool Blake! It's also a really nice touch how the "snow burns" attach to Jack. Or is it Carl? Jos
  3. I wanted to be helpful by trying to make a downloadable localized version of the documentation. For OSx an app called "SiteSucker.app" exists (like curl / wget, but with a bunch of added file localization options). It works, kind of, but I found out the GreenSock docs DOM animations require one or more Green Membership Plugins -Jos
  4. I think I'm getting the hang of it now! Revised code: $('.gsfx-bgsweep-right').on( gsFx_BgSweepRight( $('.gsfx-bgsweep-right'), { backgroundColor: "rgb(103, 65, 114)"} ) ); function gsFx_BgSweepRight(element, config) { config = config || {}; var time = config.time != null ? config.time : 0.3; var backgroundColor = config.backgroundColor != null ? config.backgroundColor : "#f00"; // if needed, inject an extra stylesheet at runtime if ( typeof gsFx_sheet == "undefined" ) { gsFx_sheet = (function() { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); // webKit hack document.head.appendChild(style); return style.sheet; })(); } // inject pseudo element to the DOM at runtime gsFx_sheet.insertRule(element.selector + ":after { content: ''; }", 0); var pseudo = element.selector + ":after"; // read the DOM for the pseudo element var rule = CSSRulePlugin.getRule(pseudo); // inspect all properties for debugging purposes // var ruleObject = ''; // for (property in rule) { // ruleObject += property + ':' + rule[property] + '; '; // }; // console.log(ruleObject); // add properties to the rule object TweenMax.set(rule, { cssRule: { scaleX: 0, scaleY: 1, position: "absolute", zIndex: -1, backgroundColor: backgroundColor, top: 0, left: 0, right: 0, bottom: 0, transformOrigin: "0% 50%" }}) var animation = TweenMax.to(CSSRulePlugin.getRule(pseudo), time, { cssRule: { scaleX: 1, scaleY: 1 }, ease: Sine.easeOut, paused: true } ); return { mouseenter: function() { animation.play(); }, mouseleave: function() { animation.reverse(); } }; }
  5. Blake, I've tested your "Christmas Snowy Pen" on an iMac5K 4GHz i7/32GB/4GB M295X GPU: 150.000 snowflakes fall down nicely as well! Although at a 500.000 snowflakes blizzard you can't see the mountains anymore and Firefox starts to dislike being responsive at screen resize Cooooooool Pen! Jos
  6. Guys, another question regarding my gsFx.js library: if, on a given web page using gsFx.js, multiple background effects were to be applied, where each function (to be copy pasted as-is into a "main.js" that's the whole idea) would contain the same function for "stylesheet injection" like so... // inject an extra stylesheet at runtime using an IIFE passed back into the 'sheet' object var sheet = (function() { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); // webKit hack document.head.appendChild(style); return style.sheet; })(); ... then I'm guessing a whole bunch of style objects are being added to the DOM. (Not sure if that's a big issue anyway when only e.g. 5 of these effects are to applied, but anyway it's not optimal). => How about running an IIFE in gsFx.js creating the sheet object once by default? It's then globally scoped so I can skip creating new style elements for every individual effect function. EDIT #1: renaming the IIFE to "gsFx_sheet()" is probably even better for avoiding naming conflicts. EDIT #2: if I would declare the gsFx_sheet() IIFE once in gsFx.js, including that (giant?) lib would become obligatory since the effect functions are then not fully self-contained. I could also, in each function, check if the "gsFx_sheet" object exists, and if not, create it by assigning the function to the "gsFx_sheet" object by omitting the "var" declaration, forcing it to become globally scoped. Hmm.. need to think about what's most practical... -Jos
  7. Cool, I made it to the video series already! Yay! Another thought: I could have omitted declaring (a bunch of) arguments in sheet.insertRule() , and move those arguments to TweenMax.set(rule, {cssRule:{ } }) I'm guessing performance-wise that would save a bit of under-the-hood translations? -Jos
  8. Hi Jonathan, since Carl wrote this... .. I doubt it to be a hidden built-in GSAP feature I've scanned the GSAP src-files for "skale", but couldn't find a match. So the mystery remains! Anyway, Jonathan, it's good that you've entered this thread. Because the whole point of this post of mine, is that I've been reading a specific thread (http://greensock.com/forums/topic/12688-difficulty-converting-a-css3-transition-into-a-gsap-controlled-transition/page-2) where the general advise - inspired by yourself actually! - was to "steer away from" pseudo element manipulation. Yet for my (under development) "gsFx.js" Effects Snippet Library, (preview: http://monsterbrands.nl/projecten/gsFx/ ), specifically targeted at HTML / CSS / JavaScript / GSAP beginners, I explicitly needed a :before or :after pseudo element, yet without any relevant ("difficult") CSS. I want beginning users to be able to use gsFx.js as "add water" effects, like "hover.css" but running on GSAP. And therefore I needed to "inject" that CSS, not present in HTML or static CSS, for CSSRulePlugin to read (it has the .getRule() method, but no setRule() for pseudo elements). Pretty hard, being (somewhat of) a JS beginner myself! Thanks for participating by the way! Kind regards, Jos
  9. Hi Jonathan, That's my point exactly, why is and was my CodePen working on Firefox, running Gecko, when exactly there I made my typo "skaleX(1)"? I deliberately left the typo on my CodePen, I added a comment above it. Have a look at it again if you like! Cheers, Jos
  10. Huh? That's a typo I corrected hours ago! Yet if my webhost was caching that version, how come your browser's dev tools are showing it ánd it's working? Edit: and even more strange, my CodePen version is still showing 1 typo (I'll keep it that way for debugging), yet it was already running correctly on Firefox (without the -webkit-transform prefix): cssRule: { transform: "skaleX(1)", "-webkit-transform": "scaleX(1)" } //-------------------- ^ ----------------------------- ^ ---------
  11. @Carl, cool huh! PS 1: I still don't know why my version (http://codepen.io/josdelien/pen/MydOpJ) isn't functioning on CodePen, but is indeed functioning on my develop server (http://monsterbrands.nl/projecten/gsFx/). And I mean it was - and is - already functioning without your additional set()! All OSx browsers I tested (FF, FF Dev Edition, Chrome, Safari) are working. And I've just cross-browser tested it on Windows FireFox (working as well), Windows Chrome (working as well), Windows Edge (working as well), Windows IE11 (working as well). PS 2: with your addition ... TweenMax.set(rule, {cssRule:{scaleX:0}}) ... all my OSx browsers are functioning as well on your CodePen version (http://codepen.io/GreenSock/pen/ONYzLN) So I'm very interested in knowing why it was necessary to do that set() , as well! -Jos
  12. Hi, for my "gsFx.js" project (GSAP Effects Library), containing "plug-n-play / add water"-effects for GSAP beginners, I'm currently working on background transition/animation effects. I think I ran into a CSSRulePlugin bug, but please correct me if I'm wrong (I'm actually hoping I'm wrong so I can continue with adding effects to my library straight away ). Please look at my Codepen example, here: http://codepen.io/josdelien/pen/MydOpJ I've created 2 hyperlinks, mimicking the same effect. 1) the first I animated using CSS, working fine on modern browsers; 2) the second using GSAP is only working on OSx Firefox, not on OSx Chrome or OSx Safari (I haven't tested any Microsoft browsers yet). Note: For the :before / :after pseudo CSS, I've tried using inline CSS, external CSS (OSx Chrome then throws an error in the console). But I prefer to setting the pseudo css properties in gsFx.js, because that way the only user-configurable variable calling this effect to add is the new backgroundColor of the pseudo) What's the matter? -Jos EDIT1: hmm, I can try adding vendor prefixes... Just a minute, le tme try... EDIT2: I was partially right .... On my dev server OSx Chrome ánd OSx Safari is OK now with the vendor-prefix included, but on the Codepen example it's still not working in Chrome nor Safari. These are my header includes locally, which are working now for me. Is Codepen running other GSAP versions? <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/TweenMax.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/TimelineMax.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/plugins/CSSPlugin.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/plugins/CSSRulePlugin.min.js"></script> <script src="js/gsfx.js"></script> <script src="js/main.js"></script> (PS, partially off-topic, @Jack / @Carl, would this be an idea for implementing a .setRule() method onto CSSRulePlugin? var sheet = (function(el) { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); // webKit hack document.head.appendChild(style); return style.sheet; })(); sheet.insertRule(el { background: rgb(103, 65, 114); content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; transform: scaleX(0); transform-origin: 0% 50%; }", 0);
  13. @Sanjshah, animating in GSAP is really great fun and quite easy to do. You'll get the hang of it in no time! I've only begun using GSAP since last week, and your question was my first opportunity to answer! @Carl, cool that document.querySelectorAll() steps in, in case jQuery wasn't included! Didn't know that myself, that's actually a a very useful GSAP feature for my library! -Jos
  14. Hi sanjshah, 1) you're referring to ".logo", which is a jQuery style selector. You'll need to declare a jQuery library to be able to use it's selector engine. 2) you need to add a little bit of CSS code, since you're trying to move .logo towards the right. position: relative; does that for you (for example). I've completed your tutorial code to get you started (really simple example, exactly like the one you're trying out in your tutorial). Copy paste this to your computer file (you've called it "TweenMaxTest.html") and you're good to go!" Happy Tweening! Jos <!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script> </head> <body> <div class="logo" style="background-color: red; height: 50px; width: 50px; position: relative;"></div> <script> TweenMax.to(".logo", 12, {left:600}); </script> </body> </html>
  15. Waaaaahhhh! Blake! Cool! Some thoughts: 1) Portability Yesterday I already created a bunch of hover effects mimicking hover.css, in this format: function gsap_Anim_Skew(element, config) { config = config || {}; var time = config.time != null ? config.time : 0.3; var animation = TweenLite.to(element, time, { skewX: -8, ease: Sine.easeOut, paused: true } ); return { mouseenter: function() { animation.play(); }, mouseleave: function() { animation.reverse(); } }; } $('.gsap-anim-skew').on( gsap_Anim_Skew( $('.gsap-anim-skew') ) ); Yet if we write it like so ... var effects = {}; $.extend(effects, { skew: function() { var effect = { enter: { skewX: -8, ease: "Sine.easeOut" }, leave: { skewX: 0, ease: "Sine.easeOut" }, duration: 0.3, animation: "skew" }; return gsFxAnimation(effect); } }); ... that's better from a library point-of-view, but less portable for copy-pasting single "Add Water"-effects into website projects. If we would put in 1.000 effects into 1 big effects library, yet only 2 effects are used in a given website project, that's a whole lot of redundant code. So I'd like the effects functions to be "self-contained", copy-paste-able. 2) Method calls, html classes I really like your .gsFx() method call, in stead of jQuery's .on() though, and I also like setting class names and using the ticker. Structure proposal: So how would we structure things for usage this way? How about this: part 1) one obligatory library file for convenient-use-functionality { .gsFx() method calls, class listeners, and configuration options } part 2) another library file, to include optionally, with a giant effects object part 3) another library file, same as "part 2", in the form of self-contained effect functions, for "plug-n-play" use within website projects. -Jos
  16. Blake, I understand the direction you're pointing me to. I'm diving into it straight away. Thanks again! -Jos
  17. @Blake: You, Sir, are a true JavaScript sensei! You have already gotten me this far (working code example, ref my initial code): $(document).ready(function() { // call this code from within a project's webpage custom JavaScript var target = $('.gsap-anim-grow'); target.on( gsap_Anim_Grow(target) ); // put this code into the Effects Snippets Library function gsap_Anim_Grow(element, config) { config = config || {}; var time = config.time != null ? config.time : 0.3; var animation = TweenLite.to(element, time, { scale: 1.2, ease: Sine.easeOut, paused: true } ); return { mouseenter: function() { animation.play(); }, mouseleave: function() { animation.reverse(); } }; } }); Now, looking at my goal to create an absolute beginner's "Just-add-water GSAP Effects Snippet Library", I'm going to overthink for a bit what's the most convenient syntax for that purpose: My thoughts: - currently the function call is easily deployable to any HTML element (event on element A, animation on element A or somewhere else), yet limited to a .hover() event. I might want to pass an 'event' argument to the function. On the other hand, the more flexible/configurable the setup, the harder it becomes to deploy for beginners. PS Blake, does your nickname come from the karate world? If so: JavaScript wa rei ni hajimari, rei ni owaru. Osu! -Jos
  18. Hi everyone! Being inspired by standard effect galleries in css3 such as hover.css and animate.css I reckoned "why not develop something like that for GSAP beginners?". My goal is to develop a basic set of "Add Water" effects on top of GSAP, to help absolute beginners discover the power of GSAP. So I've picked up the challenge to develop my own "GSAP Effect Snippets Library" and thinking about deploying it on GitHub or so, or in any case "sharing is caring"! Yet I'm a GSAP and JS beginner myself And currently I'm faced with a simple Don't Repeat Yourself (DRY) JS/GSAP architecture question. Can you help me out? Current state: This is where I'm at right now, I've just started with three very simple effects. The code is working, yet with a very clumsy architecture, not suited for my goal at all. $(document).ready(function() { // IIFE: grow (function grow() { $('.gsap-anim-grow').hover(enter, leave); function gsap_Anim_Grow(el) { var tl = new TimelineLite(); tl.to(el, 0.3, { scale: 1.2, ease: Sine.easeOut} ) return tl; } function enter() { if( !this.animation ) { this.animation = gsap_Anim_Grow(this); } else { this.animation.play(); } } function leave() { this.animation.reverse(); } })(); // IIFE: shrink (function shrink() { $('.gsap-anim-shrink').hover(enter, leave); function gsap_Anim_Shrink(el) { var tl = new TimelineLite(); tl.to(el, 0.3, { scale: 0.8, ease: Sine.easeOut} ) return tl; } function enter() { if( !this.animation ) { this.animation = gsap_Anim_Shrink(this); } else { this.animation.play(); } } function leave() { this.animation.reverse(); } })(); // IIFE: skew (function skew() { $('.gsap-anim-skew').hover(enter, leave); function gsap_Anim_Skew(el) { var tl = new TimelineLite(); tl.to(el, 0.2, { skewX: -8, ease: Sine.easeOut} ) return tl; } function enter() { if( !this.animation ) { this.animation = gsap_Anim_Skew(this); } else { this.animation.play(); } } function leave() { this.animation.reverse(); } })(); }); I'm repeating myself over and over this way where the only thing changing is the animation itself. It would seem far more logical to me if I could put all animations in a JSON-style object, like so: var animations = { gsap_Anim_Grow: function (el) { var tl = new TimelineLite(); tl.to(el, 0.3, { scale: 1.2, ease: Sine.easeOut} ); return tl; }, gsap_Anim_Shrink: function (el) { var tl = new TimelineLite(); tl.to(el, 0.3, { scale: 0.8, ease: Sine.easeOut} ) return tl; } } Note: On the other hand... on some effects (e.g. a horizontalWobble) it's desirable that the mouseleave handle triggers no effect (desired effect: "only wobbling at mouseenter, nothing happening on mouseleave"), so in that case the "leave" function / parameter should do nothing. It seems as an improvement to include the enter / leave behavior within each animation function. But how do I accomplish that syntactically? Also, I'd like to use ONE handlerInOut on the .hover() method, so that any given effect can be called from a simple jQuery selector, like so: // My preferred animation call // Any jquery class selector, same as the animation function name // right now, but can be any class in the DOM, // And preferably just one handlerInOut for beginner convenience. $('.gsap-anim-grow').hover(gsap_Anim_Grow); How to re-write this JS structure into a proper DRY manner so that the complete animation library can be simply declared in the HTML? Can you put me on the right track? Thanks very much in advance, -Jos
  19. Fantastic examples Blake! Really inspiring! Your pen (http://codepen.io/osublake/pen/7b033317eed404ce7ab42508f61da856?editors=0010) is technically the coolest morphing animation I've seen! Call that a "simple" demo? It's fantastic! -Jos
  20. @erik, a couple of remarks/suggestions on TweenUI: - easing options, start, duration by double clicking: Aaah! Now that you mention it, I remember accidentally noticing those options while figuring out your GUI at the beginning but somehow forgot how I got there and "mindmapping" that option as available on AniMachine (which I also reviewed briefly) instead of TweenUI: my bad! - keyframes (#1): being familiar with Adobe After Effect's interface, I'd suggest adding a feature being able to click on a keyframe and from there viewing the exact same dialogue box as from doubleclicking the animation bar; - keyframes (#2): option to add more than two keyframes of the same property on one timeline track. This way you can reduce the number of "timeline tracks" for more complex animations; - keep separate "timeline tracks" per property (like you have now for "motion", "opacity", "scale", and "rotation") but make the properties panel <div class="JM">...</div> contextual to the property you're animating. - add more properties. PS: I didn't mean to ridicule TweenUI by any means in my short review (#entry61022)! It's actually the completest and most performant browser-based animation GUI I'm aware of, so big props to you! I'm happy to give you more suggestions if appreciated. -Jos
  21. Hi Jack, thanks for the reply. - my path deforming proposal: only useful in a GUI context, never mind. - development of GSAP IDE/GUI: as suggested, this could be a separate product from the API, so it wouldn't (necessarily) interfere with your GSAP API (product) strategy. I don't see how such an IDE could limit GSAP’s API appeal in the wider market, the GSAP API would still allow to be used in other IDEs/GUIs or code animation project. ( Google Search managed to survive quite okay after Chrome Browser initially deployed, right? ) I completely respect your considerations on not having the resources or UI design skillset. Of course those aspects could very well interfere with your API strategy. Being new to the GreenSock forum I was simply unaware of any skillset or resource restrictions and I apologize for that! -Jos
  22. You're welcome Carl and I understand your time constraints. -Jos
  23. PS3: if adding IDs to SVG anchors / coordinates isn't possible in the SVG spec, you could also read all initial coordinates from the SVG path, explode them into a temporary array / JSON object, add / remove anchors as needed in the array / object, change coordinate values per array / object element, update the initial SVG path, and then morph them! -Jos
  24. PS1: sorry for the tiny visual, you can click on it to zoom in though PS2: I think this would require every anchor / coordinate in an SVG to have an ID, and I'm not sure if that's possible in current SVGs. What do you guys think? -Jos
  25. My idea of "path deforming" in GSAP API / GSAP IDE: