PointC

Hi @lisartur I'm not sure if you meant preventing additional clicks during the active tween or you wanted it to count each click and continue? If it's the former, I'd add an isTweening() check like this: More info: https://greensock.com/docs/TweenMax/static.isTweening() If it's the latter, I'd probably just increment/decrement a rotation variable and feed that into the tween. That way if you click 10 times, you'd end up at -900 degrees. Maybe something like this: Hopefully that helps. Happy tweening.

Hi @nmarketti You can, but I'd then ask why do you want to do that? I've seen some CodePen demos creating this effect, but they seem a bit over-complicated for the end result. DrawSVG does it with one line of code and SVG scales perfectly with window resizes. I would think SVG would be the easier choice, but that's just my two cents worth. Others may drop by with different thoughts or an easy solution. Happy tweening.

Hi @DevSaver, It's hard to troubleshoot with just an image. Could you put that into a demo for us? It doesn't have to be your actual project assets. Just enough to demonstrate the issue would be great. If you could do that, I'm confident we can point you in the right direction. Thanks and happy tweening.

Are there T-Shirts? Follow up question: where do we get these gold badges that Shaun has now? My Moderator Badge is still green. Is there a Gold Level and does that lead to a Platinum Level?

I'm glad to see Blake and Jonathan still love each other and all is right in the world again. Each time you guys mentioned FLIP, all I could think of was this scene from The IT Crowd.

Happy to help. That's the GreenSock experience. Let us know if you have additional GSAP questions. Happy tweening.

Hi @Rager Welcome to the forum. That's coming from the ease you have set on the tweens. TweenMax.to(logoRightLines, 0.8, { ease: Power0, // this doesn't need to be here or would need to be Power0.easeNone height: 190, }), The default ease should be TweenLite too: // switch this TweenMax.defaultEase = Linear.easeNone; // to this TweenLite.defaultEase = Linear.easeNone; You're setting a default Linear ease so you don't need that ease in there anyway. Take that out and it will work just fine for you. Here's a fork of your pen. Happy tweening and welcome aboard.

Hi @pcdavis I'm not a React user so I can't be of any help in that department, but I can answer your morph group question. The MorphSVG plugin works path to path so you can't just add a group to the tween, but it's fairly easy to accomplish with a loop. The trick is just making sure you artwork is in the right sequence to loop through and perform the morph. Here's a basic example: In my example, I've added a number to each path name. By doing that, I find it easier to see if I've made any mistakes, but it's not necessary. If your start and end paths are in the same sequence in their respective groups, it should be as easy as selecting the elements and creating morphs based on the index of the loop. In your case, you have a little extra work to do with the eyebrows. They aren't present on the happy face so you'd have to create a scale or drawSVG tween for them when you morph the mouth and eyes from happy to sad. Hopefully that helps. Happy tweening.

If it were me, I'd probably name that infinite tween so you can easily control it later. Then add it to the main timeline. Maybe something like this. You could also put that infinite animation in a function and call it after any of the tweens on the main timeline. As with all things GreenSock, there are many roads to the goal. Hopefully that helps. Happy tweening.

Hi @JordanM Welcome to the forum. That little jump seems to come from the scroller container being set to 100vh, but the body currently has the default margins. If you set body margins and padding to 0, I think you'll see a smoother start. More concise tweens? You don't need to use the add() method. You can write it like this: rocketTween.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}); You're using the same ease for all tweens so you could also set a new default Then you don't have to add it to each tween on the timeline. TweenLite.defaultEase = Linear.easeNone; I didn't see your click function in your demo, but you wouldn't need all the if/else statements. One easy approach would be adding a data attribute to each of those buttons and feed that into your page scroll function. Here's a basic example I made as an answer to another forum question, but it should give you a starting point. Hopefully that helps. Happy tweening.

If someone is using IE, this is how you respond.

The Oracle of CSS is dropping knowledge.

Hi @TomWWD You can add an infinitely repeating tween to a timeline and the next tween will go after the infinite tween finishes its first iteration. You do have to be using TweenMax 1.20.0 or later. Your demo is currently using 1.18.2 which is over 2 years old. More info here: If you need to control that particular infinite tween separately from the main timeline, you could also create a tween or timeline for that repeating animation too. It would make it easier to control. Hopefully that helps. Happy tweening.

Second time this week I've been 'GreenShocked' by @GreenSock. Just FYI - I have stolen your SVG creation function.

I'd second @Sahil's recommendation to join Club GreenSock. With what you're doing, those bonus plugins will save you a bunch of time and your membership will pay for itself quickly. You'll also save on aspirin as you'll have fewer headaches dealing with browser inconsistencies. More info here: https://greensock.com/club Happy tweening.

Sorry, you've lost me now. I'm not sure you'd need multiple dashed circles and masks unless I've completely misunderstood the desired outcome here. Do you happen to have a demo we could take a look at? Thanks.

The issue with my CodePen demo is my CodePen demo? Is that like when we type 'Google' into Google and rip a hole in the space-time continuum?

I love SVG clip-paths or masks for this type of work. Pretty much the same thing I did in this demo except the text is linked to the timeline progress. Hopefully that helps or at least gives you some ideas. Happy tweening.

I just thought I'd better give you a hard time about your profile pic since you were giving @Shaun Gorneau a hard time about naming his demos.

Nice work @Sahil I was just starting on something similar when I saw you post your solution. I think animating the d attribute string is a better approach in this case. I think morph might be a bit tricky. I haven't tried it, but I have a feeling it wouldn't be quite as smooth. Well done! PS Why don't you have your picture on your CodePen profile? How can I be sure it's really you?

Yep - your demo seems fine in Edge now. I threw a rotation:0.1 onto my demo and that seemed to solve things too. Weirdly, everything works correctly in IE11 without any extra fixes so I assumed Edge would be okay, but that's what I get for assuming. Edge is really starting to get fussy.

@GreenSock - somebody's getting fancy today. Nice! I've been 'GreenShocked' I was just about to tag you into this thread. After I posted my demo, I looked at it in Edge 41 and I'm seeing some weirdness. Your demo is doing the same funkiness as mine. The line sometimes draws a bit, other times not. If you resize the window, it then suddenly appears. Maybe this is a CodePen/Edge issue, but thought I'd mention it and see if you can confirm? I'm using Edge 41.16299.248.0.

I'm not sure I follow. Do you mean the white rectangle in my demo? If so, that can be removed (or change the color) and the mask will still be fine. The white stroke in the mask is just what will be revealed, but it doesn't have to be over white. Is that what you meant?

Hi @DevSaver For a dashed line and DrawSVG, you'll need to use a mask. I wrote about that here: Using variable shouldn't be any problem. You could do something like this: You may also want to take a look at our big 'circle start point' thread. Hopefully that helps. Happy tweening.

Hi @mbower Welcome to the GreenSock forum. Looks like you're getting some elements stuck with rapid hovering. If it were me, I'd create a timeline for each element and play/reverse on hover. That way nothing can get stuck in the 'back' position. Something like this: You'll also see that I added a .trigger class around each of your rotating containers. I did that because each of the rotating containers was the trigger and if you moved the mouse during the rotation, it would sometimes no longer be over the element and trigger the reverse. By adding a trigger div that isn't part of the actual rotation, the mouse is always over the target element throughout the rotation even if you move it a bit. I don't know if that's what you'll want to do in your final project, but it's just an idea. Hopefully that helps. Happy tweening.