Chrysto
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Chrysto
-
Hi, can you create a codepen to demonstrate the problem. Basically setting type to "scroll" creates new div and wrap it around the content of the target element. This new div uses the target element position/dimensions as bounds, so there is no need to explicitly set them. This is also why you should set your target element a height. Here is quote from the docs: Also, make sure that you you the latest versions of Draggable and TweenLite/CSSPlugin or TweenMax.
- 1 reply
-
- 1
-
-
Hi, What you're looking for is a TimelineLite/Max method call . http://codepen.io/bassta/pen/qpsno - here is a simple codepen how to use it. Here is the code: tree.call(function() { //addClass, toggleClass, or your custom logic. $('#map-container').addClass("red"); }, null, null, 2);
- 5 replies
-
- 2
-
-
-
- class
- timelinemax
- (and 1 more)
-
Yes, Kirupa has nice scripts, but I wouldn't use translating, because of the scrollbar ( it is not moving, it will confuse users ) . On laptops with touchscreen and mouse ( ex. Lenovo z500 touch ) mixing scrollTop and translate3D can create a mess. The scrolling script can be a optimised, so it uses default scroll for short distances.
-
Hi, here is the script: $(function() { var $window = $(window); //Window object var $parallax = $("#container_header"); //parallax object var scrollTime = 1.2; //Scroll time var scrollDistance = 170; //Distance. Use smaller value for shorter scroll and greater value for longer scroll //Added parallax velocity - it's the same as it is in the original files var velocity = 0.3; $window.on("mousewheel DOMMouseScroll", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3; var scrollTop = $window.scrollTop(); var finalScroll = scrollTop - parseInt(delta * scrollDistance); TweenMax.to($window, scrollTime, { scrollTo : { y: finalScroll, autoKill: true }, ease : Power1.easeOut, //For more easing functions see http://api.greensock.com/js/com/greensock/easing/package-detail.html overwrite: 5 }); }); //Add onScroll listener. Because the scrolling have applied easing, the parallax will have easing, too $window.on("scroll", moveParallax); function moveParallax(event){ var scrollTop = $window.scrollTop(); TweenMax.set( $parallax, {top: scrollTop * velocity} ); } });
-
HI, I would suggest you to use the code for the mousewheel only to scroll the page, and to move the header on window scroll. Something like $window.on("scroll", function(event){ var scrollTop = $window.scrollTop(); //code for the parallax based on the scrollTop value });
-
Hi, Here is what I would do: http://codepen.io/bassta/pen/fxKyD As Jamie pointed, the problem is that you're assigning the animation to the original DOM object, which you can get with $selector[0] or $selector.get(0) @Jamie, in some cases it can have impact on performance and also gets very messy with scoping. Most of the times there's a better way to accomplish the same results.
-
Hi, it is a generally bad idea to store data in DOM/jQuery elements. Why don't you do this instead?
-
Hi, If you're on Mac OSX I can suggest you using Coda2. It is very powerful IDE and you can extended it with a lot of plugins. It is very easy to write snippets for Coda2 and if you decide to go with it, I'll share my snippets and templates with you.
-
Yes Jamie, this is it. Just took a look of my code TweenLite.to( window, 1, {scrollTo: {y: $(_section).offset().top - headerOffset, autoKill:false}, ease:Power2.easeOut, onComplete: onSelectionReached} ); Works great on Firefox. http://kabakum.panayotov-consult.com/bst2/ .
-
Try function scroll0() { TweenMax.to($("html, body"), 2, {scrollTo:{y:0}}); } I've seen this is the way most jQuery plugins does the scroll
-
Yes, sometimes this happen and I think have nothing to do with GSAP itself, but it is a browser-rendering issue; Here is an effect that I tried to do with GSAP/jQuery animations: http://codepen.io/bassta/pen/cvdjG The GSAP animation works better than jQuery's one, but here is a strange thing: If you click on the last item, and than the first you will see the line to expand from right to left. On two different machines ( my iMac 21", 2009 and my MacBook, late 2011, both running OSX Maverick and same version of Chrome) different things happens: On my old iMac the animation is perfectly smooth and no jitter occures, On my newer MacBook the animation have bad jitter and you can clearly see how not smooth it is. just take a look of the trembling of the right corner. If I use jQuery animate() the animation looks bad on both machines It is a browser issue I guess. You can try to use force3D: true to get better performance ( don't abuse it ), but the jitter is up to browser. Also, note that the longer time animation is, the more "chopped" it looks like.
-
Yes, this is some limitation... I can thing something of it. Btw see http://bassta.bg/pravatami/?2 - this is slides plugin similar to factslides.com ( It's still work on progress, we will feature rights you have - for example "do you know, you have the right to stay up to three months on EU-country territory with only ID etc ). It will be fully responsive, but I still make the animations with TimelineMax. So if you make everything percent-based and animate top/left properties, trust me, works great.
-
Hi, for a responsive animations I prefer to use percentages, not hardcoded pixel-based values Percentages-based animations have some limitations ( for example no x/y translation ), but my guess would be to make everything percent-based ( in layout and animations ) and you'll have no problems Also, if you need percent to pixel function ( to tween x/y ) you can check http://codepen.io/bassta/pen/bysgL P.S. very nice and create landing page! I love it.
- 3 replies
-
- 1
-
-
- responsive
- browser resize
- (and 3 more)
-
http://codepen.io/bassta/pen/iIskw - medium.com like header effect. When scrolling, I disable pointer events - get MUCH BETTER performance
-
I prefer this way, because you keep the logic ( where animations should be ) and you just create different animations with/without the 3D effects... But keep the logic. It would be great to post here your final project Also, note that you'll probably have to create in/out animation object for every type of animation It is more work, but I suppose - better results.
-
Something i Would suggest is to have something like : [ pseudocode ] var is3DSupported; //Boolean --> true or false, just one browser detection var animObj; //just holders if(is3DSupported){ animObj = {rotationZ: 60} } else { animObj = {alpha: 1} } TweenLite.to(elem, time, animObj); You could predefine some animations, and then just use them later ( without detecting/rewriting every time ). This would keep your code tidy.
-
Yes, this is the one. You can also tween the animation, see this pen by Jamie http://codepen.io/jamiejefferson/pen/igHft
-
Hi, I didn't understood your question, but here are some snippets you might find usefull: bound - number, min and max. If the number is less then min, it returns min. If the number is greater than max, it return max. function bound(_number, _min, _max){ return Math.max(Math.min(_number, _max), _min); } This function returns percentage of a number in a given range. For example rangeToPercent(40,20,60) will return 0.5 (50%). rangeToPercent(34,0,100) will return 0.34 (34%) function rangeToPercent(number, min, max){ return ((number - min) / (max - min)); } This function returns number that corresponds to the percentage in a given range. For example percentToRange(0.34,0,100) will return 34. function percentToRange(percent, min, max) { return((max - min) * percent + min); }
-
Probably have to create a jQuery plugin and documentation for GSAPGif
- 13 replies
-
- 1
-
-
- setinterval
- animation
- (and 3 more)
-
Hi, the class is applied, but somehow the browser applies the height: 0 style. You can add !important directive to the CSS and it will work: http://codepen.io/bassta/pen/vixAs
-
After seeing the support, I would definitely go out with GSAPGIF or steppedEase animation ...
-
Jamie, there is also a quicker way, that is probably better for small images or animations with less frames: http://codepen.io/bassta/pen/FfeAa Just a single TweenMax that tweaks backgroundPosition of the image. For example you have 10 frames, you just configure SteppedEase to 10 and get the animation But for animations with larger images or a lot of frames I would go with the previous code
-
Hi; Take a look at my pen: http://codepen.io/bassta/pen/ikLsl I use single image that is split into regions and then just move it, to simulate frames. I prefer single image because with single image you have single call to the server and this speed things up. Take a look of my code, it is ready to use, just set up your options ( frames : 20, //frames start to count from 1 frameTime : 0.4, gifWidth : 200, gifHeight : 200, spriteUrl : "test.jpg", spriteRows : 4, spriteColumns : 5 ) With my code you get a timeline, so you can play the animation, stop it, reverse it, speed it up or down etc.
- 13 replies
-
- 2
-
-
- setinterval
- animation
- (and 3 more)
-
Yes: you can: just add onDrag() listener and read for "this.y" and you'll get the same position like iscroll5
