Leaderboard

It's a bit more complicated than that... (And the 9999 alone shouldn't work) First I'd say, read both links @OSUblake has posted, they are crucial. Then, read the docs about perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://css-tricks.com/almanac/properties/p/perspective/ The key gotcha is the fact that setting 'perspective' in CSS (in this case GSAP) creates a new stacking-context on the element but visually affects the children. You have a perspective set on the 'td' element of your table, that creates a stacking context on each 'td' element that is independent from each sibling. All children of those 'td' are contained within each context and can't possibly raise higher than it's parent's siblings. Think of each sibling stacking-context as a mini universe in its own, independent and unaware of others. As it pains me to say, it is expected behaviour. I am not sure what is the end result that you are after but, in order to have the blue box on top of all the other green boxes and have some perspective distortion, you need to plan where your stacking context is going to be. Here's a fork of your pen with a hack to make it work. ps (opinion piece): It really is silly to be putting z-indexs on the thousands.... If your stacking context is wrong, it won't make a difference if you have z-index:1 or z-index:3,000,000 - If anything, it's a lot easier to keep track of the z-index if you are in the single digits. If you need more than 10 levels within one context, you might want to re-think your strategy.

Here you go.

Hi @magyarn, e.g. Jonathan unlocks the secret here: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Happy tweening ... Mikel

Hi @RedUndies GSAP doesn't have a developer environment, but you can use it inside pretty much any environment that can run JavaScript, like Adobe Animate. I use several different products from Microsoft and JetBrains. The one I use the most is Visual Studio IDE, but I can't recommend that for most people as it can take some time to learn. What I can highly recommend is Visual Studio Code (VS Code). It's smart, lightweight, and much easier to get started with. And I have no way to verify this, but it seems to be the most popular code editor among front-end/web developers. It also has a ton of really useful extensions, which you can check out here. https://marketplace.visualstudio.com/vscode WebStorm / PhpStorm is another great IDE, but it's not free. And to tie everything together, I would recommend installing some type of live-reloading development server, like BrowserSync. This will allow you to load up your project on multiple devices, and it will automatically refresh/reload the page whenever you make changes to a file, just like on CodePen.

Try setting the z-index to 9999. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

Hi @huwllewellyn You wouldn't be banging on your head on the wall had you looked at the pinned SVG Gotchas! thread. Everything you need to know about getBBox is right here, including a helper function that does exactly what you want. Give me a minute, and I'll show you how to use it in your demo.

Here's how to make a really simple camera. Just move the world in the opposite direction your target is moving. To keep the target centered in the view, the path should be at least 1/2 a screen away from the edge of the world. I didn't do that in this demo, and you'll notice when the bee gets close to the edge of world because it has to move away from the center of the screen.

Hello again, and a late happy new year. mi_cky

Hi @krs, Welcome to the forums! It seems to me you want the ability to toggle tweens. Have a look at this thread here, it should give you the guidance you need: Happy Tweening!

Hi @ArmYourselves Check out this thread.

Fetch is good, but it's asynchronous. The document.write method is solid as it will continue to load your scripts and other stuff in your html in the correct order. You could also do that to fallback to another CDN. Have you tried jsDelivr? I think it's much better than cdnjs. https://www.jsdelivr.com

Yeah, sorry about that - I put that 1000-second limit on GSDevTools to avoid situations where crazy long (like infinite) timelines couldn't really be controlled intuitively (imagine dragging 5 pixels and that making the timeline shoot ahead by thousands of seconds). I didn't really think folks would intentionally go beyond 1000. You should be able to simply set a "maxDuration" vars property to override that if you'd like, like GSDevTools.create({..., maxDuration:5000}); Does that help?

Nice work, mi_cky. Cool way of illustrating the illusion. There are no corners For more info, Keith Peters tweeted about this recently

Hi Plenge / NetBooster, If you want an endless loop, the circle is a good solution. Otherwise could it be this option: ... and you can wave the checkered flag. Mikel

Hi guys, I love using AnimateCC in conjunction with Greensock but the only thing that has always been sort of a headache has been how to animate alpha gradient masks. After some trial and errors creating and animating the mask, here is the file I wanted to share with the community, hopefully it will benefit somebody. One important piece of information that the Adobe Support team shared as well was:"Please avoid adding scripts within the mask and maskee symbols or multiple level of nesting within them because they need to be cached as bitmap for masking to work." AlphaGradientMask_radial.fla.zip

