Leaderboard

Dude.. you could've just used CSS vars like I showed you. ? Here's a piece of your puzzle. GSAP works with objects. An element's style is an object. Therefore, GSAP can animate the style. var tl = TweenMax.fromTo(box.style, 2, { transform: "translateY(50vh) translateY(50%)" }, { transform: "translateY(-50vh) translateY(-50%)" } ); I think people overthink responsive design, especially when it comes to animations. It's no secret that using x/y is better than left/top, but some people don't care because they want to use relative units like %. They are so focused on how an animation behaves during a screen resize, that they are willing to look past that. NEWS FLASH: That only makes your animation responsive in size. Animations have a time component, and speed = distance / time, so an animation will move much slower on a phone than it does on a desktop. Guess what? People don't resize their screens to test out the responsiveness of a site. If a person resizes their screen, it's usually because they need to adjust how the content is being displayed. Don't take my word for it. Start tracking resize events and the window size. If there's a problem with your layout, you'll see it in the percentage of users that resize their screen.

Green is the top level tier @Sahil, not diamond... And then, inside the Green spectrum, you have other levels... Light Green, Pale Green, Vivid Green, Deep Green... Up to the Level of Green Sock - This one, is unattainable. One can only hope to achieve the mark of Sock Green.

okay, I was finally able to see the issue. You have to work pretty hard to make it happen and it doesn't happen consistently. @GreenSock - what's happening is the glasses on the three logos that animate their y position should move over the head, but they're outside the SVG so overflow is set to visible. If you scroll to the top after the animation, refresh and then scroll down again, the glasses are clipped. It does not happen every time though. My guess is something is not ready on refresh, but checking a live site with all that code is difficult. I can't imagine it has anything to do with GSAP. @DevSaver you may want to just change the size of your SVG so the glasses are within the bounds and you don't have to worry about overflow. Just my two cents worth. Happy tweening.

@PointC never disappoints!

Hi @twentytwo-jase Welcome to the forum. I see that behavior in a few browsers. You may have some loose bolts in your SVG. What you're seeing there is some browsers incorrectly rotating groups of groups. You'll find that using svgOrigin is far better than transformOrigin for rotations involving groups. So you'd write it like this: tlwheelie.to(frameanddaryl, 0.2, {css:{rotation: 2, svgOrigin:"270 340"}}) // you also don't need the CSS wrapper // you can write it like this tlwheelie.to(frameanddaryl, 0.2, {rotation: 2, svgOrigin:"270 340"}) I made the change for Daryl and the frame. I think it's okay now, but if you see other groups that look odd, you may have to use svgOrigin for those too. One other thing that was happening is you were creating all three wheelie timelines each time you clicked. If you click again during the wheelie, your positions starting getting messed up with tween overwrites so I'd recommend creating those timelines once outside of that function. You then play(0) them when you click. You could also add some logic to check if they are active and prevent additional clicks if true. That's entirely up to you. As I noted above, the CSS wrapper isn't necessary for the tweens. You can use it if you like, but it will save some typing if you skip it. You also don't need to set the svgOrigin on each tween. (unless you're changing it) You'll see in my fork, that I added the svgOrigin to the first tween of the daryl/frame rotation, but didn't add it for the other tweens. You can read more about svgOrigin here: https://greensock.com/gsap-1-16 Hopefully that helps. Happy tweening and welcome aboard.

Thank you @Carl. I will be purchasing it tomorrow. And I'm excited to be a club member

@anotheruser, did you have a look at the demo in other browsers? It should look identical. There's no way to achieve absolute, perfect smoothness when scaling text, without converting it into an image first (and even then, I think you'd have a similar result to what I did – using scale and will-change basically does convert the text to an image before the transform, which is why it looks blurry if you scale it up). If you do see significantly different results in Chrome and Firefox, maybe make sure the issue isn't with the version of Chrome you have installed?

