Leaderboard

Here's a super rough and quick version that I did. You could probably smooth out some of the paths in Illustrator a bit more even.

Oh my turn! my turn!! PS: Sorry couldn't resist

I don't mind if you use my waveSVG() function. Here's a forked version that starts with a flat tail so that the resulting curves look a bit more natural: I'm sure it could be tweaked to be more natural, but hopefully this gets you going in a the right direction.

As @PointC said, you need to use .call(). Parentheses after a function will execute it immediately. .add(insertContent(element)) Your function isn't returning anything, so that is essentially the same thing as this. .add(undefined) This will wait to call the function. .call(insertContent, [element])

My turn! I set it up to make it look like the wind is changing speed.

No. Graphics data is stored as an array of points. It does not keep track of the parameters you pass in. You can create an object with the properties of your shape, and animate that instead. The reason I'm animating the angle to 361 is because there will be a tiny gap at 360. It's either that, or draw a circle at the end. Also, graphics rendering can be slow, so it's best not to create a different graphics object for every shape you draw. If you look at the Pixi example, notice how they are using a single graphics object. https://pixijs.io/examples/#/demos/graphics-demo.js

That's something you wrote. Sounds like you get the concept. Some related topics. https://greensock.com/forums/topic/15270-animating-waves-with-gsap/ https://greensock.com/forums/topic/16371-svg-sine-wave-emulate-audio-equalizer/ https://greensock.com/forums/topic/16172-svg-wave-animation/

@OSUblake wow that's awesome! Funny, yesterday I didn't know how to approach this and less than a day later I have like four different approaches. Thanks, all!

You can change the speed by changing timeScale on reverse. But to do that your timeline should be constructed as single parent timeline, that can contain other timelines. Take a look at following article on how you can write better animation using functions, you are already doing it just need minor tweaks. https://css-tricks.com/writing-smarter-animation-code/

Reminds me of something I did several years ago, although I didn't use Beziers for the stems because I was going for a rougher look. If you're interested, here's a tutorial showing how to grow vines around a lattice. The site has been redesigned since I last saw it, and some of the demos appear to missing. Such a shame because the last demo was really cool. https://www.maissan.net/articles/simulating-vines

One relatively easy way would be to create a generic object with x/y properties (coordinates) and tween that along the bezier path, but pause that tween and just set its progress() value and see whatever the corresponding x/y values are on that generic object at that point. Here's an edited version of your codepen that shows you the concept, and I made the leaves wait to animate until the vine reaches the position accordingly: Does that help?

Hi @jsciumi The problem is your intro() timeline. In that one you're targeting the individual characters with a staggered color animation. So when you go to animate the color of the words (the parent div of those characters) it won't work correctly because you've set the color at a more specific level. One fix would be at the end of your intro() timeline you can use clearProps to get rid of that color on the characters. Hopefully that helps. Happy tweening.

Hello @frankallen and welcome to the GreenSock Forums! Are you seeing this in iOS Chrome or iOS Safari? Without an example like @Shaun Gorneau advised, it will be impossible to narrow down what is happening on a live site. It is hard to debug a live site without isolating just your GSAP code. Please create a reduced codepen demo example so we can test your code in a live editable environment to better help you. Thanks

?‍♂️ <-- me after seeing this... and now my back needs ice. You the man!

I'll just throw out another possible solution, since I do a lot of character stuff with GSAP and recently did something similar with a tail (unfortunately I can't share it since it's client work that hasn't launched). If it were me, I'd avoid all of the math and just create 4-5 (or more) slightly different tails in Illustrator (or whatever vector editor you're using) and use the MorphSVG plugin to make quick tweens between them in a loop. The "rubber hose" -ish illustration style that you're using on your character will work well with a handful of canned paths since it's not very detailed (in a good way).

I don't see any whitespace. I do see a scrollbar at the bottom. You might wanna check how you're positioning stuff. Tip of the day. 100vw is not the same as 100%