What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. ? AdjustmentFilter ? CRTFilter ? GlitchFilter ? ReflectionFilter ? KawaseBlurFilter ? RadialBlurFilter ? MotionBlurFilter ? OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.

Can you describe what is it that you are trying to achieve and why is it that you need to apply perspective on a bunch of TD's? We kinda have fun banging our heads against a wall of other people's problems.

Okay, the solution is to use getBBox() instead of getBoundingClientRect() It returns the coordinate space for the svg https://stackoverflow.com/questions/30158656/positioning-svg-elements-via-getboundingclientrect-in-variable-width-div

Figured it out! I have to use autoAlpha instead of opacity. Can anyone tell me why though? What exactly is the difference between the two? const rippleTl = new TimelineMax({repeat:-1}); TweenMax.set(".ripple", {autoAlpha:0}); rippleTl .fromTo("#centerCircle", 1, {scale:5, transformOrigin: origin}, {scale: 0, transformOrigin: origin, ease: Circ.easeOut}) .staggerTo(".ripple", 1.5, {scale: 5, autoAlpha: .8, transformOrigin: origin}, .4, "-=.3") .staggerTo(".ripple", 1, {opacity: 0, transformOrigin: origin}, .6, "-=1.5");

Thanks for the reduced version Mikel. I think the issue has to do with how you are changing the transformOrigin while a bezier tween is running or some sort of overwrite. I will look into this more this evening for sure.

That is quite impressive, thank you Blake! Path2D makes a lot of sense and is something I was originally looking for when I began this project, thank you for referring me to that. Making the entire animation responsive (As screen size changes) was giving me something of a headache. Your approach makes a lot more sense, I've learnt a lot from this thread. Thank you for all your help, I look forward to seeing your demo later on responsiveness and flying the particles in (Still scratching my head at that). I hope there are more tutorials and resources in the future regarding GSAP + Canvas. GSAP is a really great tool for animation, before I discovered GSAP I didn't really get too much into complex animation sequences, I'm happy to say that has changed now

Hi @Plenge, Welcome to GreenSock Forum. Here just a quick and dirty what I think you want to execute (?) ... Happy tweening Mikel

Sorry @mrsam I wasn't clear on my point (too early in the day...). I did not mean to specifically use the YepNope library, but to sniff out a response to the call. You can make use of Promise and the Fetch api. Sorry I can't be more specific - I haven't had to sniff out CDN failures myself so, I'm talking on a totally theoretical platform.

Hey @Bartonsweb Nice job on expanding what I did. The thing that trips most people up on canvas is that they are expecting it to work like the DOM, but canvas is just a graphics API, providing with you a bunch of different drawing commands. So to animate canvas, all you need to do is create an object with properties that describe how you want to draw something. Once you have an object, animating it with GSAP works exactly like the DOM. However, there's an extra step involved as you have to render that object. That's what GSAP's ticker can be used for. If everything is going smoothly, it should call the callback at around 60fps. Here's a good article and video that explains the pros and cons of the DOM and canvas. https://www.kirupa.com/html5/dom_vs_canvas.htm That Kirupa site has a lot of good tutorials on canvas. https://www.kirupa.com/canvas/index.htm And so does MDN, although some of the stuff is outdated. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial And I'll make another version showing how to do the particles flying in later. Is a pentagon the only shape you're going to be using? I'll also show you how to make polygons that start at 12 o'clock instead of 3 o'clock. That's why the bottom of your polygons aren't completely horizontal.

@DD77 The below example is just quick and dirty but you will get the idea: This is how you can use hover (mouseenter and mouseleave) using a timeline instead of just a tween.

Hello @DD77 You could try and use a SVG displacement map (feTurbulence). Here is an example using it with GSAP Happy Tweening!

This is selecting everything in your document that matches. That's why all your slides have played. var workTitle = $(".title"); var workContent = $("p"); It's better to create your animations ahead of time for something like this. Using jQuery's .map() method is an easy way to create an array-like list of objects (timelines). When a slide loads, use the index to play that animation. When a slide leaves, use the next slide index to pause the animation in its starting state so it will play all the way from the beginning when loaded.