Jump to content
Search Community

mk1

Members
  • Posts

    46
  • Joined

  • Last visited

Everything posted by mk1

  1. @Sahil Everything was working fine, I had a spelling mistake on line 283, where I was calling all carousel elements globally: TweenMax.set("." + defaults.singleSlideClass), { x: "+=" + plugin.$diffX }); and I had to change it to: TweenMax.set(plugin.$slides, { x: "+=" + plugin.$diffX }); where: var plugin = this; plugin.$slides = this.$element.find("." + defaults.singleSlideClass);
  2. @Jonathan I don't see any extra div created in @Sahil example after init of JS function, am I missing something?
  3. @Sahil I did, but not with this boilerplate. I tried to stick to the description I found on the web and maybe some info from that article mislead me a little bit. Still, I am going to do in depth debuging in order to fully understand what's going on under the hood. I thought I know, as you can see I was wrong I did many simple examples, that's why I wanted to make the next step :), well... it's still a progress
  4. @Sahil I can see now what you mean with multiple instances. True is that draggable works for all at once. Mouseevents does not. I think there is an issue in .create where I do not understand why you use '<div />' instead of some id or class in example. As I can see in the console, plugin is initilized properly. Each time per wrapper with the right className
  5. I wanted to practise building a jQuery plugin with more advanced concepts, so once you have invested so much time into creating that solution I thought I will go a little bit further and provide it in an easy to implement version for our GreenSock community. So in order to answer your question: Plugin is not a must here, but I always preffer to learn on real life examples. I had some issues with understanding your code, as I am not very familiar with GSAP docs, but after some digging I was able to solve the issues that I had at the beginning. Okay, I will check your demo once again to check if I didn't forget anything. I forget about one thing, I want to have on hover effect on each card, that's why I am thinking about disabling draggable for non-touch screens.
  6. Hey Guys, based on @Sahil solution I came up with a simple jQuery plugin. Feel free to post any thoughts or fixes. It's not yet finished, but Sahil's functionality is already implemented. Quick question, I can see some issues while Pressed and Mousemove same time, how can I make those two play nice together with draggable plugin? Quick question no.2 , I want to disable draggable for non touch screens, should I use a modernizr for this or GSAP have some plugin to make this work as well?
  7. Wow Sahil, that looks great! Thanks a lot. I didn't expect so much help from you guys. Much appreciate
  8. Hey Guys, I want to recreate the solution from here using GSAP: 99designs.com Just wanted to ask about what GSAP plugins would you use here for the smoothest animation. And I wondered if simillar subject were already explored at our forum. I was wondering about the 2 hidden divs approach ( see attachement ) but maybe a beeter apporach would be to trigger event based on the amount of space between screen edge and cursor ( calc. in JS ) . WHat's your opinion? Best regards, Nick
  9. mk1

    To heavy animation

    Hmmm... I striped down the code to the minimum: jQuery(document).ready(function ($) { /* ***************** Expand and Disband Sidebar ********************** */ //Floating arrow Yoyo Tween var canCloseTheSidebar = $('.canCloseTheSidebar'), topNav = $('#topNav'), closeSidebarTimeline = new TimelineLite(); closeSidebarTimeline.to(canCloseTheSidebar, 2, {x: '+=6', ease: Back.easeIn.config(1.7), yoyo: true, repeat: -1}); (function ($) { (function ($) { $.fn.sidebarExpander = function (options) { var settings = $.extend({ // These are the defaults. topNavId: '#topNav' }, options); var inProgressFlag = false, isOpenFlag = false, triggerButtonW = $(this).outerWidth(), triggerButtonNewWidth = triggerButtonW + settings.extendWidthBy; return this.on({ mouseenter: function () { TweenMax.to($(this), 0.4, {width: 280}); }, mouseleave: function () { TweenMax.to($(this), 0.4, {clearProps: 'width'}); } }); }; }(jQuery)); var sidebar = $('#sidebar'); sidebar.sidebarExpander(); }(jQuery)); }); Preview: http://property-backend.beectrl.a2hosted.com/branches/sidebar_animation_js/ Here's the css animation, much more complex and still much better working... Preview: http://property-backend.beectrl.a2hosted.com/ I thought that CSS animations are much less smooth than GSAP EDIT: I have add rotation as @Jonathan suggested and I think it improved the animation a lot, but it's still not butter smooth, at least on my Mac (Pro, mid 2015 )
  10. mk1

    To heavy animation

    Thanks a lot for the tips guys, working on it right now. Will post the outcome asap
  11. mk1

    To heavy animation

    Good morning everybody! I have build few animations using pure TweenMax, and right now one of them is ultra heavy for the processor, below I am pasting it's code: var navExpander = new TimelineMax({paused: true}); jQuery(document).ready(function ($) { var sideBarContent = $('.adminArea__sidebar'), sidebarFlag = $(".sidebarFlag"), contentFlag = $(".contentFlag"), navFlag = $(".navFlag"), pathLenght = 0, canCloseTheSidebar = $('.canCloseTheSidebar'); function checkAnimationPathLength() { var sidebarLenght = sideBarContent.outerWidth(), pathLenght = sidebarLenght - 80, pathLenghtContent = pathLenght; console.log(sidebarLenght, pathLenght); sidebarFlag.removeAttr('style'); contentFlag.removeAttr('style'); //GSAP timeline put here on purpose, cause of GSAP's value caching before they are updated navExpander.clear(); navExpander.invalidate(); navExpander .to('.adminArea__sidebar__content .toFadeOut', 0.2, {autoAlpha: 0, ease: Power4.easeOut}) .to('.adminArea__sidebar__content .profilePhoto', 0.8, {scale: 0.4, xPercent:-50, left:"50%", y: '-=90', ease: Back.easeInOut.config(1.2)}, "Same tween") .to(sidebarFlag, 0.8, { width: '-='+pathLenght, ease: Back.easeInOut.config(1.2) }, "Same tween") .to(contentFlag, 0.8, { width: '+='+pathLenghtContent, ease: Back.easeInOut.config(1.2) }, "Same tween") .to(navFlag, 0.8, { width: '+='+pathLenght, ease: Back.easeInOut.config(1.2) }, "Same tween") .to('.adminArea__sidebar__content ul li a.active', 0.8, {className: '-=active', ease: Power4.easeOut}, "Same tween") .to('.adminArea__sidebar__content ul li a span.bl-icon--sidebar', 0.8, {xPercent:-50, left:"50%"}, "Same tween") .to('.bottomNav button.canLogOut', 0.8, {backgroundColor: '#607d8a', ease: Power4.easeOut}, "Same tween") .to('.bottomNav .toFadeIn', 0.8, {autoAlpha: 1, xPercent:-50, left:"50%", ease: Power4.easeOut}, "Same tween") .to(canCloseTheSidebar, 0.4, {xPercent:-50, left:"50%", rotation: '-=180', onReverseComplete: function(){ TweenLite.set(this.target,{clearProps:'all'}); }}, "Same tween"); //.to('.adminArea__sidebar__content .profilePhoto', 0.8, {y: '-=90', ease: Back.easeInOut.config(1.2), delay: 0.2}) //.staggerTo('.staggerToTop', 0.6, {y: '-=80', ease: Back.easeInOut.config(1.2)}, 0.1, "Same tween"); //.to('.adminArea__sidebar__content .toFadeIn', 0.8, {autoAlpha: 1, ease: Power4.easeOut}); } checkAnimationPathLength(); $(window).on('resize', checkAnimationPathLength); //Expand the sidebar var adminStatusFlag = false; var inProgressAdminBar = false; canCloseTheSidebar.on('click', function () { if(adminStatusFlag === true && inProgressAdminBar === false){ inProgressAdminBar = true; navExpander.reverse(); setTimeout(function () { inProgressAdminBar = false; console.log('Sidebar animation finished'); adminStatusFlag = false; }, 900); }else if(adminStatusFlag === false && inProgressAdminBar === false){ navExpander.play(); setTimeout(function () { inProgressAdminBar = false; console.log('Sidebar animation finished'); adminStatusFlag = true; }, 900); } }); TweenMax.to('#sideBarKiller', 2, {x: '-=6', ease: Back.easeIn.config(1.7), yoyo: true, repeat: -1}); }); Can you please guys tell me if there is something bad about the code structure what may cause my processor to shoot through a roof? As well before I will build any samples on codepen, do we have some sources on optimization, performance, etc. ? I really want to find the solution on my own, or try at least
  12. Okay, I got it working quite well, however I am not able to switch the direction of text disappearing, how can I do that?
  13. After more digging I think I will go with fixed label, it look like it will take much less time to accomplish
  14. Maybe some of you are familiar with my post regarding the typeWriter effect which I successfully fixed to not be buggy anymore thanks to your tips. Today I am trying to do simillar effect on a placeholder, working one way only. 1. On first load we have input with some placeholder content inside 2. We click on the input and the placeholder content delete itself with typewriter effect I know there is plenty jquery plugin on this, but I want to stick GSAP in such cases wherever I can , and unfortunately I wasn;t able to find such example on codepen or our forum that actually use GSAP. My codepen is empty for now as I just started to work on that case. As always if you are familiar with any codepen samples that I might find usefull I will be the most grateful for them. Cheers! Nick
  15. After switching to: TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__head', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation")); TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__subheader', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation")); TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__body', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation")); TlForms.add(TweenMax.from('#step'+i + ' ' + '.step__row-content__footer', 0.4, {autoAlpha: 0, y: '+=50', ease: Back.easeOut.config(1.7)}, 0.3, "Steps section animation")); Error disapeared
  16. I think I just did it: var TlForms = new TimelineMax({paused: false}); !function () { var stepsArray = document.querySelectorAll('form .step'); //Steps transitions for (var i = 0; i < stepsArray.length; i++) { stepsArray[i].id = 'step' + i; if (i === 0){ TlForms.add(TweenMax.staggerFrom('#step'+i, 1, {autoAlpha: 0, delay: 1})); }else{ TlForms.add(TweenMax.to('#step'+(i-1), 1, {autoAlpha: 0, y: '+=50'})); TlForms.add(TweenMax.staggerFrom('#step'+i, 1, {autoAlpha: 0, y: '-=50'})); } TlForms.addPause(); } }(); However after adding this line before TlForms.addPause(); TlForms.add(TweenMax.staggerFrom('#step'+i + ' ' + '.step__section', 0.4, {autoAlpha: 0, y: '-=50', ease: Elastic.easeOut.config(1, 0.3)}, 0.3, "Steps section animation")); I am receiving the following error: TweenMax.js:351 Uncaught TypeError: onCompleteAll.apply is not a function at TweenMax.finalComplete (TweenMax.js:351) at TweenMax.p._callback (TweenMax.js:6496) at TweenMax.p.render (TweenMax.js:317) at TimelineMax.p.render (TimelineMax.js:317) at Object.p.render (TweenMax.js:6784) at Object.Animation._updateRoot.TweenLite.render (TweenMax.js:7049) at Object.p.dispatchEvent (TweenMax.js:6208) at _tick (TweenMax.js:6260) , but everything works just fine...
  17. Hey, another quick question, I've encountered such funcionality of creating timeline to manage all elements in single html element, but as it often happen when I actually need it I can't find it. I have a form which has multiple steps (distraction free form): <form> <div class="step"> ...some inputs here </div> <div class="step"> ...some inputs here </div> <div class="step"> ...some inputs here </div> <div class="step"> ...some inputs here </div> </form> Every step will have same In and Out animation. My question is: Better to create timeline based on number of steps or just attach In Tween and Out Tween to every step? I want to create reusable function that can be applied to multiple forms with different number of steps. Looking forward to hear some more awesome tips from you )
  18. So... after some thought I have made it with an SVG shape and it works very very well: http://codepen.io/Nikolaus91/pen/PWjYMz Thanks again for the tips! One question though, can I manipulate the speed of Ease steps? I want the first part , when the buble is getting bigger to animate slower and the part when it getting smalle to speedup a little bit. Can I do that?
  19. Okay, I can see I have to be more specific. The whole thing with the speech buble animation is an experiment I want to try it out and see if this is possible. The image I provided is just an image to show what I want to achieve - the beginning and the and of the animation. My goal is described below: I would love if the animation could move from the bottom and grow from a smaller speech bubble. I would like it to look lively and bouncy rather than just growing motion. PointC, I was wondering if using an SVG wouldn't be a better approach here, do you think it will be a better solution here? For now all I have is HTML + CSS markup. OSUblake, thanks for the tips, you are right animating wdth/height from the middle doesn't have the smoothness I need. Currently working on SVG approach, updates soon Do you have any SVG showcases on mind that work in similar way?
  20. First step: is just animating width, height. If this work out well than I will try to add a morping to it, but it still under consideration. Now I am trying to findout any limitations that can hold us during the development part.
  21. I went through codepen's regarding the speech buble effect but none of them is what I am looking for or even close. Mostly shapes are provided there and shape is not what I need, I focus only on blowing ballon like effect here.
  22. For now I am looking for an inpiration but the goal I want achive is something like this: http://imgur.com/a/OdQpM Thanks for links to custom Wiggle and Ease, but for now I am strugling with morphing the buble from the middle. I am not able to achive this while animating width or height, only scaling manage to do this, but it's not the effect I want to use ...
  23. Hey, quick question, have you any working examples on speech buble animations? I want to make one, to animate speech buble size from small to big, like in some popular messenger applications or simillar. Any tips much appreciated. And how to animate width and height from the bottom middle in example? Transform origin is for css transforms as I recall If animating from the middle is impossible I thought about animating width from the left top corner as a backup solution, but still transform origin is not of much use for here,.... Thanks! Here's one simple example I have encountered: http://codepen.io/anshing97/pen/qFDBK
  24. I've just fixed this with some help from Jonathan's examples. Thanks guys, you are awesome! @Jonathan I know, there are plenty of these around, nevertheless GSAP is unarguably awesome and I want to build as much as I can from scratch to become as experienced as possible in the GSAP. Edit. I have changed form zero-duration tween to 0.01 and then issue has been resolved by Carl.
  25. I've read everything I could find here, and now I got completely stuck. I tried: invalidate(), kill(), killAll, clear(), .set + ClearProps, etc. and I am unable to recalcualte css inline stylining on resize. <div class="br-wrapper__section br-section--anime br-section--one" style="visibility: inherit; opacity: 1; transform: matrix(1, 0, 0, 1, -398.5, 0);"> <div class="br-wrapper__section__content br-wrapper__section__content--single"> <h1> Office haircuts for both men and women. </h1> </div> </div> Only location.reload works fine... I really need to find a solution on this Is there a way to get rid of these css styles or they always be rock solid?
×
×
  • Create New...