Leaderboard

Thanks for the demo. To answer the first question, the reason the staggerFromTo() animation on the text was happening too early was because you had the "complete" function in the place of the position parameter. bad: complete is in the wrong place so the position gets set to an absolute time of 0 tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, complete); good: using the position parameter of "+=0" means add this 0 seconds after the previous animation has ended. You normally don't need position of "+=0" because its the default value, hower since you are using the onCompleteAll parameter, you need to put something in for the position tl.staggerFrom(chars, .42, {opacity: 1, scale:.01, y:0, rotationY:360, ease:Back.easeOut}, .04, "+=0", complete); I added a background color to the menu so that its easier to see what is happening

When you load an svg like that you can't access the internal paths and shapes of the SVG. If you want to keep your markup clean you will have to inject the SVG data into your document. Please see solutions offered here:

Just to add a little more to @Carl's excellent advice and information: //You have this on line 8 menuLinks = $('#menuLinks') // then you're using it for your each() loop on line 32 menuLinks.each(function(index, element){ However, that is a class, not an ID so you need to change your variable to menuLinks = $('.menuLinks') If you make that switch, you'll be able to target those links in your animation. The other issue is you are setting some hover colors in your CSS, but your timeline tweens are trying to animate color. That won't work correctly. I'd recommend removing the hover color in the CSS and letting GSAP take care of that for you. If you want the strike-though to animate, you'll have to add an element to each of those <li> tags. It could be a pseudo element or an absolutely positioned div and animate its width on hover. Here's a fork of your pen with some changes. I added a simple opacity to the hover timeline so you can see that it is working. You'll have to decide what to do about the hover colors. I also commented out line 32 as I had no idea what it should be animating. It's targeting child menuLinks of the menuLinks, but there are none so I wasn't sure why it was there. Hopefully that helps. Happy tweening.

Welcome to the forum. There are numerous threads about parallax available. You can use the forum search feature to find quite a few. Here are some to get you started. Happy tweening.

Sorry, I really don't know what your site is supposed to look like or what it is supposed to do. I looked at the homepage and didn't see any errors. We really have to keep our support focused on the GSAP API. Kind of tough to trouble-shoot why a live site isn't loading properly.

I think you're looking for the ThrowProps plugin. https://greensock.com/throwpropsplugin Docs: https://greensock.com/docs/Plugins/ThrowPropsPlugin It's a Club GreenSock member perk. More info: https://greensock.com/club Happy tweening.

Hey fellow GreenSockers, A quick tip for animating SVG text by character. Have you ever wanted to animate the individual characters of some SVG text? SplitText is a fantastic plugin but doesn’t work with SVG text nodes. You can wrap your individual letters in <tspan> elements, but that doesn’t give you a whole lot of control or options. However, you can break a string into individual characters, add them to individual text nodes and line them up in the SVG so they look like a complete word. You can now control the animation for each character and you have almost every animatable property available to you. It’s certainly not as good as SplitText but can work well when you need it. Happy tweening.

Thanks Blake for great tip. You have right. I investigated only performace but no data. I will tell it to my colleague. It is a pity I did workshop to my team about this some time before.

Your SVG is almost 4,000 lines of code with 10,000 DOM nodes. A lot of it doesn't even look important, like all these empty path coordinates. <path fill="#C9D0D2" d="M637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9 C637.1,397.9,637.1,397.9,637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9C637.1,398,637.1,398,637.1,397.9c0,0.1,0,0.1,0,0.1 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0 c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0 c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0-0.1,0 c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c-0.5-0.3-0.8-0.7-0.8-1.1l0.6,7.5c0,0.8,0.4,0.8,1,1 c0.6,0.2,1.3,0.2,1.9,0.1c0.7-0.1,1.1-0.2,1.1-1L637.1,397.9C637.1,397.9,637.1,397.9,637.1,397.9z"></path> You might want to run your SVG through an optimizer, like SVGO. https://jakearchibald.github.io/svgomg/

Maybe with canvas. PixiJS is a good choice, and it supports bitmap fonts. http://pixijs.io/examples/#/demos/text-demo.js A star explosion... But that could be better. I'd break the text up into little shards to create an effect kind of like this.

Remember this? All your images start off scaled from a different origin, so your transform origin is throwing everything off.

Are you sure waiting for the page to completely load is a good idea? It looks like you have a bunch of images, and on a slow network the user might be staring at a blank screen for a while. Anyways, here's a pattern I sometimes use. I hide stuff until the DOM is ready by putting an "unresolved" attribute on elements to prevent FOUC. The unresolved name is arbitrary, so you can use whatever name you want. <html> <head> <style> [unresolved] { display: none; } </style> </head> <body unresolved> ... </body> </html> From there I check the readyState of the document to determine when to initialize the app. Notice the difference between the "DOMContentLoaded" and "load" events. I'm usually only interested in when the DOM is interactive, so I don't worry about all the images being loaded. https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load if (document.readyState === "interactive" || document.readyState === "complete") { resolve(); } else { window.addEventListener("DOMContentLoaded", resolve); } // Initialize your app function resolve() { document.body.removeAttribute("unresolved"); TweenMax.from("#content", 1, { opacity: 0, y: 50 }); }

Welcome to the forums, @lucrampro. GSAP is a full-fledged, robust animation library that can animate pretty much any property of any object. It's not a canned solution that creates a specific effect like the one you referenced, but it can certainly do things like that. Unfortunately we don't have the time/resources to study the effects in a whole live site and provide tutorials for recreating them, but if you have a specific GSAP-related question we'd be happy to help. If you're just getting started with GSAP, I'd recommend https://greensock.com/get-started-js/ and of course the docs would help too. And https://greensock.com/learning/ Happy tweening!

@GreenSock Thank you very much for your fast reaction! Version 2.0.1 is now working as expected

Alright, folks, please update to version 2.0.1 (just published) and you should see the issues resolved It had to do with some older build systems not liking a line of ES6 code in TweenLite (yes, a single line). And the order of import thing required a tweak to the UMD version of TweenMax. My apologies for any headaches this caused. A special thanks to @bitmonkey for the detailed explanation as to how to reproduce the issue! Please let me know if that resolves things for everyone. I'm pretty sure it will.

It looks like the Chrome (in responsive mode) is automatically firing a "pointercancel" event even though Draggable does everything in its power to avoid that. It's basically ignoring the preventDefault() call, and acting like you want to touch-scroll the content. Definitely seems like a browser bug to me. The only way I could find to resolve your demo is to simply add the following rule to the CSS: .item { touch-action: none; } Again, I'm pretty confident this isn't a Draggable bug. But at least there appears to be a relatively easy fix you can apply to your CSS. Does that help?

I have a staggered effect with GSAP with a random rotationX property. The 'groups' render randomly with the random property each time I reload the page--but I am trying to get each piece to render randomly with different degrees of the rotationX property in the same animation. So, in effect each 'group' would be starting from a completely different randomX position, and they would all be flipping from different positions relative to each other.... How is this possible ?

Yeah, you could add dummy tween at any any specific time you want import com.greensock.*; import com.greensock.easing.*; var tl = new TimelineLite(); tl.to(mc, 1, {x:100}) trace(tl.duration()); // 1 //add a dummy set() at a time of 10 that does nothing to nothing (basically a tween with no duration, target or vars) tl.set({}, {}, 10); trace(tl.duration()); //10 or to add the set() 4 seconds after the last tween in the timeline ends (relative position) use tl.set({}, {}, "+=4") //