Hello! Time for the "early morning shift crew" to chime in. This might look a pretty simple setup but there are a few tiny nuances that might make the logic a bit brittle here. Let's unpack the instructions for the browser. ------------------- Case 1: User: Click 1 - "Play" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, play. Timeline: "Ok, let's go", * Elements move to x:500 * WORKS ------------------- ------------------- Case 2: User: Click 1 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, reverse. Timeline: "Ok, let's go", "hum... I'm aready at the start. No need to go anywhere". DOESN'T WORK ------------------- The solution to case two would be to tell the timeline to go to its end before reversing it. tl.progress(1).reverse(); But that alone brings other problems. ------------------- Case 3: User: Click 1 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, go to your end and then reverse. Timeline: "Ok, let's go", * Elements jump to x:500 *. * Elements move to x:0 * WORKS ------------------- ------------------- Case 4: User: Click 1 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, go to your end and then reverse. Timeline: "Ok, let's go", * Elements jump to x:500 *. * Elements move to x:0 * User: Click 2 - "Play" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, play. Timeline: "Ok, let's go", * Elements move to x:500 * WORKS ------------------- ------------------- Case 5: User: Click 1 - "Play" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, play. Timeline: "Ok, let's go", * Elements move to x:500 * User: Click 2 - "Play reverse" - GSAP, create a Timeline that moves the elements to x:500. - Timeline, go to your end and then reverse. Timeline: "Ok, let's go", * Elements are at x:500 *. * Elements don't go anywhere * DOESN'T WORK ------------------- And I could go on, and on, and on... With the many little variations on which order you click the buttons. They will break in several places. There are ways to get around that but it boils down to how much flexibility you want/need. The best way is to do what @PointC has suggested and have initialization separated from the control of the timeline. You can just initialize everything at the booting of your page/application and after that, only trigger the play/reverse. Another way is to set the start and end position of said animation with .fromTo() if you know where the tweens will always start and end.

Chrome has admitted there are rendering bugs that affect situations like this - it has nothing to do with GSAP. You can try setting force3D:false and add a slight rotation. That seemed to clear things up mostly (for me at least). @Acccent's demo seemed pretty smooth as well.

Hi and welcome to the GreenSock forums, That's an interesting challenge. Using the cycle property inside a stagger method should do the trick. so in your case I think you can do: var tl = new TimelineMax() tl.staggerTo(".fadetext", 1, { cycle:{ color:function(){ console.log(this.dataset.fadeto); return this.dataset.fadeto; } } }, 0.5) you can read more about cycle and staggers in the docs: https://greensock.com/docs/TimelineMax/staggerTo() In the future, please consider providing a CodePen demo as it saves us some time and helps us see exactly what you are having trouble with. thanks!

TweenMax.fromTo() returns the actual tween so when you method-chain an eventCallback to a to() tween it gets applied to the tween: https://greensock.d.pr/foC62L TimelineMax.to() is a method that inserts a tween into a timeline and returns the timeline. Adding the eventCallback as you are in your scenario to applies the eventCallback to the timeline because it is what the previous .to() returned. https://greensock.d.pr/6ccz0y Similarly if you chain a duration() to the end of a timeline it will affect the timeline not the last tween. var tl = new TimelineMax() .to(".someStuff", 1, ...) .to(".moreStuff", 4 ...).duration(8) the tl will will have a duration of 8, not the last tween It seems to me that you should use an onUpdate callback in the vars of the tween. var tl = new TimlineMax() .to(".someStuff", 1, ...) .to(".moreStuff"...) .to({}, 1, frame: 10, roundProps: "frame", onUpdate:yourFunction }) In these cases it is usually best to provide a demo so that we can have a better sense of what you need to do and experiment with options.

I found a demo that did something similar. The basic idea is that you use a global variable to reference whatever the current or active animation is. Whenever you click on something you check to see if there is a currentAnimation, and if so, you reverse it

onUpdate happens right AFTER the tweening values get updated.

Great question, @danedington. Here's an excerpt from the FAQ section of https://greensock.com/licensing: So basically a "Business Green" license is required, but we don't really care which one of you gets it (you or your client). If you get the license, it covers an unlimited number of your sites/products/apps/games as long as it's active. If your client wants to start editing your work (code), they'd need to get their own license. Fair enough? If you choose the annual license, yes, you'd just need to keep that active as long as there are fees being collected from multiple customers for your site/app/product/game (including microtransactions). This is what allows us to continue support and development of the tools which is a GOOD thing for folks like you who depend on the tools. It's why GreenSock hasn't suffered the fate of most other libraries that become obsolete or stagnant within a year or two. To understand the "why" behind our license, I'd encourage you to read https://greensock.com/why-license/ Let us know if you have any other questions or concerns. Hopefully you'll find that the license pays for itself literally in a matter of days or weeks and then ultimately makes you more profitable.

