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. http://jsfiddle.net/bassta/B97Za/ or if you need just the values: http://jsfiddle.net/bassta/B97Za/1/ Other approach is creating a dummy object, tween it's values and then get them: http://jsfiddle.net/bassta/B97Za/2/
  2. Chrysto

    reverse button

    Hi and welcome to forums. One thing I see is that the timeline is defined in window.onLoad function scope. Just add the btn.click() functionality inside the same function. I recommend you this article : http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/ Cheers, Ico
  3. Hi; The effect consists of a lot of CSS and JS that I'm unable to write right now. I'll try to create you working demo of the same effect using TweenMax later today Another thing I would recommend is finding similar menu created with jQuery ( this looks like slideDown / slideUp jQuery effects ) and override the default jQuery animation with TweenMax using jQuery GSAP plugin (
  4. Hi and welcome to the forums; The selector "#categories.nav li ul" is unordered list, so unless it have unique ID (TweenLite have own very small selector engine working with IDs ), you have to select it first with pure JS or some selector engine. If you're working with Wordpress theme there is high chance that jQuery is included in the website, so you can use jQuery to select the element you want and then animate it with TweenLite. You can try <script type="text/javascript"> $(function(){ TweenLite.to($("#categories.nav li ul"), 1, {left:"632px"}); }); </script>
  5. Hi, I see you're using TweenMax version 1.8.2 or 1.9.1, the current version is 1.9.7 and first I would upgrade to the latest version at http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js . Did you tried to use clearProps ( clearProps - A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes. ) ?
  6. Chrysto

    animating steps

    Very useful, Jamie! Really clean approach!
  7. Hi; I've done some very accurate animations ( 60 fps, 1/100th of second chaining ) with delay and duration and gave perfect timing on all the machines I've tested. My advice is don't worry about that.
  8. Chrysto

    animating steps

    Hi; Anyway, here is the new pen: http://codepen.io/burnandbass/pen/qAhpj I hope it is working for you
  9. Chrysto

    animating steps

    Hi; I thought this was the effect you tried to achieve. If you want to "tween" the sequence ( the first frames show faster, the middle stays more etc.) you need a function that calculates the background position and runs on onUpdate() method. I'll try to create you a new pen with this technique later today
  10. Chrysto

    animating steps

    Sure, you can configure SteppedEase easing ( http://api.greensock.com/js/com/greensock/easing/SteppedEase.html ) . Here is a pen : http://codepen.io/burnandbass/pen/FfeAa
  11. Hi; If you need to know when element enters/leaves the viewport I suggest you using a plugin, like http://static.pixeltango.com/jQuery/Bullseye/ . To animate an element based on scrolling position I suggest you creating an TimelineLite and then getting the scrolling percent and animating the timeline to that percent. View the source of this page to see how did it http://blog.bassta.bg/demos/tweenmax-text-animations/index10.html Sorry for the short answer, but don't have much time right now.
  12. Hi; I think that tick is event dispatched by the static ticker object; TweenLite.ticker.addEventListener("tick", renderTween); function renderTween(event) { //this function will be executed on requestAnimationFrame if available, or on setTimeout if not }
  13. Chrysto


    Thanks, Rodrigo. Definitely will consider making a separate tutorial about overwriting manager. Writing tutorials prove to be very difficult, especially when you don't know the reader previous experience with JavaScript - for example I consider DOM ready event and jQuery selectors something every front end dev should know, but many times I proved wrong. So the best way I think, is to begin with some CSS / JS introduction followed by jQuery introduction followed by GSAP introduction (tweenlite syntax - selector, time, vars ) and then geting deeper into GSAP ( delays, from, fromTo, set methods and easing ) . Then introducing the Plugins, more advanced concepts ,timeline and then some special tricks for the end. This was my learning curve and I feel the flow natural Other thing I'm thinking about is codepen example for every TweenMax/TimelineMax method and all the plugin - pretty much like GSAP AS version Plugin Explorer - it really helped me when I was starting. Jack did a great job with http://www.greensock.com/get-started-js/#basics page , and expanding it with some basic JS knowledge ( out of the scope of GSAP page ) and creating a pen for every feature may come in handy for just-starting developers. It would be also great to collect and categorize all tutorials about GSAP.
  14. Chrysto


    Great tuts, Ihatetomatoes and Michael! I'm currently writing a series of tutorials - getting started with GSAP ( and some jQuery / JS basics, seems a lot of AS3 developers have difficulties with some aspects of JavaScript ). Currently I've written the basics ot JS -> html nodes how to select them, basic GSAP syntax, more GSAP goodies and then I'm planning to extend the series with plugins and TimelineMax. I plan to release the series at once, once they're completed. It would be great to hear from you guys, what was the most difficult thing when you were starting with GSAP? What was the "a-haaa" moment?
  15. Hi; from jQuery website: " " The jQuery selectors are just like CSS: If you have element with class name "content" and img tag inside id jQuery selector $(".content img") will select the image. A friend of mine summed up good learning resources for jQuery : http://tutorialzine.com/2013/05/the-best-free-books-videos-tutorials-and-more-for-learning-jquery/
  16. Yes, it will work for old browsers, but use jQuery version 1.9.1, not jQuery 2.x, because after version 2 IE8-- support dropped Are you from Russia?
  17. Thank Carl, didn't know about this feature. I'm starting reading the full documentation again right now! @Faulure13 there is selector called querySelectorAll() that acts kinda jQuery. If you're just testing code in webkit browsers it acts great. if the filesize of jQuery is a problem, take a look of Zeptojs ( http://zeptojs.com/ ). If zepto filesize not small enough, consider using min.js ( https://github.com/remy/min.js ). It is 619kb only and takes care of basic functionality like selecting elements and event handling.
  18. Well, actually you can't select anything with GSAP itself. You need pure JavaScript to select the elements you want(by class, id or type). With pure JavaScript it is harder, also don't work the same in all browsers. jQuery makes it very very easy to select anything and works very well with GSAP, so I would recommend you to use them both in your project. The no-jquery code is different, because I saw your original code ( btn.onmouseover = function() { TweenLite.to(test, 1.5, {css:{backgroundColor: "#ff0000"}}); } btn.onmouseout = function() { TweenLite.to(test, 1.5, {css:{backgroundColor: "#1f00F0"}}); } ) and thought you want to animate the background color when button is hovered (not the element itself), so I just added that button. But to understand how things work in JS, first start reading basic JS/jQuery tutorials ( see my previous posts) and once you understand selectors, you'll be able to animate the things you want with GSAP. But selectors comes first. Some links that can help you get started with the basics: http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/ http://www.codeproject.com/Articles/246701/JQuery-for-Beginners http://www.1stwebdesigner.com/tutorials/jquery-beginners-1/
  19. If you are not using jQuery and add the files to the beginning of the html the html is still not rendered so the script does nothing. You can either put your JS files at the bottom, or to use a jQuery and wrap you script in special jQuery function : <script type="text/javascript"> $(function(){ //your code here will run after the page loads so everything is OK }); </script> If you give me a link to your webpage I can tell you where exactly is the problem. http://bassta.bg/experiments/failure13.zip You can download the files from here. Suggest you to read this article to get you started http://learn.jquery.com/about-jquery/how-jquery-works/
  20. Yes, you can make it work with only JavaScript. Just jQuery is very easy to use and makes everything faster; Here is a pen with pure JavaScript. http://jsfiddle.net/3HmJg/ Still, I would recommend you using jQuery. Unfortunately CSS/JS/HTML are non as consistant as Flash and have a lot of differences. If you are beginner javascript coder, consider starting with jQuery tutorials like http://www.impressivewebs.com/jquery-tutorial-for-beginners/ If you tell me more what exactly effect are trying to create, I can explain to you ( in english or russian ) how to do it.
  21. Привет из Болгарии, I think the mistake is your selctor: var test = document.getElementById(".content"); With pure JavaScript you need var test = document.getElementsByClassName("content "); Why don't you use jQuery for selector engine? http://jsfiddle.net/PGbeE/1/
  22. This looks like an odd problem. Does it happen in all browsers and what is the result from fromTo()
  23. Yes, oddly this is browser issue. I tried to animate form with GSAP/jQuery and had problems with both in Chrome/Safari. Wrapping it in container element forks fine.
  24. Hi; See if characters are set to display: inline-block. If they are just inline span 3D transform can't work on them ( this is not a GSAP issue ). Just set the letters to display inline-block and should work fine. Also, I would recommend you TweenMax.fromTo method to animate them. Btw yesterday I posted a quick tip how to animate letters with GSAP : http://blog.bassta.bg/2013/05/text-animation-with-tweenmax/ look the demos, they might help you http://blog.bassta.bg/demos/tweenmax-text-animations/index3.html here is the demo with scale animation.
  25. I think not, but you can make a function that does the calculations for you: http://codepen.io/burnandbass/pen/docsa