mk1

@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);

@Jonathan I don't see any extra div created in @Sahil example after init of JS function, am I missing something?

@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

@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

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.

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?

Wow Sahil, that looks great! Thanks a lot. I didn't expect so much help from you guys. Much appreciate

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

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 )

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

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

Okay, I got it working quite well, however I am not able to switch the direction of text disappearing, how can I do that?

After more digging I think I will go with fixed label, it look like it will take much less time to accomplish

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

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