Very difficult to troubleshoot blind but it sounds like maybe your environment isn't set up to recognize globals or maybe you're not importing things properly? If you're still having trouble, please provide more details about the environment and [ideally] give us a reduced test case that we can run on our end to see the errors.

HI @JustinBinAz Welcome to the forum and thank you for joining Club GreenSock. I assume you're talking about an actual SVG text element and not converting that to a path? You can't do that with DrawSVG since it's not a path, but you might be able to make it work by animating the stroke-dashoffset. I would not recommend this for production though. My advice would be to convert your text to paths in your vector software and you'll be good to go with DrawSVG. The above technique gets really weird when you start changing the SVG size and font size. Hopefully that helps. Happy tweening and welcome aboard.

From what i see, this is happening in Chrome. Firefox has very slight non-noticeable shake, but still looks smooth. But Chrome seems to be shaking much more like a wobbly wave. But i think this is more of an issue with first setting up the elements and markup with all right transform supported CSS. I was able to stop the shaking in Chrome, but i had to remove your initial inline transform with subpixel values on your nested div tag, along with adding some other transform supported CSS properties. But was taking too long to debug.

hmmm... I'm still not seeing the problem. It all looks fine to me. Are you seeing this in all browsers? All machines? What OS? You could try setting the overflow with GSAP instead of your CSS. TweenMax.set(".logosAnimation", {overflow:"visible"}) If anyone else sees the issue please jump into the conversation.

@PointC legend! So helpful, thanks very much! I guess I wasn't a million miles away from getting it working - being a Greensock novice anyway.

Wow this was very helpful @dipscom! Thank you so much for that explanation.

@PointC Congrats, great achievement in short amount of time. Your work here must have helped thousands of users. BTW like YouTube does @GreenSock sends us Green/Silver/Golden and finally diamond commas?

Nice job getting things to work in your demo! There really isn't a clean way to reverse a timeline and make some of the tweens faster. You pretty much have to speed up or slow down the whole timeline. I changed your click code to make the timeline play twice as fast on reverse. I went for a more long-hand conditional statement so its all easier to read $('.card').click(function(){ if(this.animation.reversed()){ this.animation.play().timeScale(1); } else { this.animation.reverse().timeScale(2); } }) in case you are new to timeScale: https://greensock.com/docs/TimelineLite/timeScale

I tend to think that if you get it set up right the way GSAP handles transforms shouldn't present a problem. That's only a guess though, since I have no idea what the original bug is. If transforms are causing you difficulties though what about adjusting your css and positioning your object absolutely and animating top, left values instead of transforms. If they animated as percentage values they would be relative to the parent and responsive.

HI @Hugh Nivers Welcome to the forum. In addition to @Carl's excellent advice, I'll throw out a bit of info for you. There is some crossover between CSS properties and SVG attributes. These two lines will produce very different results in your SVG: TweenLite.to("#logo", 1, { x:600 }); TweenLite.to("#logo", 1, { attr:{x:600} }); If you're after those SVG attributes, you'd want to wrap them like above and use the attribute plugin (which is automatically included with TweenMax). You mentioned clicking the button to tween the wheel so I added that to my fork for you. Hopefully that gets you started. Happy tweening and welcome aboard.

When you create a timeline and tell it to reverse before its been played, it has no place to go. Your demo would have worked if you reversed from the end of the timeline like this: tl.reverse(0); But even that would have started getting messed up quickly with tween overwrites and everything would have been out of position. It's always better to create the timeline once and then control it in your functions and event handlers. Happy tweening.

Nice demo!!! I was working on a SVG module for PixiJS. Resolution independence!

Thank you for the response, that answers my question perfectly

Thanks for this detailed description. Makes a lot of sense; slightly ashamed that I didn't realize this myself. Totally forgot about the possibility to use onUpdate in the vars object. Prefer .eventCallback by far– But now I'm glad this way exists Hell, I love GSAP.

