Leaderboard

@Bigtreat Lets slow down a little bit, if you are just getting started with GSAP you will have to spend some time experimenting with small simple animations that will build a strong foundation for you to understand what is happening. To be honest with you it is still not clear what you are trying to do. So I am just going to fix your demo. First demo by removing most of unnecessary properties that aren't animating in any way. Also in your both from and to tweens you are passing fourth parameters, but both methods only take 3 parameters. This demo shows how you can use labels to seek certain position in animation. Further simplifying same demo, here is the second demo that shows you can simply set repeat: -1 to repeat animation infinitely and set yoyo property to true so animation goes back and forth instead of jumping. This demo shows how you can seek progress to jump to end of animation. Now it is going to be too hard to explain every tiny bit of what and why. So it is expected from you to reduce your questions to as specific problem as you can. I will suggest you to start with the Get Started with GSAP page. On that page you will also find links to some video tutorials that explain all the basic stuff and some advanced features of GSAP. Start with as little code as possible and only add something to your code if your expected behavior isn't happening it keeps your project and demos simple. Also, we rarely miss any posts so you don't have to message me twice saying you are going to post in forum and then message saying you have posted in the forum. Hope this makes things simple for you and us.

Thanks for the demo! Looks nice and its super helpful. When you use the "transparent" keyword in GSAP it actually animates to rgba(255, 255, 255, 0) which is kind of like invisible white. below is a demo comparing animating to transparent vs rgba using your color and alpha 0.

I do not know what you are insinuating, sir.

On another note, you'd probably get a lot more love around here if you don't start your post with GSAP sucks. It most certainly does not. And there are most definitely many ways to stop, pause, reset and control your animations.

I'm not around a Safari browser right now, so I can't tell. Canvas usually displays the same in every browser. Try changing the version number from the dropdown at the very bottom and see if that works. And what about here? And what about the filters here? http://pixijs.io/pixi-filters/tools/demo/

It goes gray because the body background is white. The blue is fading out and the white is starting to show. It's starting to mix with the underlying color. If the body was red, the blue fade would appear purple as it changes to transparent. Happy tweening.

NIce one, Dipscom. Really takes me back to my roots.

First of all, welcome to the forums and thanks for the kind words! It's super difficult to troubleshoot blind, so it'd be awesome if you could provide a reduced test case in codepen (or even a link to a real site if that's all you can do). I wonder: What version of GSAP are you using? Where are you declaring this.menuAnimation? Why are you using addPause() like that in the timelines? I wonder if you're running into a problem with zero-duration tweens having immediateRender:true by default. Have you tried either using set() instead of to() for those, or set immediateRender:false? For more info about immediateRender, see https://greensock.com/immediateRender Happy tweening!

I'm not sure I understood your goal, but it sounds like you just need to set the trigger to be the outer-box, like this: Is that what you were looking for?

Hi and welcome to the GreenSock forums, Thanks for the demo. I'm having a hard time understanding what you need help with or how this is supposed to work. When I scrolled I saw things move away and then the owl appeared. Nothing happened when I clicked on a column. Perhaps you could simplify the demo even more down to just a single item you need help with. I saw that this post has gotten a lot of views but no responses so I'm guessing others could use some more help in understanding how to help you.

I just tested in Safari and it all seems fine to me.

There's significantly less overhead when using canvas, and most canvas operations are hardware accelerated. Canvas was made for animations. HTML is for content. And for even better performance, check out PixiJS.

Here's a small demo of how to start/stop animations on focus. The sphere on the right has a bit more advanced implementation.

Thank you Sahil. You always save me! Cheers!

Hi @determin1st. I'm generally not a big fan of className tweens, but there's nothing "wrong" with them. It's just that when you're more surgical by defining exactly which properties you want to animate, it's more efficient (and I'm a performance nut). Do you have a codepen demo of the problem you're having? That'd sure help a lot. Just the simplest form of it, even if it's one div and one tween. And yes, under the hood, GSAP typically converts things to RGB or RGBA to do the tweening, but it is possible to use HSL/HSLA instead if you prefer (though that typically involves animating a string and applying it dynamically in an onUpdate). Once I see your demo, I'll be in a much better position to offer advice.

No problem. Happy to help. Isn't it nice when there's a solution that involves less than half the code you had previously? Happy tweening/dragging

Yep that is it! I managed to glance over the trigger info in the docs. Simple and clean, thank you!

Hmmm runs pretty smooth on my imac, maybe it's been fixed since yesterday? Note if any part of the lag that's being experienced is suspected to be due to color filters being applied at runtime or whatever you could simply take those images and apply the effect directly to the images in photoshop then the browser doesn't have to do calculations for their appearance.

Staggering left and right sounds like you'd want to cycle the x position. Here's a quick example. Hopefully that helps. Happy tweening.

In your particular case you could also just call fadeuptl.seek(fadeuptl.duration()) before .kill() so that the animation is moved to the end immediately. I don't know what you're trying to achieve, but another solution could potentially be to toggle a class on the element you're animating, and have !important CSS rules in that class that will take priority over the styles set by GSAP. (Not sure if this is good practice, though.) As a side note, saying a product sucks on that product's support forum, as your very first message, might not be the best way to get help with a particular problem – good thing the GSAP community is extraordinarily nice...

Is this along the lines of what you were after I modified your original post. It demonstrates basically how to set up the css and I modified a few of the animation properties so it slides visible items to the left. This is hardcoded to absolute sizes in px. If you want to place it here there or everywhere in a WordPress site then you would have to probably work out percentage based sizing for things to have it work wherever you want to place it.

