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 : )

I am having trouble getting my timeline animation to pause and resume with my conditional statements. The script below is in a seperate script tag if ( $(".ball").hasClass( "active" ) ) { textAnimation.pause(); } else { textAnimation.resume(); } Why is this happening? there are no errors and the animation name is written as it should. I also read the documentation and I am using pause() and resume() correctly.

No problem. I can see this library changing the future of the web so I want to support it. I will certainly PM you once I registered my new domain and purchased BusinessGreen I think those who do take the source code and cant afford a 50-150 dollar for your membership are not succesful to begin with. Professionals who earn enough money are also willing to buy memberships. That is my opinion, I might be wrong though. At the other side if those people steal it for certain tutorials and demos it is "free" advertising as long as they dont use it commercialy.

Im keep on telling people to start using GSAP, it is simply future oriented and in many cases better than pure css3 solutions. They simply never heared of the Greensock JS library. When I link to your page everyone cant believe their eyes, as if it was magic! Funny thing is, the code is really small and different modules and extras in seperate javascript files. Jquery should have done that too, instead of putting everything in 1 huge file. People can always join them at a later stage if needed.

Indeed, very nice examples. Compared to the jquery firefly this is far more faster and effective. May I ask, why are nearly all designers still using jquery animate or other animation methods instead of Greensock?

Hi, yes it does. Can you give me advice how I protect your files from theft? If I use them on my project then everyone can see the source code and link to the greensock plugins: Should I minimize and then obfuscate your files to prevent such things from happening?

Here is how the animation looks like: http://www.jongaulin.com/articles/firefly/ Is something like this possible without having to create tens of divs manually? The idea behind firefly is to create particles that randomly fly around the site. Some of the top designers use firefly for their site but I thought if something like this was possible with GSAP then it would improve performance since firefly uses images.

Thanks alot for the infos! This clears up some things. I still need to get used to the way GSAP works. Sometimes even when reading the docs I get stuck at things and really dont know any further. Its mostly always the small things that block me. I thought it could not select list items so I made box divs and changed the code abit to target them.

Fixed by doing the following: line1.staggerTo(".box", 1, {width:'10%}, 0.5);

var line1 = new TimelineMax({paused:true}); line1.to('.menu-button', 4, {left:'0%', top:'0%', rotation: 360, ease:Bounce.easeOut}) .to('.menu-button', 1, {top:'25%', repeat:1, yoyo:true}, 0.5) .to('.menu-button', 1, {width:'100%', background:'#fff', opacity:'0.9'}, 4) .to('.fa-bars', 1, {color:'#000'}, 4) .to('.fa-bars', 1, { rotation: 360, ease:Linear.easeOut}, 0) .to('.background', 1, { scale: 2.2}, 2) .staggerTo($('nav ul li'), 0.3, {css:{width:'10%'}}, 6); line1.reverse(); $('.menu-button').click(function() {; line1.reversed() ? line1.play() : line1.reverse(); }); As you can see this is the code that you are familiar with that im testing out. Now where im simply having trouble are combinations. I added a .staggerto for my list items. I expected that each list work fades in at a time interval of 0.3 seconds after a delay of 6 seconds. Removing staggerTo makes everything work but I would like to test out a stagger within a timeline animation like the above. Am I missing something? I did exactly what the docs were saying

I found a few codepens with textsplit.js but noticed that I got redirected when I used it, noticing that it requires a membership. Those plugins seem to establish a connection with an external source. If I purchase a membership for lets say 1 year, what happens after that time has passed? Will my plugins be deactivated? Do my plugins still work if Greensock is down for some reason or are they dependent on some server?