Can you be more specific? You got an error message when trying to upload a screen capture? What was the exact error message? And can you just post the image somewhere else and put a link here? I'm not seeing any issues in that URL (but again, I might be looking in the wrong spot).

You could do a variety of transitions, but canvas is probably the best option for displacement. SVG would probably struggle with that. I'd say just start doing some experiments to find something you like and be sure to check out the Pixi website I listed above. As you make progress and have GSAP related questions, we'd be happy to help. As far as the text and logo movements go, you can do those with simple position and scale animations using GSAP. Good luck with your project and happy tweening.

So I guess this means @Dipscom is alive and well? Welcome back. I thought perhaps you had written some amazing code, sold it to a mega-corp and retired to a tropical island somewhere.

I'm not seeing any issues, but maybe I'm looking at the wrong thing. @DevSaver can you post a screen capture and tell us exactly what OS and browser it's in?

This fixes it in Safari, but of course breaks it everywhere else. But I really don't know why Safari is treating it so differently. @PointC is the SVG master ... so maybe he'll know

Jack that works like a charm!! Thank you so much. I already had a tiny rotation on the mask tween to fix an IE/Edge bug... If only IE & Safari could use the same bug fixes that would make it easier!!

Hey GreenSockers, This is my 2,000th post so I wanted to take a minute to commemorate the occasion. It’s so much fun to hang out with all of you. As I’ve said before, this is truly a unique place on the web. The community is so friendly and smart and I learn a ton by reading through different approaches to problems and reverse engineering all the clever answers and demos. Thank you all for sharing your knowledge. A special thanks to @GreenSock and @Carl for putting up with me for 2,000 posts. Shout-out to all the other mods @Jonathan, @OSUblake, @Dipscom, @Sahil, @Rodrigo, @Shaun Gorneau, @Acccent, @Visual-Q, @mikel. You are a terrific group of people (and one A.I.) and I’m inspired by all of you. I hope my little SVG tips & tricks have helped some community members save some time and prevent a few headaches. I’m looking forward to continuing this never-ending journey of learning with the entire GreenSock community. Happy tweening. - Craig

I only used Vue in the pen to make it more of a habit. Ignore Vue in this case– what you were illustrating isn't what I'm going for I really just wanted to avoid the proxy-object- or css-var- or or or route The elements are already positioned absolutely (fixed to be more precise) – my experiences with tweening top/right/bottom/left haven't been too good. Maybe have a look at the actual feature I'm having issues with, the two laptops- and phonemockup; it's pretty complex: http://dumbo.design/airberlin (please don't open in Safari.. I'm currently having the weirdest bug ever in Safari, insanely glitched in every aspect... I mean.. literally glitched) I don't think that. I think it's awesome. And I understand that these things are necessary. I was just hoping that there is some kind of a "switch" that disables all this fancy cool stuff for this one Tween. Now I know what I'm asking is impossible and can move on responsiveness in general is still a topic you'll hear me whine about 8) If your thinking now: "Dude.. you could've just did either of all the solutions at hand and would've saved way more time than trying to dig for the 'cleanest' solution" – Besides that's just the way I'm wired, I really enjoy this digging; learning the little details, caveats, gotchas, hickups; figuring out what's going on under the hood; getting more puzzle pieces to see the whole picture– The more I truly understand, the more tools I have to solve trickier stuff.

This has nothing to do with GSAP - it's a rendering issue with Safari. GSAP is setting all the values properly, but Safari is ignoring the updates and basically not drawing the revised graphics to the screen. To force Safari to redraw things properly, you can change the transform of the affected (masked) elements. It's like Safari says "oh, okay, something significant changed about this thing, so let me rasterize it again and redraw the pixels". In this case, it's the <g> elements. Even if you literally change x (or y or rotation or whatever) by 0.01, it'll trigger it. Here's a fork: Does that help?

