Virtous

Thanks guys for getting back to me so quickly. One follow up question about using regular tweens, do they animate at the same time?

Hello GSAP community! I have written a jquery plugin which includes some greensock animations. The plugin is a slider that has some elements fading in. I have no problems with the plugin itself, but the way that I use gsap makes me wonder if I'm slowing down the overall performance. Consider the following, Every time the slider updates, I create a new timeline like in the code example below. var tl = new TimelineMax(); tl .to(this.$nextSlide, this.settings.speed, {opacity: 1, right: '10%', ease: this.settings.easing}, 'A') .to(this.$currSlide, this.settings.speed, {opacity: 0, right: '0%', ease: this.settings.easing}, 'A'); What happens to the "first" timeline when the next is created? My initial thought was that it simply gets overwritten. Would reusing the "first" timeline benefit performance? Also, I have one question about including GSAP. At the moment I'm pulling in gsap like this <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script> If I'm only animating the opacity and the right position of DOM elements along with custom easing, which GSAP package should I include in my project? I don't want to load stuff that I don't use. Thanks in advance!

Thank you for those links, appreciate it. Can I do the following? $('.panel > ul > li > a').on('click', function() { var tl = new TimelineMax(); var pa = $('.panel > ul > li > a'); var ch = $(this).siblings('ul'); tl .to(pa, .3, {left: '-100%'}, 'left') .to(ch, .3, {left: '0%'}, 'left'); }); $('a.return').on('click', function() { var tl = new TimelineMax(); var ch = $(this).closest('ul'); var pa = $('.panel > ul > li > a'); tl .to(pa, .3, {left: '0%'}, 'right') .to(ch, .3, {left: '100%'}, 'right'); });

Hi there, I'm new to the forums, let me know if this is the wrong place for this topic. Anyway, I have a navigation menu with a few links, each link has children links. I'm animating the left position of the parent wrapper and the children wrapper. It works fine the first time, but as soon as the timeline has completed I can't redo the same animation... I want to be able to toggle between the two states. Here is my js var tl = new TimelineMax(); $('.panel > ul > li > a').on('click', function() { var pa = $('.panel > ul > li > a'); var ch = $(this).siblings('ul'); tl .to(pa, .3, {left: '-100%'}, 'left') .to(ch, .3, {left: '0%'}, 'left'); }); $('a.return').on('click', function() { var ch = $(this).closest('ul'); var pa = $('.panel > ul > li > a'); tl .to(pa, .3, {left: '0%'}, 'right') .to(ch, .3, {left: '100%'}, 'right'); }); Any help is appreciated.