Leaderboard

Try to use the timeline's onReverseComplete event. onReverseComplete on the stagger* callbacks will be fired on every subsequent tweens (for every box).

You had a logic issue. Your original code animated the changeColors object to the very same values, so nothing happened: var colors = {top:"#feaf70", bottom:"#feaf70"}, changeColors = { color0: '#a2e0f8', color1: '#0faeec' }; tl.to(changeColors, 0.3, { colorProps: { color0: changeColors.color0, // #a2e0f8 color1: changeColors.color1 // #0faeec }, ease: Power1.easeOut, onUpdate: applyProps }) tl.to(changeColors, 0.3, { colorProps: { color0: colors.top, // #feaf70 color1: colors.bottom // #feaf70 }, ease: Linear.easeNone, onUpdate: applyProps, delay: -.3 }) Solution changeProps should hold the initial values Then you tween the changeColors to the values of originalColors Then you can then you can tween back to the initial values var colors = {top:"#feaf70", bottom:"#fc669e"}, changeColors = { color0: colors.top, color1: colors.bottom }; //.... tl.to(changeColors, 0.3, { colorProps: { color0: '#a2e0f8', color1: '#0faeec' }, ease: Power1.easeOut, onUpdate: applyProps, delay: -.3 }) //... tl.to(changeColors, 0.3, { colorProps: { color0: colors.top, color1: colors.bottom }, ease: Linear.easeNone, onUpdate: applyProps, delay: -.3 });

Hi @jkellner, As a supplement to the note from @RolandSoos. If you want to take a little break, use a delayedCall () Happy tweening ... Mikel

@namisuki, You should add -webkit-backface-visibility: hidden; when you use backface-visibility: hidden; in this example. This will fix rendering issues in Safari browsers.

Welcome to the forums, @RyRInfo! And thanks for being a Club GreenSock member. You can certainly create that effect using GSAP, although I probably wouldn't recommend doing it with background-image because that's limited to whole pixel values for position, so it can look rather jerky at slow speeds. It'd be much better to just use a regular image element or I guess you could use a <div> with background-image, but animate that whole element (and you can make the container <div> overflow:hidden). That way, you get the benefit of using transforms which tap into sub-pixel rendering. It's usually better for performance too. This thread might be useful: If you still need some help, please post a codepen demo that we can peek at. As for GreenSock effect tutorials, we have a learning section at https://greensock.com/learning but there isn't an article specifically talking about the Ken Burns effect. There are tons of GSAP tutorials scattered across the web, though, so Google is your friend Happy tweening!

I don't know what's supposed to be happening. Make a demo with 1 box that doesn't move, and start from there.

I just want to mention that if you're looking to create AMPHTML banners, TweenUI now supports exporting amp ads. So there's actually a way to use Greensock to build amp ads - since TweenUI itself is built on GSAP (but the amp banners do not have any GSAP in them).

If I understand your question correctly, no, sorry, there isn't a built-in way to do that. You could just find the closest value in your array and tween there.

Nice work! If you're not even a programmer, then my hat's off to you Happy tweening!

That's perfect! I started from this Codepen, which is where the two tweens came from. For my demo, I eliminated the decreasing progress of the second tween that's in the referenced pen, but I have made use of it in other work. As is probably obvious, I'm not really a programmer so my code may contain unnecessary pieces that I pick up along the way (or just nonsense values). Sigh. Anyway, thank you!

Thanks for the quick response. I figured it was a browser issue, but since I came across that related topic on this forum, I thought I'd check in here. Anyway, for anyone else that's interested, I used the update function to update the z-index to match the z position. While it won't recreate Safari's rendering, it at least fixes the stacking issue. Here's an updated Codepen: I have no idea if this is efficient or not, so if anyone has a better idea please share!

That's very cool, a tad over my head though at this point. Lol. And I cant't seem to find much documentation on it. I'll keep messing with it until I have it figured out. Thanks!

You're using a file from 2012. You can grab the latest files from a CDN like cdnjs. https://cdnjs.com/libraries/gsap

Yeah, Safari handles things radically differently than all other browsers in terms of rendering 3D transforms. You can angle things on the 3D axis and it'll chop things in half that overlap. Other browsers just rely on z-index for stacking order, plain and simple. So I think you'll need to resort to that. This isn't an issue related to GSAP - it's just how [most] browsers work. I wish I had a magic bullet for ya. Perhaps someone else has a different solution to offer.

Hm, I read this a few times and looked at your demo and everything is working exactly as I'd expect. I feel like I must be misunderstanding your point. x starts at 0, then you put a set() call 3 seconds into the timeline to make it jump to 100 but since immediateRender is true, it also renders that immediately (at the time your set() call is evaluated). But that doesn't change the fact that the actual tween/set is positioned at the 3-second spot. So later, when you jump back to a time of 0, that's BEFORE the 3-second spot, thus the set() reverts to 0 as it should. Am I missing something?

Hi @kosmo, Welcome to the GreenSock Forum. I'm not sure if I understood you correctly. So my interpretation. You need an open path, an open circle. The endpoints can be on top of each other. Here is the dry version without scroll action: For all friendship: Your code looks a little bit weird. Study the docs and build up piece by piece. Good luck and happy tweening ... Mikel

Hi, It did not let me go ... Now its more or less safe. Mikel

Hi @namisuki, I have integrated another motif and for a better overview in the code an array for the motifs: var images = [ "url('https://tympanus.net/Development/BookBlock/images/demo1/3.jpg')", // tiger images[0] "url('https://tympanus.net/Development/BookBlock/images/demo1/4.jpg')", // deer images[1] "url('https://tympanus.net/Development/BookBlock/images/demo1/1.jpg')", // elephant images[2] "url('https://tympanus.net/Development/BookBlock/images/demo1/2.jpg')", // elephant images[3] ]; Some hints: the first motif is defined in the css the 2nd motive under iClick === 1 ... initial = current next = next last = the previous one that disappears under the stack Add another motif: complete the array with the url an additional condition if ( ... adjust in the previous the next image adjust: if (iClick> 3) iClick = 0; // "3" = total number of images - 1 Delete a motif: delete the condition for this motif adjust in the previous the next image adjust: if (iClick> 3) iClick = 0; // "3" = total number of images - 1 Just a little trial and error ... Good luck Mikel