Jump to content

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Rodrigo

  1. Hi and welcome to the GreenSock forums. First thanks for purchasing the club membership and supporting the guys' work. Sorry that you're experiencing this problem. In that regard, are you completely sure that you're using the files you downloaded here in the GreenSock page?. That redirection shows when you attempt to use a members only file from the Codepen samples. Please login to your account, go to the home page (http://greensock.com) and click the DOWNLOAD GSAP button. A 3D popup should appear and select Download zip with bonus content and inside that file you should find all the bonus plugins and tools. Try a simple html page with those. If the issue persists after that, please get back to this post indicating if the problem is with the minified or development file, so the guys can take a better look at it.
  2. Hi, Sorry for not elaborate more in my previous answer. I can't say how the movie site handles this, but as Carl mentions rotating an element in the three axis causes a very ugly issue, as the element behaves in an unexpected way. I'm not sure if this falls into a Gimbal Lock (https://en.wikipedia.org/wiki/Gimbal_lock). Basically the parent element gets the X and Y rotations and with that in place, just rotate the image. The "rotation" at the end of the instance is a position parameter. In this case a label called rotation. Then I use that position to add another tween for the $slide1 element. Like that all the elements are animated at the same time. Master Carl created a great video explaining how this works and how to get great results with it: http://greensock.com/position-parameter
  3. Hi and welcome to the GreenSock forums. All you're missing is add the normal 2D rotation to the image inside the container. Also I added an ID to the image in your HTML: %img#card{:src=>"https://s32.postimg.org/9im9jyxkl/banner1.jpg"} JS tl .to($slide1, 1, {transformOrigin:"50% 50%", rotationX: 50, rotationY: 50, z: -200}) .to('#card', 5, {rotation:1080, ease:Linear.easeNone}, "rotation") .to($slide1, 5, {z:-1200, y:150}, "rotation"); Happy Tweening!!
  4. Hi, It shouldn't be too complicated. All you need is detect the user agent for the most common devices or you can use a service like Wurfl in order to detect the user's device. Then, when you have that, you can store a boolean in a global variable (hopefully global for your app's scope and not the global namespace). Finally you can set up all your animation code inside an init function, and depending on the boolean value you can execute it or not. var isMobile = bool;// here goes the detection code function initAnimations(){ var tl1 = new TimelineLite(); var tl2 = new TimelineLite(); var tl3 = new TimelineLite(); // and so forth all your code here // Also using node and browserify, or Grunt, or Gulp you can create smaller // animation modules and use CLI to put them all together } // finally depending on the boolean call the function if(isMobile){ initAnimations(); } Another alternative is create different animations. For that I use an approach that is a bit more complex. I create a master object that holds all the configuration objects for the tweens and depending on how the boolean comes back use one set of configurations or the other. Another alternative is to create the config objects in two separate functions(like the code above but create two functions, one for devices and one for desktops). var isMobile = bool; var configObj = { "desktop" : { "tween1" : {x:100, y:100}, "tween2" : {rotation:180, autoAlpha:0} }, "devices" : { "tween1" : {x:10, y:10}, "tween2" : {autoAlpha:0} } }; // then create your tweens var tween1 = TweenLite.to(el, 1, isMobile ? configObj.devices.tween1 : configObj.devices.tween1); var tween2 = TweenLite.to(el, 1, isMobile ? configObj.devices.tween2 : configObj.devices.tween2); Finally you can create separate JS files and use a resource loader to load one file or the other. In this approach (my favorite for this cases) using node makes your life quite simple: // devices file (devices.js) var t = TweenLite.to(el, 1, {x:100, y:100, rotation: 360}); module.exports.devices = t; // desktop file (desktop.js) var t = TweenLite.to(el, 1, {x:10, y:10}); module.exports.desktop = t; // this goes in your start file var isMobile = bool, tweens; if(isMobile){ tweens = require('./devices'); } else { tweens = require('./desktop'); } // now you can use your tweens
  5. Hi, Actually there are several sites created with GSAP that remove or restrict their animations for devices due to limited hardware and data usage, so it's not that uncommon.
  6. Hi, You mean something like when the instance is created by the Draggable.create() constructor? Draggable has the onDragStart callback when the user drags the element more than 2 pixels. Also there's a complete set of callback for the Draggable tool: http://greensock.com/docs/#/HTML5/Drag/Draggable/ It'd help if you could elaborate a bit more and provide some sort of sample or code snippet in order to get a better idea of what you're after.
  7. That's a nice solution, good job and thanks for sharing. Also thanks for the contribution in the meteor post as well. Users like you make this community what it is Happy Tweening!!!
  8. Mhh.. yep, this is basically a scope issue. GSAP callbacks have another option to set the scope of the callback, basically what this is referred to in the callback. Normally this refers to the GSAP instance (the timeline in this case) so you have to change it in order to refer to the component: var tl = new TimelineLite({onUpdate:updateFn, onUpdateParams:["{self}"], onUpdateScope:this}); In the component's code this refers to the component itself, but as you already saw this makes the browser go bananas . The problem is that every time the state is updated forces the component to be rendered again, which restart the timeline from zero (that's why the red box appears to be just a bit to the right of it's original position all the time), then after the first GSAP tick, the onUpdate fires, setting the state property, which renders again... and like that we're in an endless loop. What you're need to solve is where you need the timeline to be defined, perhaps you should create the timeline in the nested component and pass the progress value to it's sibling via the parent. Unfortunately this has become mostly a React issue since the GSAP part is well covered. Check this, perhaps it could help: http://stackoverflow.com/questions/34734301/passing-data-between-two-sibling-react-js-components Basically what you're missing here is the C in the MVC structure of your app, something that can be used to share the data. React only accounts for the V . Perhaps you could see if Flux helps in solving the shortcoming: https://facebook.github.io/flux/ Sorry that I can't help more than this. Happy Tweening!!
  9. Hi, What I would suggest is to set the progress of the timeline as a state of the parent component and in the onUpdate callback use setState() to update the value and pass the progress value to the child's props. Like that everytime the value of the parent state property is updated it'll update the child's props as well. class Application extends React.Component { constructor(props, context) { super(props, context); // set up the initial state for the progress value. // by default the progress of a timeline is 0 at start this.state = {tlProgress:0}; } tlUpdate(target){ // update the state of the component this.setState({tlProgress:target.progress()}); console.log(target.progress()); } render() { var tl = new TimelineLite({onUpdate:this.tlUpdate, onUpdateParams:["{self}"]}); return ( <div> <Tweens tl={tl}/> <Controls tl={tl} tlProgress={this.state.tlProgress}/> </div> ) } } Like that the controls component will have in it's props object the tlProgress property, which will be updated everytime the state of the parent component is updated. Like that you can use it to retrieve the progress value using componentDidUpdate: class Controls extends React.Component { componentDidUpdate(){ console.log(this.props.tlProgress); } render(){ return ( <div> <button id="restart" onClick={this.restart.bind(this, tl)}>restart</button> </div> ) } }; Hopefully this helps.
  10. Hi, Beyond what Dipscom and Craig have suggested already, there's no way around this. Altering the natural duration of a timeline will affect the duration of it's nested instances and viceversa. A timeline is a container of tweens and other methods, just that. So when the timeline starts at time zero all instances in it are set to that specific position and the timeline will be completed once all the instances in it are complete as well. Changing the duration of the parent timeline will change the original duration of it's nested instances, specially if you set a duration smaller than the original (as you already discovered), that will proportionally reset the duration of the nested tweens in it to accommodate them to the new parent duration. Could you share a small reduced sample in codepen in order to see what you're after?. To be completely honest I can't remember another user asking for this type of functionality before. Finally the only way around this is to create two different timelines, one with the instances in it and an empty one with a shorter duration and all the needed callbacks, but again I'm having a bit of a hard time wrapping my head around what you need. EDIT: If you need some sort of specific callback before the timeline is completed you can use either the add or call methods. Call Method http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/ Add Method http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/
  11. DO'H!!!!!!!!!!!!!!! I'm terribly sorry, totally my bad The params in the onUpdateParams are passed as an array: let tl = new TimelineLite({onUpdate:updateFn, onUpdateParams:["{self}"]}); Finally this code works on the main component of your codepen sample (thanks for setting it up!!): class Application extends React.Component { constructor(props, context) { super(props, context); } tlUpdate(target){ console.log(target.progress()); } render() { var tl = new TimelineLite({onUpdate:this.tlUpdate, onUpdateParams:["{self}"]}); return ( <div> <Tweens tl={tl}/> <Controls tl={tl}/> </div> ) } } Again, sorry for the incomplete code in the previous post. Happy Tweening!!!
  12. Hi and welcome to the GreenSock forums. Have you tried using an onUpdate callback in the timeline in order to log the progress? var tl = new TimelineLite({onUpdate:updateLine, onUpdateParams:"{self}"}); function updateLine(target){ console.log(target.progress()); } Have you tried getting the progress after the component's update?. I've seen some issues with ajax data in react components returning props properties as empty in the componentDidMount method. Please try componentDidUpdate and the onUpdate callback to see if there's anything different. Also please provide a codepen sample in order to get a better look at your issue: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Here's a post on codepen's blog on how to set up a react app in codepen using babel and JSX: https://blog.codepen.io/2015/05/19/babel-now-on-codepen-write-es6-javascript-and-react-jsx/ Finally, if you've been using GSAP with React, please take a little time to read this post and if you can give your opinion in the matter: http://greensock.com/forums/topic/14639-greensock-reactjs-components-needed/
  13. Hey Ryan, I see the predicament. Unfortunately GSAP has to work out of the box and play nice with every possible scenario. This is on Jack's or other developers' court now, as to develop a GSAP plugin that jumps right into React and do things the React way. I've done juts a few things in React with GSAP and the approach from my first post has worked fine so far. On the other hand, today's web and UI's are generally animated and interactive, so developers of this type of technology should also be held responsible for creating this frameworks in a way that doesn't present this type of situations when the end developer is trapped in this type of predicaments, since GSAP is one of many JS animation libraries that exists now a days. Perhaps for now using CSS transitions could be the best option. Sorry that I can't be more helpful about it.
  14. Hi Ryan, As far as I can see the only issue I could spot in the GSAP-React plugin is using the state object of the component and then render the component once again. For static components, that is components that doesn't have any data or setState updates, I would use the componentDidMount() method to create the GSAP instances, because at that point the elements are rendered in the DOM and you can access them through other libraries, such as GSAP, jQuery, etc. For dynamic components I would use the componentDidUpdate() method. Something like this: var yourComponent = React.createClass({ // static components componentDidMount : function(){ TweenLite.to(target, 1, {x:100, y:100}); }, // dynamic components componentDidUpdate : function(){ TweenLite.to(target, 1, {x:100, y:100}); }, render : function(){ // render code here } }); Finally, if you need to update some data in the component, based on the changes made by GSAP, you can use any GSAP callback to call the setState method and update the component's state object data. Hopefully this helps a bit.
  15. Hi Sophia, For the first question. Since version 1.18.3 (released yesterday by our beloved leader ) you can pass complex strings to the configuration object. Jonathan jumped right away onto that an gave us a nice sample in this post: http://greensock.com/forums/topic/14139-animate-grayscale-css-in-timelinemax/#entry60300 Here's a direct link to His codepen sample http://codepen.io/jonathan/pen/bpKKRm/ As for getting the current value, the super secret _gsTransform is a particular object that deals with transform objects. Although I haven't dug into the CSS Plugin in order to see an object that keeps track of the styles values, those normally are kept behind the scenes as private objects/methods, so the rule of thumb is not to rely on them because they're designed for internal use (in GSAP normally everything that starts with an underscore - at least the last time I checked). One option could be to check the element's style using the style object or jquery's css() method to get the particular style. For the second question, GSAP always performs great. The most common performance issue comes from rendering/painting the screen. You can have 30 to 40 elements animating, but keep in mind that, regardless how new a device could be, their hardware is smaller and has more limitations than a desktop/laptop, specially phones. The mantra around here is test, test, test and then test some more. With that in mind, regardless if you're using, velocity, pixi, CSS or GSAP performance could be an issue depending on the object's size, transparency (has transparency or opacity, or not), size, property being animated (affects flow or not), is a solid element or an image, etc. As you can see is really hard to narrow it down to what tool you use, but it depends more of what you're doing and what you're animating and the end device. That's why many sites/apps have far less animations for devices than for desktops/laptops and even sometimes they don't have any animations whatsoever.
  16. Hi, I believe that the issue is on your jquery code. My impression is that you're kind of over-complicating the code. Is simpler like this: var listItems = $("#list li"); listItems.each(function(i,e){ var t = TweenLite.to(e, 0.5, {fontSize:30, paused:true}); e.fontTween = t; $(e).hover(function(){ e.fontTween.play(); },function(){ e.fontTween.reverse(); }); }); http://codepen.io/anon/pen/PNaaMX
  17. Sorry to bring back this old thread, but since version 1.18.3, released earlier today (04-20-2016), there's no need to use a custom object and the onUpdate callback to apply styles. var tl = new TimelineLite(); tl .to(div1, 5, {backgroundPosition:"100px 100px, 300px 200px, 0px 0px", ease:Linear.easeNone}) .to(div1, 2.5, {backgroundPosition:"0px 0px, 300px 200px, 0px 0px", ease:Linear.easeNone}, 2.5) .to(div1, 1, {backgroundPosition:"0px 0px, 100px 0px, 0px 0px", ease:Linear.easeNone}, 4); Codepen sample updated: http://codepen.io/rhernando/pen/oAIan/ Also as you can see we're able to animate each background at different times, as long as the values for each background don't change from one instance to the next. In the example the first instance of the timeline moves the third background to 0px 0px, the second and third instances keep that value in order to avoid overwrite issues. Happy Tweening!!
  18. Hi Jason and welcome to the GreenSock forums. Draggable has a bounds property in the config object that can impose how far Draggable's target can be moved. You can create an object with the min and max values for that, from the docs: Basically you can loop through the elements and set the max and min values using the previous and next elements to set the values. Unfortunately I don't have time now to dig into this. Hopefully another user could chime in and this information is enough to get you going.
  19. Hi and welcome to the GreenSock foums. It looks like the scrollTo plugin is not present when the code is executed, but is definitely a bit odd. Could you set up a live reduced sample using codepen so we can take a better look at it and figure what is the issue?. Is really hard to pinpoint the problem with the information you're providing now. Please take a look at this: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
  20. Hi, Mhh.. hard to tell. I've always included JS stuff for wordpress (regardless of it's complexity) via the functions.php file or a specific plugin file, using the common hooks. Never went the way you're describing (including code in the post editor I presume). A couple of questions, are you getting any kind of errors in the JS console?; have you tried some console.log() or alert() in the code you're using to see if it's being executed at all?. Perhaps in the backend wordpress is removing <script> tags.
  21. Hi Liam, Are you including the js file for the animation as well?. Are you setting GSAP and jQuery as a dependency for your animations file?. Finally are you queueing the files in the footer or adding a DOM ready listener in it?. Most likely, your files are being loaded but the DOM might not be ready yet, specially if you're adding them on the header. Is better to move them to the footer using the final boolean of the enqueue_script method: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ Also you might want lo wrap your js code inside this, in order to avoid conflicts with other files and be sure that the DOM is ready: (function($){$(function(){ // code });}(jQuery));
  22. Hi, In this post you'll find some answers to animate css image filters: http://greensock.com/forums/topic/14072-image-brightness/ Hopefully is enough to get you started.
  23. Hi and welcome to the GreenSock forums. Unfortunately is hard to see what the issue is or could be with the information you have provided. Please be a bit more specific about what are the problems you're facing and if it's possible create a reduced live-sample in order to get a better grasp of what part of the site is giving you the problems, because is simpler and faster to see that than a complete website. Check this post in order to see how to create a codepen sample that we can look at: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
  24. Hi, Like Shaun I'm not seeing anything. Tested IE11, Chrome 49 and Firefox 44 on Windows 7 64b. My guess is that perhaps you have too many extensions running, which could mean memory usage. Also this happens on the first run of the animation or in every repeat? Finally long animations, like this one, can become a bit jumpy some times.
  25. Since you're using nested directives, perhaps this tutorial could help: http://www.bennadel.com/blog/2592-hooking-into-the-complete-event-of-an-ngrepeat-loop-in-angularjs.htm