Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/18/2018 in all areas

  1. GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment
    5 points
  2. I would like to welcome the two of you to the Shock 'n Awe Club - Which I am the president. We do a lot of skulking around and a lot of falling off our chairs by simply reading the posts here.
    5 points
  3. a second ago I was just googling to see if some people had dabbled with mixing three.js and gsap, in preparation for troubles I might run into soon. now I'm lying on the floor, dead from reading "I just whipped together a quick plugin" followed by an ACTUAL THREE.JS PLUGIN JUST CASUALLY POSTED ON THE FORUMS LIKE IT'S NOTHING okay I'm good now and have bookmarked the page. whoa
    5 points
  4. Hi and welcome to the GreenSock forums!!! This always seems more daunting that it really is. All you have to do is create a reference to the element you want to animate, create a GSAP instance for the animation in the componentDidMount event and then play the animation when you need it. Here's a simple codepen that does exactly that: Now if you check the code you'll see two references set to null in the constructor method, the loader wrap and the reference that later will be used to hold the GSAP instance. These are useful if you later want to use them again so you can set the position of the loader wrap to make it visible again and then you want to play the animation to remove it. The loader wrap reference is set in this code: <div className="loader" ref={div => this.loaderWrap = div} > THIS IS THE LOADER WRAP, PUT YOUR SPINNER HERE!!! </div> Here the ref property is passed a callback that takes the React node being mounted as a parameter and sets it as the reference called loaderWrap. In this case the node is the actual div that will be rendered in the DOM, which is what GSAP uses to animate. Finally the GSAP instance is created in the componentDidMount method to ensure that the DOM nodes are actually mounted and rendered by that time. Happy Tweening!!
    4 points
  5. The docs do state that stagger returns an array of TweenMax instances, but I'd agree that an extra note about needing a timeline for control would probably be a good addition to the docs. I have seen this question asked a few times in the forum so it can be confusing.
    4 points
  6. Cool idea to start this thread, Shaun. Thanks for sharing. -- in another thread Jack mentioned Tesla was a GreenSock user, but wasn't sure if that was in the cars or not. Hey Craig. Yeah, for some reason everyone assumes cars. I imagine you saw the synchronized landings of Falcon Heavy's side boosters. If you study the control room photos you'll find that it wasn't nearly as complicated as one would have guessed!
    4 points
  7. It's insane what he comes up with.
    4 points
  8. Here is an example using an HTML video. Notice pausing/playing/scrubbing the video will control the timeline's playback position.
    3 points
  9. xPercent would be slower just because it has to calculate more things. But slow is relative. You probably won't notice the difference. GPUs have size limits, which will be some power of two, like 2048 or 4096 for weak devices. But I would just try drawing the image with canvas first. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
    3 points
  10. When I was creating demo for this thread, I asked myself few times 'should I spend so much time creating this demo?'. Glad I did, it turned out to be worth a lot more than what I was expecting. Thanks Blake.
    3 points
  11. What I mean here wouldn't be GSAP polling anything ... it would be your own code requesting the progress value (or currentTime/duration) and passing that to a Tween/Timeline's .progress(). GSAP is doing nothing to request it ... you're pushing it to GSAP.
    3 points
  12. And how does SVG receive mouse events on a path or stroke? Through some canvas methods.
    3 points
  13. You can draw a canvas on another canvas. You can even draw a canvas on itself.
    3 points
  14. Getting the window size inside a modifiers function isn't going to help improve performance. $(window).height() jQuery or not, it's still requesting the current window size. See what forces a layout. https://gist.github.com/paulirish/5d52fb081b3570c81e3a The window size should be stored in a variable.
    3 points
  15. If you can tap into the progress property of the external object, you can pass that value to the .progress() method on a Tween or Timeline. Example timeline.progress(.5); This is a method used for lots of things, most commonly tying the tween/timeline to a scroll position.
    3 points
  16. We could forgo the battle. All I really want is somebody to name their first born after me.
    3 points
  17. @OSUblake is in the demo-off ?!? If that's the case, I think @Carl and I will have to be on the same team and Blake must wear a blindfold while coding.
    3 points
  18. I want to battle!!! Some infinitely repeating random animations... Some twinkling stars... And then my finisher, the chanceRoll.... jQuery can be easily replaced in ALL of my demos. The only reason I was using it is because that is what the person asking the question was using.
    3 points
  19. It could be used for shapes by converting the shape to a polygon, but if you're going that route you can just do polygon hit testing, which would be faster. I have some code if you want to see how that's done. For games I use this PhysicsEditor to generate the hit polygons. You normally don't need pixel perfect hit detection. Just close enough. https://www.codeandweb.com/physicseditor
    2 points
  20. 2 points
  21. Hahaha... looks like I'm going to have a busy week... *ahem.
    2 points
  22. Yep, I figured you were looking at that page. Long story short, drawing a path is what makes SVG so slow. PixiJS and Three.js are fast because they generally don't use dynamically generated content like a path. Draw your path on a separate canvas element, and then draw that canvas on your main canvas using the .drawImage() method. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
    2 points
  23. Basically what I'm saying is that you can't use ScrollMagic if you want to modify the scroll behavior. The library is not designed to handle such scenarios. By modifying the scroll behavior, I'm talking about modifying the native scroll behavior. How the user scrolls the page. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#hwQTx9IDZT5f4TgU.97 Trying to do an overscroll effect would involve modifying the native scroll behavior.
    2 points
  24. Tesla using GSAP I can understand, but CodePen? Seems a bit risky. What happens if I fork that demo and change some stuff around?
    2 points
  25. Haha! I lost all hope when Adobe replaced Fireworks with Edge Animate. I got an email within minutes. Check your junk folder. If that doesn't work, I would try using a country like the United States. And there's always Inkscape. https://inkscape.org/en/
    2 points
  26. Three.js isn't fast due to some creative way of coding things. It's because of WebGL rendering. The speed comes from using the GPU instead of the CPU. For a good explanation of why the GPU is so fast, read this introduction to shaders. A GPU has 1000s of threads that can do trig and matrix operations at the speed of light!!! That's how fast electricity can go. https://thebookofshaders.com/01/ WebGL uses the <canvas> element, but its API is completely different. It's based on OpenGL. Just look at how much code is required to draw a white square on the screen. https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context When people say they know WebGL, there's a good chance that they might be stretching the truth. What they mean is that they know a WebGL library like three.js or PixiJS. It's hard to find somebody that can do WebGL programming without a library. I'll show how to speed up a 2d canvas in another post.
    2 points
  27. Sounds like the perfect time to start creating and returning timelines from functions. You can then easily sequence a master timeline with the add() method. Here's a recent article by Professor @Carl which should guide you through the process. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
    2 points
  28. Great note, Craig. Its worth repeating that all the hard work that you and the other moderators and contributors do makes it possible for Jack to improve the codebase. Its amazing that we have such great people around that go above and beyond.
    2 points
  29. @GreenSock - all joking aside, even after hanging around here for a few years, I'm still always impressed with the speed of improvements and bug fixes. I think that's one of those things people don't necessarily appreciate until they have a request or spot a little bug. We can all joke and whine about big companies like Adobe or Microsoft and trying to get their attention on something, but at GreenSock things get done quickly. It doesn't matter if it's a Club GreenSock Member or not, the request is given the same weight. Truly remarkable.
    2 points
  30. Hi everyone, this isn't a question, just an observation! I was using TweenMax.staggerTo recently and was wondering why my tween was playing if I didn't pass paused: true, but if I did and then tried to use .play() I would get an error saying something like tween.play() is not a function. Turns out staggerTo creates an array of tweens, and arrays do indeed lack a .play() function. So if you plan on controlling the playback of a single staggerTo tween, you still should put it into a timeline Maybe this ought to be mentioned in the docs? Caused me quite the headache
    1 point
  31. So, last night I was listening to Jack's awesome interview with egghead.io (https://itunes.apple.com/us/podcast/egghead-io-instructor-chats/id1308497805#) and he started talking about all the unexpected uses of GSAP, and it got me thinking; what have I used GSAP for? And I realized the range is from pretty typical to not so typical! My line of work is for a few large clients. So I've used GSAP on many projects; some externally facing (marketing sites) ... some for "exclusive" groups (targeted marketing), and many internally facing (for very specific groups ... members and employees). So, for the typical stuff, it's Immersive content UI indicators and helpers UX sauce For the not so typical, it get's pretty varied pretty quick! But the one project that sticks out the most is GSAP as the heart of a frontend delivery system (backed by Drupal) that drives a community cable channel for a gated resort community in GA. The Drupal side allows content managers to create and place 3 types of media; image slideshows, video, and embedded (iframed) HTML. They have control over timings and transitions which map out to GSAP, background audio playlists and ducking (the ducking is tweened with GSAP ), and asset publish/unpublish dates. For the embedded HTML ... they are calling in external sites which are slideshows, but managed by another group for another purpose; a real estate listings slideshow of active properties within the community that is displayed on a large screen in their sales office which is ... you guessed it ... GSAP! It cycles through 280 properties (+/- a few) daily; transitioning in a property image, then a delayed detail and pricing overlay slides over a portion of the image. But back to the cable channel ... every asset and configuration managed on the Drupal side is fed through custom template files that generate all the GSAP Timelines and Tweens. It has been running for years and is rock solid! So, my not so typical uses are cable channel programming (in the sense of delivering programmed content), digital kiosks, and digital signage. So, I'm curious ... what have others used GSAP for that might be a little outside the norm?! Edit: I changed the title from "What have you done with GreenSock?" to "How have you used GreenSock?" Upon reading it back some time later ... it occured to me that the title could be implying that something is wrong with GreenSock Of course there isn't!
    1 point
  32. Hi @Mantvydas We've had several threads talking about gradients. Here are a few I think could help. Happy tweening.
    1 point
  33. Oh I saw that demo on codepen, it is really impressive. I was wondering if it can be used to perform hit tests on objects with odd shapes but yet to go through the code.
    1 point
  34. You can create a file like this. window.GreenSockGlobals = {}; export const GreenSockGlobals = window.GreenSockGlobals; Now import GreenSockGlobals, TweenMax, and other GSAP goodies in another file. Now you can export GSAP stuff from that file, and tree-shaking will trim the fat for you. Kind of like what's described here. https://github.com/greensock/GreenSock-JS/issues/215#issuecomment-356884140
    1 point
  35. If you wanted to tween the playhead to the frown completion, you'd actually want to tween to the label after the frown because tweening to the actual 'frown' label will take you to the beginning of that morph. Which in this case would be the beginning of the timeline and showing the neutral pose. If you wanted to do this with labels, you'd probably want to move your labels to the end state of each morph. Or maybe have a 'startFrown' and 'endFrown' label so you could tween straight to a label or tween between the start and end states easily. Again though, not terribly efficient for what you're doing here. I'd recommend staying with tweening in the functions. Regarding your glitch and artifacts, I think there's something funky going on with your eye paths. I dropped in two circles to replace your eye paths (used MorphSVG to convert them to paths so your wink/blink morphs would work) and it all seems fine now. Hopefully that helps. Happy tweening.
    1 point
  36. @yoannes You should look into following thread, I managed to use CCapture demo to capture canvas frames, I have never used headless browser so not sure how it will perform. But you would be better with exporting all screenshots as PNG or JPG and converting them using FFMPEG. Unless of course if headless browser performs better than usual browser. Also you would be able to capture video frames and then svg on top of that, but not sure how you can capture html. A quick search landed me on https://html2canvas.hertzen.com/ which might be what you are looking for.
    1 point
  37. Thank you Shaun for your patience and explanation. After a few trial and errors I finally managed to understand the code! Thank you so much once again
    1 point
  38. Hey Beau, There's absolutely nothing wrong with the React part of your code, that's working as expected. You're generating the refs for each DOM node and using them in the componentDidMount method. The issue has to do with the GSAP part. Right now you're creating an instance in the timeline for each SVG element but you're not passing a position parameter, so GSAP is putting each instance at the end of the timeline, therefore each element is animated in a sequential way. In order to achieve what's happening in the second codepen you can use two approaches: Option One Add every single instance at the start of the timeline using the position parameter at 0 and add random delays to each one in order to create the overlapping. const tl = new TimelineMax(); waves.forEach( item => { tl.to( item, duration, {opacity: random(), delay: randomDelay()}, 0 ); }); That zero at the end tells GSAP to add the instance at the very start of the timeline, ie, time zero. The random functions are for creating random opacity and delay numbers. Option Two Create a random position parameter for each instance based on the duration of the timeline when that particular instance is being added to the timeline or by forcing the timeline to have a specific duration using the (you guessed... the duration method). Now this might be a little more complicated because you'll have to access the duration of the timeline or set a fix duration for it. Check this from the API: https://greensock.com/docs/TimelineMax/duration() So I'd recommend using option one if you can. Finally check this from professor @Carl in order to get a great grasp of the position parameter. https://greensock.com/position-parameter Happy Tweening!!
    1 point
  39. @Tasty Sites Both x and xPercent animate transform and you wouldn't see performance difference while using either, they both take advantage of GPU. @benoit That seems like problem is you are animating a really large image on weak GPU, I think best way to go would be to use smaller images. You should test some of the demos on your mobile and on your machine so you will get idea about how much workload your machine is able to take. Looking at your screenshot it looks like your machine is struggling to render things properly.
    1 point
  40. Ditto what @Carl said. Really appreciate the kind words, @PointC.
    1 point
  41. Hi @alfianridwan, no problem at all. I'll break down a few things that are happening here ... First and foremost ... I'm using jQuery to make some tasks much easier. If you're new to JS, you may or may not know the ins and outs of cross-browser compatibility. In short ... jQuery fights that battle for us. So your questions and my answers are addressing jQuery $('document').ready( function(){ Is just waiting for the DOM to be ready before we do anything. $('.blog-card img').each( function(){ So .each() is a jQuery method that allows us to iterate over the matched set ... in this case, all elements returned with the selector ".blog-card img". So what happens here is the DOM is scoured for all <img> within elements with the class ".blog-card". Now that that images are returned as a set, jQuery's .each() will iterate over each one to perform all the actions with the .each(){ }. In plain english, here is what is happening within that, Find the <img>'s nearest (up the DOM tree) enclosing element with the class "blog-card". This is the card that the image belongs to. Within that card, inject an element before all its children ... a new div using the current <img>'s (i.e. the <img> currently being referenced as we iterate with .each() ) src as the css background-image move the <h2> within the card to now be a child element of the new <div class="blog-card-background"> Add in a new div to represent the "close" X in the top of the expanded card. remove the <img> from this card (we no longer need it) Now, for the why to all the above We do this just to make a simple reference rather than asking jQuery to look up the tree many times. In this particular case, the hit is negligible. But it's good practice that if you are going to ask for something multiple times ... simply create a variable to hold it. For me, positioning and animating a div with a background image applied is much easier than positioning and animating the <img> itself. For example ... applying an image as a background with background-size: cover and background-position: 50% 50% tackles so many issues on its own when dealing with responsive images! Because the new <div class="blog-card-background"> is positioned relatively, it allows us to stick the (now) absolutely positioned <h2> to the bottom of the image (with padding) by using the CSS bottom property without any concern for how many lines the <h2> may be. We have to be able to close it! No use in keeping it in the DOM ... we are now using that image as a background for the <div class="blog-card-background"> You'll notice we did a lot of manipulation at this point with jQuery. But why? Why not just do all of this in the markup? Well, for several reasons. If javascript isn't available (or some other script causes it to fail), we want the user to have something that a. looks approriate and functions as expected (i.e. click a blog card and navigate go through to that blog post as a new web page) b. doesn't present interface elements that perform no action My basic rule ... if Javascript is required to interact, then Javascript is responsible for creating the element. So make sure it's usable without JS. $('#some-blog').on( 'click', '.blog-card.inactive', fucntion(){ ... This one is a bit nuanced, but I'll explain here. We want things to happen when something is clicked. Someting "A" when clicked in a "card" state and something "B" to happen when clicked in an open state. Now, I could have simply used ... $('.blog-card.inactive').click( function(){ ... Buuuuut, that does something a bit unexpected. A unique click handler get's bound to each matching element from that point forward .. regardless of losing the "inactive" class down the road. You might say, "that's OK, we're using a different element to close the open state.". And that's true ... but, clicking anywhere else anywhere within, in this example, the open blog post would still cause this handler to fire. We could do some detection to remove this handler while in an open state and rebind after. But it's so much easier to do $('someSharedParentElement').on( 'click' , 'target', function(){ ... because it creates a single handler for all matching elements AND allows the handler to be bound to dynamically created elements down the road! Think of a blog with infinite scroll, for example. And, when the "blog-card" has its class changed from "inactive" to "active", this event handler is no longer bound. When it goes back to "inactive" it is bound Noice!
    1 point
  42. Hey Beau, I understand the frustration. The reality of things is that React works in a declarative way and the discourage to use string refs and find dom node has mostly to do with some specific issues and some excessively paternal approach by the React team. The paternal issue comes from the fact that the deprecation of string refs has to do with some edge cases and because of a few things that could go wrong the entire API is changed for everyone. Take GSAP for example, Jack does His best to ensure that GSAP serves as many scenarios as possible but never compromises performance, file size nor legacy support, and when those changes do come, believe me there is a lot of questions and samples going around before the decision is made. But that's how GSAP works and perhaps we've been a little spoiled by that, but that's how serious Jack and Carl are about how this works. IMHO there's nothing wrong with using string refs and fond dome node if you know what you're doing. At some point developers have to take responsibility for the code they write and not expect that the frameworks make all kind of loops and hoops to ensure that every blunder is supported. As I mentioned in another post yesterday this is some very specific issue, because you have to take in consideration the lifecycle of your app and it's components in order to make the best decision. There are some cases that you can safely reference the elements using the classic get element by id if, when you create the variable you're sure that the DOM node will be rendered in the app. In other cases if you're not sure is better to use refs. This simple codepen goes into the detail of how refs are accepted today: In the console you'll find an array with all the rendered elements that can be used with GSAP. This is the so called "React way" for referencing DOM nodes. Now the pain comes when you're using a third party component that doesn't expose the DOM node, like this case: import ThirdParty from "third-party"; const elements = ["label-1", "label-2", "label-3", "label-4"]; class MyApp extends Component{ constructor(){ super(); this.elements = []; } render(){ return <div> { elements.map( e => { <ThirdParty key={e} ref={ node => this.elements.push(node) } /> }) } </div>; } } In this case the array will have a collection of the four React components being rendered and not the nodes being added to the DOM. In this case find dom node comes in handy because it allows to reference the actual element in the screen. If the plan is indeed remove find dome node from ReactDOM then things will get more complicated, because developers will have to bake their own version of this component in order to expose the ref to the DOM node or the developers of third party components will have to come up with some way to find those references. One of the simple ways to do this could be for components to accept an id property in order to later reference that and get access to the DOM node. Finally don't get discouraged from using GSAP with React, there are ways to use it and the more is being used, the React team will become aware that to create complex animations and rich environments GSAP is the way to go and they'll have to come with some way to actually gain access to the dom elements. Right now we have to keep using this type of approaches with the hope that things will change and become simpler in the future. Also keep in mind that the article you mention was written when React was in version 15 and string refs and find dom node were not deprecated and that wasn't a long time ago, unfortunately this world moves way to fast and doesn't wait for anyone... Happy Tweening!!!
    1 point
  43. You can do that by using MorphSVGPlugin, which you will need to convert path data into bezier. Then you can move your element along the path. Check animate along the path section in the end of docs https://greensock.com/docs/Plugins/MorphSVGPlugin
    1 point
  44. @beau_dev So are you naming your first kid as Craig or Carl? Or PointC?
    1 point
  45. For the situation where things are going wrong, we'd really need to see a simplified CodePen showing it going wrong. There are a lot of factors that could lead to this type of situation. Not much can be gleaned from a GIF. :/
    1 point
  46. @bparticle Blake has provided you really great and robust demo which will work in all scenarios with zero to minor changes, it all comes down to how you will implement it in your project. And when CMS gets involved it just gets broader. Like, what if you have different elements from different parents that open modal on click? What if then you want some modal to auto-open? Then what if there is already another modal open? etc scenarios. You can take different approaches with most basic approach of creating two modal objects that will respond to two different click events and will present text from two different sections. More flexible implementation will be where you pass different parameters for color, section etc and just use single modal object that will be used throughout the site. Then third way I can think of will be by using data attributes that will be used to create/track all modals throughout the page. Following is very basic demo of two modals, that you can implement if have few modal objects on your site. Anything beyond that just becomes general programming and CMS related question which is way too broad and beyond this forum. Somebody else might take interest to help you if they find the topic interesting but chances are slim.
    1 point
  47. Hi @Cristo Welcome to the forum. You can click the magnifying glass in the upper right part of the top menu and enter your search terms. If that doesn't get you what you need, you can also Google the forum pages. To limit your search to GreenSock site results, you can do something like this: site:greensock.com your search terms If you want to search for an exact phrase, (say something like timeline objects), you'd put your search terms in quotes: site:greensock.com "timeline objects" Hopefully that helps. Happy tweening.
    1 point
  48. Thanks Craig! Spent a lot of time trying to make this as smooth as possible and had an almost identical approach for layers and export. Even had some crazy macro for File –-> Export –-> Export As --> then choose ‘Save as type: SVG’ When I discovered presentation attributes things got a lot cleaner... that cls was making me mad Adobe added the assets export panel that makes the process a little better, it exports (or should) a cleaner code for some more complex stuff https://gyazo.com/1fc0451d9022da2e1c377d637e4fcb87 It can be a bit frustrating because the options for the export are hidden, but you just change them once https://gyazo.com/b9b2562d7280039bb66c924b4f23c8e2 Not sure anyone will use this but's also worth to know that you can just select all artwork, ctrl+c and paste it anywhere https://gyazo.com/2f2c653b500d58df5f7caade7e9defc3 (edit: Probably that's the method @OSUblake mentioned ^^') A lot of crap attached to the last one, but it's handy when you just need to check smth simple. Overall, the process is a pain, the assets export sometimes crashes (exports nothing - that can be frustrating if you aren't prepared for it ;D ) - need to restart illustrator after that, not sure if that's only my thing. It still exports junk like some g id="Layer_2" But a huge benefit of it is that you can have multiple SVGs in one document and control, group, change stuff you want to export Happy Exporting
    1 point
  49. Hm, that's a little tricky in Three.js, but I think this'll do it: var _gsScope = (typeof module !== "undefined" && module.exports && typeof global !== "undefined") ? global : this || window; (_gsScope._gsQueue || (_gsScope._gsQueue = [])).push(function () { "use strict"; var _xyzContexts = "position,scale,rotation".split(","), _contexts = {x:"position", y:"position", z:"position"}, _DEG2RAD = Math.PI / 180, _visibleSetter = function(target, start, end) { var time = end ? 0 : 0.999999999; return function(ratio) { var value = (ratio > time) ? end : start; if (target.visible !== value) { target.visible = value; target.traverse(function (child) { child.visible = value; }); } }; }, _addFuncPropTween = function(tween, func) { var proxy = {setRatio: func}, backward = !!tween.vars.runBackwards, pt = {_next:tween._firstPT, t:proxy, p:"setRatio", s:backward ? 1 : 0, f:1, pg:0, n:"setRatio", m:0, pr:0, c:backward ? 0 : 1}; tween._firstPT = pt; if (pt._next) { pt._next._prev = pt; } return pt; }, _degreesToRadians = function(value) { return (typeof(value) === "string" && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD; }, i, p; for (i = 0; i < _xyzContexts.length; i++) { p = _xyzContexts[i]; _contexts[p + "X"] = p; _contexts[p + "Y"] = p; _contexts[p + "Z"] = p; } var ThreePlugin = _gsScope._gsDefine.plugin({ propName: "three", priority: 0, API: 2, version: "0.0.2", init: function (target, values, tween, index) { var context, axis, value, p, i, m; for (p in values) { context = _contexts[p]; value = values[p]; if (typeof(value) === "function") { value = value(index || 0, target); } if (context) { i = p.charAt(p.length-1).toLowerCase(); axis = (i.indexOf("x") !== -1) ? "x" : (i.indexOf("z") !== -1) ? "z" : "y"; this._addTween(target[context], axis, target[context][axis], (p.indexOf("rotation") !== -1) ? _degreesToRadians(value) : value, p); } else if (p === "scale") { this._addTween(target[p], "x", target[p].x, value, p + "X"); this._addTween(target[p], "y", target[p].y, value, p + "Y"); this._addTween(target[p], "z", target[p].z, value, p + "Z"); } else if (p === "opacity") { m = (target.material.length) ? target.material : [target.material]; i = m.length; while (--i > -1) { m[i].transparent = true; this._addTween(m[i], p, m[i][p], value, p); } } else if (p === "visible") { if (target.visible !== value) { _addFuncPropTween(tween, _visibleSetter(target, target.visible, value)); } } else { this._addTween(target, p, target[p], value, p); } this._overwriteProps.push(p); } return true; } }); }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } Does that work for you?
    1 point
×
×
  • Create New...