Sorry, I'm not seeing that in Chrome or any other browser. Maybe someone else can see it? In any event, it's not related to GSAP. I wish I could be of more help. Happy tweening.

This thread is full of good info about plotting along a Bezier curve. Maybe it can help. It's not exactly what you need since you don't want to animate the position, but this thread also had some neat Bezier curve ideas in it. Hopefully that helps a bit. Happy tweening.

You can make it work in Safari with @Sahil's trick if you set the SVG width/height to 100%. I'd also note that none of the above solutions will work in Edge. In general I'd recommend avoiding blurs unless they are absolutely necessary to the desired end result because they are so expensive. (and a pain to get working correctly) Happy tweening.

Yeah, like @PointC I don't notice anything obvious that's "wrong", but I wonder if you've got some overwriting/conflicting tweens somewhere. A quick way to test is to add: TweenLite.onOverwrite = function() { console.log("OVERWRITE!!"); }; A codepen demo would be SUPER helpful. No need to post your whole project - just a reduced test case with generic content (honors the NDA).

I'm not seeing anything that shouldn't work with restart(). Are you saying the whole timeline doesn't play on restart()? Or the timeline plays, but doesn't include the nested timeline returned from your makeWaves() function? Maybe you could put together a CodePen demo, but just use a few SVG lines, rectangles etc. instead of the actual client assets. Just enough to show the problem would be great.

Note: TimelineMax allows you to set a repeatDelay value too, in case that's helpful. new TimelineMax({repeat:-1, repeatDelay:3}); And if you must use TimelineLite, keep in mind that restart() accepts a parameter that'll honor any delay as well, so you could do: var tl = new TimelineLite({delay:3, onComplete:function() { tl.restart(true); }}); //and if you want the first iteration to start immediately, you could just do: tl.play(0); Happy tweening!

Hilarious, @Sahil! @OSUblake, nice solution! I think it looks more realistic (in terms of the flow direction) if you make this change: //OLD: count += wave.speed; //NEW: count -= wave.speed; ?

Brilliant @Sahil!!! That made my morning. ?

Tip of the day. Changing the background position triggers a paint. x and y don't.

For a grid you will most likely have to loop through each row and create a new SteppedEase tween and increment the y value OR just use a set() to put the background where you need it. Here is one we had laying around: and another from sesamechee

??? I was not expecting that!

Thank you so much for this @PointC, very much appreciated. Sorry for slow reply, was trying to nail this before going away but didn't quite get there. Sat down with a fresh head now and have got it sussed based on your awesome example though, so thank you again.

@GreenSock this is great! Pretty clever, I didn't think of handling it that way, but it makes total sense. Going to dive into it in the morning. Much thanks! -darin

Thanks, @PointC! Very helpful. I have a solution working currently using Jack's ChoppedEase from the second link you posted. I essentially created a separate timeline for the leaves. Then in my loop where I create each leaf element, I add a .01s tween to that timeline for each leaf along the same motion path used by the vine, with the ChoppedEase value randomized. That essentially works as a "set" method to place the leaves perfectly along the path at random intervals. Once I play with it a bit more and know it's all working, I'll add a new CodePen link to this thread in case it helps somebody in the future. -darin

You'll need to use call() instead of add(). https://greensock.com/docs/TimelineMax/call() Happy tweening.

Looked in Chrome, Safari, and Firefox here ... no white space ?

Thanks. You should be able to do something similar to that. Create an array of points, animate the points up and down, and then pass that array into that cardinal function on every update to get the path data for the tail. I can reduce that demo down later if you're still having trouble.

I'd certainly recommend what Jack has done in his answer, but another way to do it would be setting the SplitText divs to position:absolute and animating the left position. This isn't as versatile and animating x/y instead of left/top is usually preferable, but depending on your animation, this could work too. Happy tweening.