@OSUblake Im not ripping against using an onUpdate, I still use it myself and it is very useful. But I've seen recently in the past 2 years or so when interpolating CSS Filters, that Chrome sometimes isnt rendering CSS Filters correctly when it is an onUpdate. Either only doing a partial render or no render at all for either start or ending state. Sometimes the issue being the initial default start values that are not defined in the CSS or via set() method. I've seen that it does work correctly with a fromTo(), since your basically telling GSAP the start and end values to pass to the browser. So onUpdate is still useful, but it is subject to the syntax used in the onUpdate, especially when tweening CSS Filter values. This is also due to CSS syntax changing constantly which has forced me throughout the years to constantly change my CSS syntax used in onUpdate, due to the CSS spec changes. But now I have had to opt for just allowing GSAP to tween the values like any other CSS properties due to the wider browser support of CSS Filters now supported. You know what I mean?

Browser support aside, manually applying a filter is still useful because you can animate each filter independently. var tl = new TimelineMax({ onUpdate: applyFilter }) .to(filter, 1, { hueRotate: 360, repeat: 3 }, 0) .to(filter, 3, { blur: 5 }, 0)

Hello @latushko.igor and Welcome to the GreenSock forum! When I tested your codepen in latest Chrome I do indeed see the -1px offset flicker artifact you are posting about. Previously we had to use the onUpdate way, due to the lack of browser support of CSS Filters. But since the browser devs are constantly updating their browsers every month, support has increased for CSS Filters. When I apply the effect using a fromTo() tween, without the older way of doing this with an onUpdate, then I no longer see this flicker in Chrome. TweenMax.fromTo(".box", 1, { webkitFilter: 'grayscale(100%) blur(5px)', filter: 'grayscale(100%) blur(5px)' },{ webkitFilter: 'grayscale(0%) blur(0px)', filter: 'grayscale(0%) blur(0px)', immediateRender:false, repeat: -1, yoyo: true }); Try this with the fromTo() tween and see how that works: Also i opt to leave the webkitFilter property included, so older versions of webkit, as well as various webkit and safari on mobile are supported, since I am OCD when it comes to browser compatibility. Happy Tweening! Resources: https://greensock.com/docs/TweenMax/static.fromTo()

It's because I set the blur to a small value instead of going all the way down to 0. There are several bugs about jumping when the blur radius is small. https://bugs.chromium.org/p/chromium/issues/detail?id=796963 https://bugs.chromium.org/p/chromium/issues/detail?id=795528 https://bugs.chromium.org/p/chromium/issues/detail?id=806291 Applying a blur is a very costly operation, but you won't see your CPU spike because it's done on the GPU. This article shows a performant way of animating a blur. It crossfades between several copies that have different blur values. https://developers.google.com/web/updates/2017/10/animated-blur

@OSUblake I don't see artifacts either but just some strange jump and flickering while animating on chrome but your demo works smooth on Firefox and Chrome.

Not sure I see any artifacts, but GSAP can't do anything about them because it doesn't do the rendering. You would have to file a bug with Chrome if there is one. That said, applying the filter to the image would look better. And there is going to be a jump when using the blur filter. Maybe don't set it all the way to 0. And I wouldn't worry about setting the webkitFilter. If the browser needs that prefix, its old, and animating a filter will probably be slow.

You can try it https://jsfiddle.net/Gardemarin/y1fbqqew/ Here I use Modifiers plugin.

Also remember that if you're trying to animate CSS-related properties of DOM elements, you need to load CSSPlugin along with TweenLite. The reason it works when you use TweenMax is because TweenMax actually has CSSPlugin inside of it. Literally.

Here's what that code you've written is doing in a 'graphical' form: // timeline creation var tl = new TimelineLite(); 0 // A tl.from(element1, 3, {top:'-428px', ease: Expo.easeOut}); // appends to the end of the timeline i.e. at 0 A-----------------------------| 0---------1---------2---------3 // B tl.from(element2, 0.4, {'font-size':'0', ease: Back.easeOut}, '-=1.5'); // appends -1.5 seconds from end of the timeline // note: timeline duration is still 3 A-----------------------------| B---| 0---------1---------2---------3 // C tl.from(element3, 0.4, {width:'0', height:'0', margin:'0', ease: Back.easeOut}, '-=0.2'); // appends -0.2 seconds from the end of the timeline A-----------------------------| B---| C---| 0---------1---------2---------3-- This is just how the API for GSAP works, so there's not really any 'fix' for this; it's just something you have to get used to. However, here's a few alternatives: // using absolute positions tl.from(element1, 3, {top:'-428px'}); tl.from(element2, 0.4, {'font-size':'0'}, 1.5); tl.from(element3, 0.4, {width:'0', height:'0', margin:'0'}, 1.7); // if you need relative positions to be offset from the last tween added, // rather than the end of the timeline, maybe try something like this? // ...messy, but it does the job if you don't want like the way GSAP API // does it tl.from(element1, 3, {top:'-428px'}); var insertpos = tl.duration(); tl.from(element2, 0.4, {'font-size':'0'}, (insertpos -= 1.5)); insertpos += 0.4; // add duration of last tween tl.from(element3, 0.4, {width:'0', height:'0', margin:'0'}, (insertpos -= 0.2)); insertpos += 0.4; // add duration of last tween Also, check out all the different ways .add() can be used, perhaps staggers could be useful to you?