Demorus

Would love to have done that, problem is the code and css is so huge. Is there any general way to remove all the inline styles on the div like $('div *').removeAttr('style'); and then replay the timelime after the styles have been removed?

I have two timelines that have two versions set up differently depending on the screensize using $(window).width(). The issue is that it gets messy so I need to reset all tweens and make them start again. Somehow my following code doesnt work. Any idea why? $(window).resize(function(){ sed.invalidate();sed.restart(); part.invalidate();part.restart(); }); this seems to be closer to what im looking for but it doest remove some of the old values: $(window).resize(function(){ sed.reverse();sed.reverse(); part.play(); });

Ok weird, it seems the codepen one which I have from the CDN is older. Im using the current one from this year. Are there any settings in the current TweenMax that cause this blurryness? I think yes but I cant figure out what is causing it. There must be some new feature added that causes this.

I have a simple transform that seems to be crisp on codepen but not on my website using chrome which im testing offline. To be sure I stripped away every other script and css so that I have the same as in my codepen but the text and div still gets blurred, no matter what I do. Codepen probably runs some script or css to prevent the blurryness. What could this be? Got the same Tweenmax version.

I have the following code which is the segmet that containers the coordinates of the bezier in a tween: /*p1*/{ xPercent: 0, yPercent: 0 }, { xPercent: 200, yPercent: 0 }, { xPercent: 200, yPercent: 200 }, /*p2*/{ xPercent: 200, yPercent: 400 }, { xPercent: 0, yPercent: 400 }, /*p3*/{ xPercent: -200, yPercent: 400 }, { xPercent: -200, yPercent: 200 }, /*p4*/{ xPercent: -200, yPercent: 0 }, { xPercent: 0, yPercent: 0 }], There are so many X and Y coordinates that im not sure what they do. The first X an Y I figured out but the rest... I keep doing random movements. Any way to learn this quickly as an absolute starter in bezier curves like me?

How come your version works? I see the difference but I dont understand the logic and the "set" part. Thanks alot for the solution, I will know how to do it next time.

Here is my codepen http://codepen.io/anon/pen/NPLwRp What I am trying is to make my idea of a simple accordeon work with my existing markup. Animating from height 0 to 100% or auto does not work unless I find the hight of the content by creating a variable named: var findHeight = $(this).find("span").height() and use it as a hight value instead. To my surprise it doesnt work either. I would appreciate some insight on what im doing wrong here, why greensock isnt animating my height. HTML Code <div class="expandables"> <div><p>Click to show content</p> <span>Content to be shown. Content to be shown. Content to be shown. Content to be shown. Content to be shown. Content to be shown. Content to be shown.</span> </div> </div> CSS Code .expandable { width: 80%;padding:5%;overflow:visible; font-size: 115%;margin:auto} .expandable span { height:0; color:#fff;font-size:95%; padding: 0px 0px 0px 3%; overflow:hidden; display:block} Jquery + Greensock Code $('.expandable div').click(function() { var clicks = $(this).data('clicks'); var show = $(this).find("span") if (clicks) { TweenMax.to(show, 0.5, {height:"0", ease:Power2.easeOut}) } else { TweenMax.to(show, 1.5, {height:"100%", ease:Power2.easeOut}) } $(this).data("clicks", !clicks); });

So I have this TweenMax.to(window, 3, {scrollTo:{y:600}, ease:Power2.easeOut}); On click the window scrolls up to the position I want but, the issue is that upon resizing the window or when a user has a different screen and clicks again it scrolls to the wrong position. Is there a way to make it responsive so the Y:600 becomes something like YPercent or im not entirely sure how to explain. Or is it possible to use the top edge of a div as a reference point with greensock?

For some reason it works the first time but the second item clicked staggers away with the rest while the first item clicked remains visible. It is pretty weird my javascript code: var children = $('.icons').children(); var icons = new TimelineLite({paused:true}); children.click(function(event) { var siblings = $(this).siblings() span = $(this).find("span").first() content = $(this).find("div") h1 = content.find("h2") li = content.find("li") clicks = $(this).data('clicks'); icons.staggerTo(siblings, 1.3, {left:"-150%", ease:Back.easeIn}, 0.1) if (clicks) { TweenMax.to(span, 1, {opacity:0, ease:Power2.easeInOut}) TweenMax.to(content, 1, {display:"none", delay:1.5, ease:Power2.easeInOut}) TweenMax.to(h1, 1, {opacity:0, ease:Power2.easeInOut}) TweenMax.to(li, 1, {opacity:0, ease:Power2.easeInOut}) setTimeout(function(){ icons.reverse(); }, 500); } else { TweenMax.to(span, 1, {opacity:0, delay:1.5, ease:Power2.easeInOut}) TweenMax.to(content, 0, {display:"block", delay:1.5, ease:Power2.easeInOut}) TweenMax.to(h1, 1, {opacity:1, delay:1.5, ease:Power2.easeInOut}) TweenMax.to(li, 1, {opacity:1, delay:1.5, ease:Power2.easeInOut}) TweenMax.to(this, 1, {width:"46%", top:"2em", left:"-2%", delay:1.5, ease:Power2.easeInOut}) icons.play() } $(this).data("clicks", !clicks); });

I created a jsfiddle so you can see how Owl Slider works. I tried a staggerto so that the items in section 2 bounce in when the corresponding tab is clicked. The issue only seems to exist with the owl-item class which im targeting. Why wouldnt it work? Is there anything special about that specific class?

I can change the timing and delay to 0 or 0.1 but I just cant get rid of the delay when doing a mouseenter function with jquery. So inside the mouseenter I have tweenmax and there I have a standard tween like TweenLite.to(element, 1, {background:"red"}); Any idea what this delay is when hovering? Is it because my animation is within the function?

One technical question. I have more than 3 .ss classes. How exactly do I make it so that only the selected .ss class of this timeline is animated? var t= new TimelineMax({paused:true}); t.to('.ss', 4, {rotation: 360, ease:Bounce.easeOut}) t.reverse(); $('.ss').click(function() {; t.reversed() ? t.play() : t.reverse(); }); I would appreciate some insight. I know that "each()" does the job but how exactly to implement it in this context?

No problem. The people here are really helpful and nice. Diaco is a greensock magician by the way

Maybe for bigger compatibility try drawing two svg shapes and set those as a background. You can then make it responsive by setting background-size:cover or use percentage.

I say we should do it. I just saw the results, 99% of votes actually are for the default setting of force3D: auto. If this significantly increases speed then why not? It would also throw aside some misconceptions about velocity being faster. Velocity is trying to apply makeup to some old dinosaur (Jquery). Just give everyone the final blow and apply the new standard setting. It is time to end the era of jquery plugins : )