You could just figure out the offset between each character and your target spot and animate x/y accordingly. Here's an example where I have a #target <div> that serves as our target coordinates and I use getBoundingClientRect() to do the offset calculations: var split = new SplitText("#text", {type:"chars"}), chars = split.chars, targetBounds = document.querySelector("#target").getBoundingClientRect(), i, bounds; for (i = 0; i < chars.length; i++) { bounds = chars[i].getBoundingClientRect(); TweenMax.to(chars[i], 1, { x:(targetBounds.x - bounds.x) - bounds.width / 2, y:(targetBounds.y - bounds.y) - bounds.height / 2, delay:i * 0.1 }); } Of course you can set visibility:hidden on that #target and position it wherever you want, or use hard-coded coordinates. Does that help?

Hi @frankallen and welcome to GSAP! I haven't had too much to dive into it (I will in a little bit) ... but one thing we strongly suggest is isolating your issue into a CodePen. That helps in multiple ways; namely isolating the issue and recreating the issue with all other variables removed. I got one started for you here ... Hopefully I (or anyone) can help soon. Happy tweening!

Our company is in the digital signage business. We sell engaging motion graphics content to companies with large numbers of digital signs (airports, waiting rooms, banks, etc). We have a LOT of projects in the queue for the next few years and are looking for an experienced GreenSock animator (and web developer) to join our team in Minneapolis. Salary range is $60k - $90k + perks and benefits (but is negotiable depending on experience). Please read about the position here: https://www.screenfeed.com/careers/front-end-developer We are only looking for people who Have demonstrable GreenSock experience. Live in (or are planning to move to) Minneapolis, MN USA. Please don't apply if you're looking to work remotely. Have some web application development experience.

Hi Rodrigo, Thanks. That didn't work, but this did work: <g ref={(el) => { this.clipPathReveal = el; }} clipPath={`url(#${this.props.clipPathId})`}> Your suggestion showed me the way

That's neat. I must confess - I was not familiar with the .onOverwrite property before now. I guess I have to get out of the TweenMax section of the docs and visit TweenLite once in a while.

Two ways, 1. Add empty tween at the end of Timeline, timeline.to({}, delayTime, {}); 2. Use delayedCall inside onComplete function, var Tween = new TimelineLite({ onComplete: function() { TweenMax.delayedCall(delayTime, function(){ this.restart(); }); } });

Thanks both for the replies really useful.

This sorted it, thank you!

Hi @Forxs, of what does the function insertContent() comprise?

Yep, the permanent license covers an unlimited number of sites/apps/games/products that are created by you (the license owner). Absolutely! Our entire licensing model (which you or they can read about at http://greensock.com/why-license/) is based on the honor system and a simple number-of-developers pricing structure. We don’t require that you “register" each person or project, nor do we inject “phone home” scripts that report usage or suddenly cause things to stop working if your license expires. We extend respect to our users and trust that it'll be reciprocated. Thus far, it has worked well. We’ve been doing this for a decade now with no plans to stop. Let us know if there's anything else we can do to help. Good luck with the project!

Nice solution, @Sahil! Seems like we've gotta do double-backflips to get browsers to repaint properly. Too bad. UPDATE: it looks like @Sahil's solution doesn't work in Safari. Doh!

I noticed this in Chrome few days ago, solution I came up with was using filter on svg element. Then set svg opacity to 0.01 and set position to fixed so element will stay in viewport.

Posting because I found a solution that worked for me (and to also remind myself if I run into this in the future) In my case, I was given some banners developed by someone else and they were using embedded HTML SVG's which had DUPLICATE style PROPERTY within a few instances of <svg> tags. The solution was to merge the css styles into 1 property, see screenshots. That should make it work, I HIGHLY RECOMMEND that moving forward to run all banners through the GDC HTML5 Validator which would fire off an error if there are leftover problems. https://h5validator.appspot.com/ Best of luck!