Jump to content

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

Chrysto last won the day on August 13 2014

Chrysto had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Chrysto

  1. Hi Mike, just to add one thing... I noticed that in your loop you're adding new elements with the same id: for (var i=0; i<10; i++){ var blob = $("#blob"); // should be $("<div class='blob' />"); I would suggest you to use classes instead of ids. Having multiple elements with the same id on the page may break your script. Validators will complain, browsers will get you away with it, but selectors like getElementById() will break, which will result to non-working JS code. Ico
  2. Hi, Parallax is much of a experimenting with values... Basically , you need to know mouse position on move, original cords of the elements and then find out the new position - to add or substract the mouse position from the original position . The simplest thing I can imagine is moving elements with x/y and getting their original position with postion().top/left Here is a quick pen : http://codepen.io/burnandbass/pen/GjAfd http://codepen.io/burnandbass/pen/dqgkn And here is pen where you can set different horizontal and vertical speed I attached data-speed to each element I want to move, then use this speed to calculate the new position - the equation is in the pen. In my way you only add new elements with data-speed attribute and parallax class, set the original position via CSS and boom - it is working. You can manage the z-indexes via CSS, which I find to be good thing. Probably it's not the best code out there, but it is working Also, note tweening is expensive operation, so if you just need to move the stuff... Use set() TweenLite.set(item, { x: (item.position().left + pageX * speed )*fixer, y: (item.position().top + pageY * speed)*fixer }); On my code I'm getting 60fps, 6 milliseconds average paint time and 30mb ram usage when tweening. When I'm just moving the stuff - 4 milliseconds paint time and bout 22MB ram usage. If you want to speed up the things , you can store somewhere original top/left value and then move it with top/left or x/y. I would use a hash table for this, this is just my style of coding If you have some questions about the code, send me a message. Also, note there can be a lot of tricky part - for example responsiveness, min/max move, percentage based move ( you cannot do it with transform, have to manually calculate values ) etc. Probably the best parallax I've built with AS3 behaved a little different from the one in my pen. I had max and min values and I knew that if somebody goes with the mouse from the one to the other end of the screen, the first level will move exactly from the left to the right side of the screen. So no matter the screen resolution, that would work. You can do the same with very little tweaking in my code ( fork the pen ) and it would work great, trust me. Cheers, Ico
  3. Hi and welcome to forums, on iPod Touch I get the click event, however it isn't going to the page. I saw your href is "http://wwwgoogle.com" try to add the coma "http://www.google.com". I've had issues with mobile and malformed urls before( ajax request worked on desktop, didn't worked on mobile ), see if this will helps. Also, I created my own test and the function on click works.
  4. Hi, write me a message if something confuses you. I use jQuery add() method to merge selections ( to catch click() on both externall and in-tab navigation) Also, as I mentioned I use to cache the DOM - then find the element I need with jQuery's filter() method - it is up to 10 times faster then creating a new jQuery selection. Cheers, Ico
  5. Hi, Here is my pen : http://codepen.io/burnandbass/pen/wDjlg There are a lot of ways to achieve an effect, also different styles of writing code... I'm not saying mine is better, just see which one is working best for you. Cheers, Ico
  6. Hi, I wold like to suggest you a simplier way to achieve this effect: http://www.codepen.io/burnandbass/pen/LckBh I explained the code here: http://bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/ In my way you can add as many elements as you want Also, try to move not the "left", but "x" position. Here is a pen: http://www.codepen.io/burnandbass/pen/nktrz I get better performance on modern browsers.
  7. Hi, When it comes to "deep linking" most of the people thought about url hashtag followed by section name, so you can navigate trough pages and still have back/forward in the browser history. I find it little hard to follow your code, do you want to rewrite it in my way? I prefer to use element ID's and classes, but it can be also done with jQuery's eq() selector. http://codepen.io/burnandbass/pen/quiIv Here is a quick snipplr. I just added ID's to the tabs and navigate to all them via the anchors href attribute. This way I can write only one function that changes content. Also, I'm used to use jQuery's filter() method and caching the DOM, because of the performance. P.S. do you know, GSAP CSSPlugin have property "className" and you can use it to animate the navigation: here is a pen : http://codepen.io/burnandbass/pen/wDjlg Cheers, Ico
  8. I think this video is the best way to get started with TimelineLite in JS
  9. Hi, X and Y transforms are performed by matrices and they use absolute values. I had similar problem, so when I needed to translate with percentages, I calculated that percentage based on parent width. Here is codepen: http://codepen.io/burnandbass/pen/bysgL
  10. Hi, Nothing to add to Jack's answer, but this post ( including the video ) will make the things about animating with top/left vs x/y a little bit clear: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
  11. Hi and welcome to the forums, Are you sure you're using the latest version of TweenMax ( currently 1.10.2 available at http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js ) I just created a simple test http://www.codepen.io/burnandbass/pen/qocuD / http://cloud.bassta.bg/a.html And the animation is working in IE8 for me A problem you might have is "clipping effect" - described at http://extremelysatisfactorytotalitarianism.com/blog/?p=1002 .
  12. Hi, I also would like to use pure JS where is possible, but in the country I live in a lot of people are using old browsers, so the clients want the banners to also work in older browsers. JS libraries like jQuery or zepto makes it easy and eliminate a lot of bugs and browser incompatibilities. Also, I like to use common libraries, so it is easier for other developers working on the same project / the developers that will change my code in future. If you write everything in pure JS, the code can turn into spaghetti-code in no time. I find it difficult to maintain such a code, so I just use libraries and jQuery-plugin like structure for my code. About sprites - they are great for GIF-like banners. I created a little snippet that can tween sprite in gif-like way with GSAP ( originally written by www.citychurned.benjerry.com ) You can check it on : http://codepen.io/burnandbass/pen/ikLsl Other thing you can do is something like simple fadein/fadeout banner with a little bit of CSS and GSAP. You use one picture, tweak the background-position and then just write little bit of code to fade it in and out. Something like http://blog.bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/ .Since you have only one image, only one request will be made. And last... About year ago I had to make A LOT flash banners to work on mobile devices. So I just wrote an app that loads a banner, you can play/pause it ( setting framerate to 0 pauses the swf, setting it back to 24 or 31 plays it ) , you can capture the banner scren , all captured frames were combined into one big image and slideshow was constructed via TimelineLite. With the tool I was able to process more than 500 flash banners, they were working and the filesize was less than 100kb ( everything, depended on the banner size ). I think I still have the code somewhere, so if it would help you, I'll be glad to share. But TimelineLite + single sprite was working great for me and haven't created problems since. The drawback of my system is that it was't working with banners that puled dynamic data
  13. Hi and welcome to forums, Zepto is jQuery-like library, which is lighter than jQuery(smaller filesize, some features removed). Most of the developers use it like alternative to jQuery, not to TweenMax. Zepto and jQuery are general purpose libraries - they can handle DOM selection, events, ajax etc...and tweening and simple chaining. TweenLite/TweenMax on the other hand are Animation libraries - GSAP is tool for animation and is optimised to give the best results in animating. The performance is times better then the animation methods of jQuery and Zepto. So in normal projects I would use jQuery/Zepto to select the elements and add event handlers and TweenLite+CSSPlugin for the animation itself. CSS3/HTML5 banners have to be small in size, so most of the developers use Zepto other than jQuery since Zepto is lighter and also have simple touch event support ( like tapping and swiping ). Then they use Zepto's internal animation mechanism or CSS3 transitions for the banner animation itself. This have some limitations - like chaining, callbacks, reverse, unproperly set values(example prefixes), no callback etc. TweenMax/TweenLite on the other hand does this for you, so it is very easy to create, stop, pause, reverse a tween ( or sequence of tweens ), it is fast and also make the animation work for older browsers. Also, check the great TimelineLite ( I use it for banners ) My suggest is: If you have complex animation/ajax and don't worry about filesize - Zepto + TweenLite + CSSPlugin If you have complex animation, you don't pull dynamic data, don't have complex event handlers and worry about the filesize - TweenLite + CSSPlugin only If you have simple animation, a lot of event handling, worry about filesize, but don't worry about compatibility or consistency - use only Zepto, or some CSS transitions. It just depend on the type of the project you're creating. I personally would go TimelineLite + some selector engine ( like Zepto, or just the jQuery selector engine - Sizzle ). If you provide me with more details about your project, I can be in greater help. Cheers, Ico
  14. Hi, I had a similar problem - have to tween fullscreen div . This is what I did: 1) used debounced resize to calculate the position ( I have a variable called "step" and I calculate it on every resize based on the window width: //or you can calculate just onResize() $(window).smartresize(function(){ self.onResize(); }); then: onResize: function(){ var self = this; var winWidth = $(window).width(); self.bgPercentStep = (0.5*winWidth) / self.numSlides; // } And the tween TweenLite.to( self.$bgImage, self.settings.transitionTime, { x: "-" + parseInt( self.currentSlideIndex * self.bgPercentStep ) + "px" }) If you need help with this, just post me your code I'll try to respond you on the next day. Cheers, Ico
  15. Nice, such a tool would be around long ago. I just have some suggestions - adding undo/redo capabilities with such a key shortcuts ( example Ctrl+Z ... Very nice undo/redo system you can find at https://github.com/benrhodes/graffiti-as3-drawing-lib ). Also, consider using swffit.js to set minimum flash width/height ( ex 800x500 ) Cheers, Ico
  16. Hi and welcome to forums; Actually when you use scale the engine tweens not the width and height, but the CSS3 transform ( the transform matrix ) of the object. The final style will be something like "z-index: 0; -webkit-transform: matrix(1.2, 0, 0, 1.2, 0, 0); " and the width and the height will stay the same, since the CSS3 transforms are different then the css width and height properties. Like Rodrigo pointed out, if you need to know the width and height of the element (how big they seem), you just have to multiply width and height by the scale factor.
  17. Thanks Jack, thank you very much. I'm now creating widget similar to this one : http://blizoo.bg/tv-program.html . The horizontal and vertical divs have to be perfectly synced. The div that I drag have very large dimensions and is updated via AJAX, and still the draggable plugin handles it very well. I use ThrowProps plugin, and disable it on mobile devices. The performance is fantastic! Since I use premium GreenSock plugins I can't post the whole project on the forum, but here is my code : http://pastebin.com/AXWFwhHD To update the elements I used: TweenLite.set( self.$timeline, {left: self.$schedule.css("left") } ); TweenLite.set( self.$channels, {top: self.$schedule.css("top") } ); But setting and getting positions on every update seems slow to me and just thought since they're already calculated, getting them from the plugin would be faster. Once again, thank you for the plugin and the modifications. It makes developer life so much easier!
  18. Hi GSAP team, I've just started digging into the new Draggable plugin. It is absolutely awesome game-changer!!! I'm creating now a simple touch-slider ( to test the capabilities to the max ) and just wanted to ask few questions. 1) Is there a way to get element top and left ( x/y ) position via the Draggable, regardless of the type I've decided to use? It would be great to have such a feature, added to xMin, xMax etc that you can get on onDrag() method via this. 2) I plan to create external controls for the slider using the scrollTo plugin. is there a better way ( something like hidden feature ) to move the slider and it continue dispatches event without the scrollTo plugin? P.S. haven't slept that night, so I confused at the post ( the whole scrollTo thing ) . I just use regular TweenLite to animate the scroll of top and left position And once again - thanks for the plugin. It's probably the smoothest JS motion I've seen on touch interaction.
  19. Hi, I think fromTo() is static method and cannot be used with instance of TweenMax. That's why the browser throws this error.
  20. HI, why don't you just add some overlay with gradient from non-transparent, to transparent and back to non-transparent? http://codepen.io/burnandbass/pen/fKzCe . You can even do it with CSS, but the browser support is not so good, so I personally prefer png image.
  21. Hi, I created you a fiddle using staggerFrom method: http://jsfiddle.net/pMJ87/
  22. Carl, this is the fiddle: HTML <div id="restart">Restart</div><div class="box"></div> CSS .box{ position: relative; width: 100px; height: 100px; background: black; } JS var t = new TimelineMax(); var $box = $(".box"); t.add( TweenLite.to($box, 0, {autoAlpha:0}) ); //or set(), fromTo() methods. Add this just to hide the elements on the beginning. t.add( TweenLite.to($box, 1, {autoAlpha:1, delay:1}) ); t.add( TweenLite.to($box, 1, {autoAlpha:0, delay:2}) ); t.play(); $("#restart").click(function(){ t.restart(); }); I personally like to create a reset() function and call it at the end of the timeline and haven't got problems such as this.
  23. Hi and welcome to forums, You can use a zero-duration tween to set the elements autoAlpha to 0 on the beginning on the timeline, or to use TweenLite.to() method, or TweenMax.fromTo() method. http://jsfiddle.net/YkVwk/3/
  24. http://blog.bassta.bg/category/tutorials/ I haven't updated the blog because I have no time recently, but my finals are over in less than two weeks, so expect a lot more to come . Also, check https://www.kreditna-karta.bg/ and http://dangelicoguitars.com/
  25. Chrysto

    String to ...

    Hi and welcome to forums, In the first example you pass to the function DOM element, so it works. In the second example you pass a string. TweenLite have it's own small internal selector mechanism ( will pass the string to document.getElementById function ). So in the second example this will be the same as TweenLite.fromTo(document.getElementById("acco1"), 0.5, {opacity:0.5}, {opacity:1.0, ease:Sine.easeInOut, onComplete:callTab}); The problem I think is that the element with such an ID doesn't exists.