PointC

CustomBounce is a perk of Club GreenSock membership (which I highly recommend): https://greensock.com/club You can always give it a try on CodePen: Happy tweening and bouncing.

onReverseStart() is pretty thoroughly discussed in these threads. Happy tweening.

hmmm... sorry to hear that you're getting frustrated. I can certainly understand how projects can get overwhelming. It's perhaps a good idea to take a step back and just get certain pieces and concepts working. I'll get to that in second. I took a quick look at your new version and the thing that jumped out immediately are the timelines on lines 62 and 118. You have those reversed and they shouldn't be set that way. Sometimes you want to reverse a timeline when you create it, but not in this case. You do have a complex project here. By that I don't mean the animations are too complicated, but there are many things the user could do. Someone could try to close the menu while it's animating into view. You can click a main link while the social links are animating. The menu could be closed without selecting a link. Those are just a few of the many possible scenarios. You're also targeting the same elements in different timelines so you have to decide how to reset them should they need to be targeted by a different timeline. All this is certainly doable. You just have to figure out the logic to control all possible outcomes. I find putting pen to paper and drawing a little flowchart of user interaction can help. Okay, now looking at this in small bites, I'd start with the concept of not allowing (or allowing) user interaction while pieces are animating. Take a look at this simple demo: Try clicking the menu button while the animation is playing. You'll see you can click as often as you like and the menu animation will just keep reversing each time you click. Now look at this version. Try the same thing. You'll see that the timeline will not reverse while it's playing. I've used the isActive() method to prevent anything from happening. You could also set a toggle variable to prevent clicks/hovers at certain times/events. It doesn't really matter how you check things, but this is an important concept in a project like yours as you have many moving pieces and multiple user click/hover scenarios. Can animations/timelines be interrupted? My recommendation to get you on track for this project would be to comment out all the SplitText animations and logic for now. Just focus on bringing the menu into view and listening for a click on the social/main links. Ask yourself, will you allow a click or hover before everything has animated into view? What happens if a user closes the menu without selecting a link? Once you get that set, you can start turning on the SplitText animations and controlling the click logic with a toggle or the isActive() method. I think you can get there if you just take a step back and look at it piece by piece. You're not really starting over. You're just turning off certain things while you make logic decisions. Make sense? Happy tweening.

I'm never absolutely certain about the 'Why?' of browser behavior. ? It's just been my experience that you'll encounter far fewer problems with SVG masks and clip-paths if you wrap them in a group and apply the clip/mask to the <g>. Even if I have one element to mask/clip, I always group it. Happy tweening.

I certainly did not know that. Sweet tip Blake.

Hi @biuro Welcome to the forum. Please try wrapping your clipped text in a <g> tag and clipping the group. <g clip-path="url(#masktext)"> <text id="svgTextFilter" class="svgText" x="15" y="55" textLength="150" lengthAdjust="spacingAndGlyphs" >GreenSock</text> </g> Hopefully that helps. Happy tweening.

Hi @codekai98 Welcome to the forum. The subject of this thread is quite similar to what you're asking and uses the demo you referenced too. I think it can help you. Happy tweening.

You can have anything you like follow the path as it draws. Here's an example: Is that what you meant? Happy tweeing.

This should get you started. Happy tweening.

To get the timeline to play(), you need to add an event listener to your new text menu button. By setting the height of the nav to auto instead of 100% you can hide it up top. (You could also use 450px in this case.) You could add the new text button to the nav and it would go along for the ride. Or you could add a tween that moves that new button 450px at the same time as the main nav. Adding a tween to the exit animation will take that menu button back to the top. Keep in mind though that you're setting the autoAlpha of everything to 0 in your exitAnim so if a user closes the menu without clicking a link, the menu will not work correctly the second time they click the menu button because everything is hidden. You'll have to decide what to do about that. You could move the menu back up to y:-450 at the end of the exit timeline and set the autoAlpha back to 1. Or you could use fromTo() tweens. Or you could set the autoAlpha at the beginning of the entry timeline. You'll also have to tween your new button when someone clicks a link. Hopefully that helps. Happy tweening.

Be careful @cgorton. This is how it starts. You post a few questions. You help a few other members. You start spending more time on the forum. Before you know it, you're suffering from GreenSock Fever. The only known cure is a promotion to Moderator, but then you spend even more time here. ?

Whew! I was starting to get concerned about @OSUblake. I thought the word 'canvas' in the thread title made Blake appear instantly and this one has been up for over 24 hours. Great stuff Blake.

I think I've fought most every SVG mask battle imaginable and I can probably help, but that is a massive amount of code to sort through. As @Carl mentioned, a stripped down version with one masked group would help us troubleshoot. You may also want to take a look at my post about Adobe Illustrator exports here: It will make things much easier for you. Happy tweening.

Hi @cgorton After chatting with you via Twitter it's good to see you posting in the forum. I tweeted that book at you 10 days ago and you still haven't ordered it? @Sahil gave you some good info there. He's a master of the canvas. Via Twitter I recall Jack mentioning Pixi.js to you too. If that's of interest to you, here's a quick example of creating some rectangles with Pixi and pushing them into an array. You can then stagger all the properties you like. Pixi is fairly easy to use and GreenSock has a terrific Pixi plugin: https://greensock.com/?product-plugin=js-pixiplugin Lots of cool stuff happening with Pixi right now with the release of version 5. http://www.pixijs.com/ Hopefully that gives you some ideas. Happy tweening.

Have you tried setting autoRotate:-45 instead of autoRotate:true? If you could provide a demo, that would get you the best answers. More info: Happy tweening.

A couple I'd recommend: Advanced Game Design Foundation Game Design Happy tweening.

An edge case for sure, but that's pretty neat Jack. ?

You should be able to click the little 'Export' button at the bottom right of the pen and that will give you most everything you need for local experiments. You'll just need to link to the CDN for TweenMax, but everything else should work fine. Happy tweening.

I'm not quite sure I follow, but is this what you need it to do? Please be sure to load the necessary scripts in your demos. (Yours was missing jQuery and TweenMax.) Thanks.

Chrome shall henceforth be known as Chromernet Explorer 6.

That extra space is the 70px offset. TweenLite.to(window, 1, {scrollTo:{y:"#section3", offsetY:70}}); Happy tweening.

Hi @Jchrist Welcome to the forum. The plugin is working correctly. There just isn't enough window real estate after section three to scroll the window that far at certain heights/widths. You can't manually do it nor can the plugin. You'd want to place some elements after it or set a specific size. Here's a fork where I've just set an arbitrary size for the body. You'll see that it work correctly at any window size. Hopefully that helps. Happy tweening.

Pretty sweet Jack. I just dropped it into a couple test pens and it works perfectly in FF. ?

Was this it?

ahhh... that's right. This has come up before and I forgot all about it. Nice one @Sahil.