Short answer: sure, just animate a string on a proxy object and plug that in manually via an onUpdate to element.style.transform (basically exactly what @Visual-Q suggested). This will only work if the starting/ending strings have exactly the same quantity of numbers in the same spots. Long answer: no, this isn't feasible on the "real" transform. To illustrate why, it'd probably help most to just give you an example: How would you interpolate halfway between "rotate(45deg) translate(50vw, 20vh) scale(2)" and "translate(25px, 80px)"? And remember, the browser always reports the current (computed) transform state as a matrix() or matrix3d() which are px-based. So a to() tween must grab the current value, thus how would you interpolate between these two values?: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" and "rotate(30deg) translate(50vw, 20vh)"? What's exactly 20% between those two states? See the problem? Furthermore, even in your example with animating between two strings that match perfectly (only the numbers are different in the start/end values), what would GSAP report as _gsTransform.x, _gsTransform.y, etc. during the tween? What happens if you need a separate tween that starts halfway into that one, but affects "rotation" or "scale"? Hmmmm. Things get VERY complex quickly. You may think it's silly that GSAP doesn't just slap the string onto the transform but there's a ton that goes into the proper management of transforms that most people never even realize, especially because GSAP makes it "just work". The only thing that's not super-simple right now is the vw/vh stuff, but %-based things are handled by xPercent/yPercent special properties but maybe you could tap into CSS variables for that. Remember, GSAP can even animate CSS variables. https://greensock.com/css-variables

That seems odd. I'm not seeing that in any browser. I just tested in FF, Chrome and Edge and overflow stayed visible for me after refresh.

Oh, feel free to use a png. I didn't mean to imply that you shouldn't. I just used a Pixi graphic because I didn't have a little white circle .png available. I've used textures from primitive graphics and .pngs in my Pixi work. Both seem fine, but I don't get too deep into the weeds about what's better. I usually just use my eyes, watch the GPU percentage and FPS meter. If that all seems okay, I just go with it. Happy tweening.

Thanks for the demo. That helps a lot. Everything is working. You're just starting with a green .png. If you want to tint and get the actual color, it's best to start with a white particle. In this case you're just using a circle so there's no need for a .png as Pixi can draw a circle for you. Here's a fork of your pen with everything working. Happy tweening.

As I mentioned, troubleshooting is extremely difficult without a demo. My advice would be to get a simple version of your project working on CodePen. You just said it doesn't work, but didn't say why. Once you have something we can see and edit, you'll get better answers. Here's another particle container with scale and alpha working correctly. You can fork this and add your own assets if you need additional assistance. Thanks.

Hi and welcome to the GreenSock forums, Thanks for the demo. The problem is that svg elements do not honor css positioning like top and left. You can however animate the transform value, which in this case would be "x"

Hi @Gumbo This sounds a lot like this thread: I think that info should get you started. Happy tweening.

Awesome Codepen , I was waiting like whats next whats next , way to go , You were helping everyone when they need you , thanks , keep going !

It's not too confusing as long as rotation is not involved. It uses skew and scale. SVG and canvas could be a little different because the transform origin might be part of the matrix. matrix(a, b, c, d, tx, ty); But yeah, it looks like a possible bug. GSAP doesn't seem to handle translate as a percentage correctly. Compare it to setting the transform with jQuery. Definitely something @GreenSock should look at to confirm.

Hi @radutrs Welcome to the forum. That's a pretty neat website. They have quite a bit going on there and most of it is happening on canvas. From what I can tell, they are are using GSAP and three.js for most of the heavy lifting. three.js is what creates the displacement on the pictures. They've also got some Vray reflection maps in there to really make it shine. The effect that you asked about isn't too difficult. You could make it work with canvas or SVG. You might be able to do it with regular DOM elements too. I made a little demo to show one way you could do it. I've used a SVG. However you design it, the basic mechanics will be the same. You'll probably have two images and a mask. The full color image will be hidden until the end. A mask will reveal the line art version of the picture and its size can be increased by holding down the mouse button. I just made a timeline for the mask expansion animation and play/reverse it on mousedown/mouseup. Once that timeline hits 100%, the onComplete fires which fades in the full color version of the image. Here's some more info about three.js. https://threejs.org/ You can also take a look at Pixi for a canvas option. http://www.pixijs.com/ Pixi has an impressive variety of filters that can create some neat effects http://pixijs.io/pixi-filters/tools/demo/ Hopefully that gets you started. Happy tweening and welcome aboard.

Way to go @PointC!!

Love the demo, Craig! Your animations are not just a visual thrill but they tell wonderful stories as well. Congrats on your huge accomplishment.

Hi Sahil, just wanted to say thanks. This really helped me out!