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. Yep, perhaps checking the $last property in the scope of the ng-repeat in the link function of the directive, change a boolean in the controller and set up some ng-class to evaluate that property in the controller's scope. Although I remember adding a ng-repeat via a directive's template and not running into this issue you mention. Perhaps you could create a plunker (http://plnkr.co/) which offers a bit more flexibility than codepen for this type of issues, as you can create and add the different files and not run everything in a single JS code block.
  2. Rodrigo

    GSAP timeScale

    Looks really nice, good job!!! Happy Tweening!!
  3. Rodrigo

    GSAP timeScale

    Hi, Basically GSAP passes the function being referenced to an apply method. This takes the function to be called and an array of parameters. In the sample basically I'm passing the update function and also the onUpdateParams key-value, which is an array. In that array I referenced to '{self}', which means that the parameter is the GSAP instance, whether is a Tween or Timeline. I used timeline but it could be perfectly "a" or whatever you choose: function checkPosition(a){ if(a.progress() >= 0.25 && a.progress() <= 0.75 ){ TweenLite.to(a, 0.2, {timeScale:3}); } else { TweenLite.to(a, 0.2, {timeScale:1}); } target.innerHTML = Math.floor(a.progress()*100)/100 + '<br>' + Math.round(a.timeScale()*100)/100; } Then the apply method invoques the function and pass the parameters array to it. Using this, should be valid and in most cases safe, but in order to make things bullet proof, when referencing to the GSAP instance is better to use '{self}', which later gets referenced as the instance itself. //Basically '{self}' references to the timeline stored in the variable tl var tl = new TimelineMax({repeat:-1, yoyo:true, onUpdate:checkPosition, onUpdateParams:['{self}']}); // this also can be used but someone might want to reserve the word "this" in their // code, so that could lead to an error var tl = new TimelineMax({repeat:-1, yoyo:true, onUpdate:checkPosition, onUpdateParams:[this]}); You can check the code here: https://github.com/greensock/GreenSock-JS/blob/b3d1ec5c50859a41a6574f098b698508e5304b55/src/uncompressed/TweenLite.js#L531-L567 And the apply method here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
  4. Rodrigo

    GSAP timeScale

    Hi Celli, Have you tried using an onUpdate callback in the master timeline, and depending on the playhead position, increase/decrease the timescale value?. For example let's say that at 25% you want the speed jump and then at 75% you want the speed go back to normal. It would be like this: function checkPosition(timeline){ if(timeline.progress() >= 0.25 && timeline.progress() <= 0.75 ){ Tweenlite.to(timeline, 0.2, {timeScale:3}); } else { Tweenlite.to(timeline, 0.2, {timeScale:1}); } } Here's a simple codepen: http://codepen.io/rhernando/pen/YqEaoE
  5. Hi, In this case the issue is that a Tween instance with a repeat:-1 is an infinite loop, therefore the onComplete will never be called. What you could try is use a timeline with a simple animation to 5 and then add a TweenMax instance that goes to -5 with the repeat:-1. That final instance will have as a starting point 5 and final point -5, so it'll loop between those values endlessly: var tl = new TimelineLite(); tl .to(object, 3, {x:-5, ease:Linear.easeNone}) .add(TweenMax.to(object, 3, {x:5, repeat:-1, yoyo:true, ease:Linear.easeNone})); EDIT: I missed the fact that a TimelineLite instance can have endless instances in it, therefore the code above is even simpler: var tl = new TimelineLite(); tl .to("#el", 1, {x:10, ease:Linear.easeNone}) .to("#el", 1, {x:-10, ease:Linear.easeNone, repeat:-1, yoyo:true}); http://codepen.io/rhernando/pen/grXmqV
  6. Hi Alvaro, Normally I don't consider a good idea to use a timeline class for a carousel/slider. I find much simpler using a Tween class for every slide, but that's just me. Here's a very simple example of a content slider: http://codepen.io/rhernando/pen/CeDkc Also here's a slider crafted by Jonathan using a timeline class: http://codepen.io/jonathan/pen/qxsfc?editors=0010
  7. Draggable's update method basically updates the value the Draggable instance has stored. For example if you create a Draggable instance and before/after Dragging it you change the x and/or y values, the update method tells Draggable about that change, otherwise Draggable believes that the values are still the ones when it got instantiated. http://greensock.com/docs/#/HTML5/Drag/Draggable/update/
  8. Hi and welcome to the GreenSock forums. Professor Schooff created this video tutorial for the position parameter. Also there's a very handy codepen in it so you can play with. http://greensock.com/position-parameter
  9. Hi and welcome to the GreenSock forums. Have you tried this approach: http://codepen.io/GreenSock/pen/LuIJj Also is easier to get a better idea if you could set up a live sample that we can see and edit. Please take a look at this: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
  10. My first try would be to translate the adjacent elements as the others are being transformed in 3D space, but my guess is that it could generate an issue of the elements not being correctly lined-up as both animations are happening at the same time. Also in your codepen all the elements have the transform origin on the center, which in this particular case has to change to the left/right side depending on the element's fold direction. Perhaps you'll need to tag some trigonometry and some math into it, or get into the 3D matrix calculations in order to get the right positions. The easy part of it is that you can set the animation progress using Draggable, so you just need to get the other stuff done
  11. Hi and welcome to the GreenSock forums. As OzBoz mentions what you're seeing now is expected behaviour. If want to animate each circle, then things get a bit more complicated, but it shouldn't bee too much though. The good thing is that you have all your circles in an array (randomCircles), so you can access them there and animate their scale. Unfortunately I'm far from being a canvas expert, but you could use one of the canvas plugins GSAP has to offer or use Pixi in order to animate the element's scale (I've seen many cool things done with GSAP and Pixi so it should work). EaslJS plugin http://greensock.com/docs/#/HTML5/Plugins/EaselPlugin/ Kinetic Plugin http://greensock.com/docs/#/HTML5/Plugins/KineticPlugin/ PixiJS http://www.pixijs.com/
  12. Hi Justin and welcome to the GreenSock forums. That site is quite a punch . My point is that the site is not a simple one and not just one technique, soto speak, is being used. That part of the four images is a grid and then on click/touch the element expands from the position it has at the event moment. That by itself requires some JS and CSS as they're growing the element animating the width/height and possibly animating the top/left or x/y positions at the same time. Then after that animation is completed there are other images and text being animated as well. Finally, for some reason, they're using both GSAP and CSS animations. FInally as OzBoz points, this is not a simple task at all and if you're not a very seasoned/experienced developer you should start with some simpler stuff and then take them up a notch until you're able to build something like that. My approach to complex animations and layouts is always start from the barebones with no animations whatsoever. Then start with simple animations and then start creating the more complex stuff. Also I would strongly recommend using Git for those cases, as you can comment your versions and tags and then go back to a previous version without any problems. Before I started with Git, I found myself in the position of not knowing which version I had to go back in order to correct some issue and with a bunch of folders and with the need of creating long readme files in order to get some order in my developments.
  13. In that case either an onComplete callback or a Timeline is what I could recommend, but that would depend on how your app is planned.
  14. Hi, The issue here is that you're not changing the scroll property but the x transform value of the element containing the images, therefore the scroll value never changes, in fact if you check the scrollLeft property it's always 0. I can suggest two options. If you want to stick with the scroll value, use GSAP ScrollTo plugin: http://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/ With it, you'll be able to animate the scroll position of the element and using an onUpdate callback, check when the scroll value has passed a certain point. Another option is keep using this approach and also use an onUpdate callback to check the progess of the animation and at a certain value, show the right button. Progress is very neat because it shows... well the progress of the animation between zero and one, being zero the animation's starting point and one the final point of the animation: http://greensock.com/docs/#/HTML5/GSAP/Core/Animation/progress/ For example if you want the right button to be visible after the 80% of the animation is completed, it could be like this: tl = new TimelineMax({ paused: true, onUpdate: checkValue }); // onUpdate callback function checkValue(){ if( tl.progress() >= 0.8 ) { TweenLite.to('#right-btn', 0.6, { x: 0 }, 'ease:Sine.easeIn'); } }
  15. Hi, For adding a new sprite animation use an onComplete callback on the timeilne, only if the timeline doesn't have a repeat:-1, in that case the timeline is set for an endless loop and will never complete, in that case you can use a call() method at a certain position in the timeline. For the second question, for what can I see, the timeline you're using is not paused or it's timeScale is not set to 0. The code you add simply tweens the timeScale property of the animation, just that. I'm not completely sure of what you're after here. I forked your codepen and made some changes to it, please check it and adapt it to fit your scenario so we can follow up properly: http://codepen.io/rhernando/pen/bpoWzL
  16. Hi, What Diaco meant was this: TweenLite.to($("#content li")[i], 1, {top:"150%", onComplete:function(){ console.log(this.target); }});
  17. Rodrigo

    Image brightness

    Hi, One solution is create an object with the starting value for the filter (I used 1 for the sample), tween that value and then apply it to the image: var brightnessObj = {'brightnes':1}; function updateBgt(){ image .css('-webkit-filter','brightness(' + Math.floor(brightnessObj.brightnes*1000) / 1000 + ')') .css('filter','brightness(' + Math.floor(brightnessObj.brightnes*1000) / 1000 + ')') }; TweenLite.to(brightnesObj, 1, {brightnes: 2, onUpdate:updateBgt}); You can see it working here: http://codepen.io/rhernando/pen/LNzPVK Also you can use the setter/getter functions in an object to achieve the same result: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters
  18. Hi Oliver, The thing is that in your codepen when you click on the icon the movetl instance is played. When this happens for the first time GSAP gets the starting point for the element and then animates it to the final position given in the timeline. Then when you do that again, GSAP instead of looking for the current element's position, goes to values it recorded the first time (one of many things that contribute to optimization). Diaco's magic trick consist in removing all the instances from the move timeline and populate it again, so every time you click on the icon, it'll use the current position to translate it to the center and then expand it and also He's getting the window size every time, so that makes it responsive. Just another great solution by Diaco. http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/clear/ Happy Tweening!!
  19. Hi, I've dealt with more accordion stuff than I really wanted for some time and I can assure you that Carl's second advice is the best way to go. Animating padding will get you very quirky behaviours. This is an accordion code I made for a Joomla templating system some time ago. It has toggle capacity, is fully responsive and works great with jQuery tap (for better touch support https://github.com/jonpacker/jquery.tap). As you can see the CSS uses a <p> element (or it can be anything else you want) with a padding and the height animation happens on that element's parent. Feel free to fork it and use it at your will, the code is highly commented so you shouldn't have any issues following it: http://codepen.io/rhernando/pen/700a72e818449d5ed8dd23b56f50741c Happy tweening!!
  20. Hi, I believe that the issue here is that Draggable is sensing that the circle is bigger than that boundaries you have supplied to the tool, therefore it's enforcing them and not allowing the element to be dragged anywhere. From a long time Draggable is able to deal with transformed elements, so this could be the case, since I removed the transform in the group tag and Draggable worked without any issues. Here's a codepen that illustrates how GSAP adjusts to the transformations: http://codepen.io/rhernando/pen/KAFow Finally as Jonathan mentions, perhaps GSAP witch doctors could clarify the issue.
  21. Hi and welcome to the GreenSock forums. The issue comes from your JS code. The problem is that you're creating a function but not giving it a name so it can be referenced and you're not invoking that function neither: function() { givemefruit = document.getElementById("givemefruit"); givemefruit.onclick = function() { TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5); }; } Javascript needs to know how to reference a function. Basically the browser reads and interpretates your code, at that point it stores the function reference in memory so you can access it later on your code and execute it. In this case you're typing the word function but JS expects a name after the word function or the function expression to be stored in a variable, like this: // function name function myFunction(){ // code here } // invoke the function myFunction(); // anonymous function var myFunction = function(){ // code here }; myFunction(); Finally it seems that you're trying to wrap your code inside a IIFE to avoid your code to be stored in the global scope. In that case, after defining the function it should be invoked immediately, but everything should be wrap in parenthesis to avoid JS to see the word function at the start of the code line: (function() { givemefruit = document.getElementById("givemefruit"); givemefruit.onclick = function() { TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5); }; } () );// the parenthesis after the curly bracket execute the function Finally take a look at this to get a better grasp of JS: JS Tutorial http://www.w3schools.com/js/default.asp IIFE information https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
  22. Hi Felipe, The main issue here could be that you're asking too much from devices with limited hardware. Keep in mind that SVG is not hardware accelerated, so basically you're draining every bit of hardware from the poor devices if a lot of animations are happening at the same time. Perhaps you can get some helpful tips in this post: http://greensock.com/forums/topic/13681-svg-gotchas/ Finally as Jonathan and Zach mentioned, without a live/reduced sample is hard to see what the problem is. So at least try to provide a live sample link to see how this is working.
  23. Hey Matt, Well, the issue in this type of situation is that, since JS is read, interpreted and executed on the browser, there's basically no absolute way of preventing others to use your code. As Patrick mentions, using minification and obfuscation is one way to prevent others to access your code. Another way is use regular expressions and check the url against those in order to see if the domain matches that regular expression. If not you can redirect the user to google or something like that. The good thing about that is that regular expressions are a common thing in almost any language, so it wouldn't be too noticeable to hide it in an anonymous IIFE in the middle of your code. As I believe that there's no 100% bullet-proof method, using minification and perhaps another technique will protect your work, since more advanced coders (which could be the ones with the time and resources to go through your code and see how things are done) would probably create their own versions of what you have done. I've never used an obfuscator, just minified my code using grunt so I can't tell you about that, but here are some links: https://javascriptobfuscator.com/Javascript-Obfuscator.aspx http://www.danstools.com/javascript-obfuscate/ https://jscrambler.com/en/