Leaderboard

First part is to go away from center, after that you can swing from end to end. It gets really simple if you use TweenMax instead of TweenLite. With TweenMax you can set repeat to -1 which will keep repeating it to infinitely. And then set the yoyoEase to true so easing effect will be same while reversing. If you just want to use TweenLite, then you will need to call a function onComplete callback after first part. Then inside function define a tween that goes to end, and onComplete call itself. If you just want to use TweenLite then you will need to call a function after first part completes, pass 1 as parameter to it. After that inside function you need to define tween that swings end to end, now pass negative of the parameter so on next call pendulum will swing away. You also need to pass the scope, to define what is 'this' inside function. But to be honest you are just making your life hard by not using TweenMax, as you will not notice any significant performance hit when using TweenMax.

Not that I'm aware of. The best community are the forums actually. Normally everyone tries really hard to help users as fast as possible (as @Sahil just did) and we always do it with a friendly touch. Don't be afraid of asking GSAP related questions here, that's the whole reason for the forums. Also there are not stupid questions around here, this is definitely not StackOverflow where you'll get down-voted for your questions. So if you have questions, just post them here. Finally keep in mind that there are over 52,000 posts here, so do a detailed search, because there is a good chance that whatever you're struggling with, has been answered already, like you just did of course Happy Tweening!!

There is slack group of animators, we didn't create it but there is GSAP channel. Some of us are also member of that channel but we are not really that active there and we don't intend to provide support there. You can join using this link: https://damp-lake-50659.herokuapp.com/

If you look back at this thread on August 8, you’ll see that I told you about removing event listeners with jQuery’s off() method. I assumed you were using that and you mentioned something else would be happening to the menu after a click so I wasn’t concerned about the users ability to click again. Here’s another version of my demo with the off() method applied and changing the cursor back to default. Keep in mind that none of this removes the divs from the page. SplitText creates a collection of divs from the letters which are all children of the original element. If JavaScript is still confusing for you right now, it may be worth your time to go back and do some additional training and practice. At the very least, it may be advisable to dial back your expectations on this menu for now. I think I mentioned earlier in the thread that this is an ambitious project with multiple timelines, hovers and possible interactions to monitor. For now, maybe just have the menu slide into view and the letters blow apart on click. You could add all the hover animations and isActive() checks when you’re more comfortable with everything. Maybe you won’t even want all the hover animations since they’ll be problematic on touch devices. Just my two cents worth. YMMV Happy tweening

It seems SVG doesn't support offsetHeight. So you can instead using getBoundingClientRect to get height.

That's pretty advanced thing for beginner to do especially if you are not familiar with JavaScript or 3D transforms in CSS. I would encourage you to visit our learning page and start from there, https://greensock.com/learning There is also youtube channel intended to introduce all the features of GSAP: https://www.youtube.com/user/GreenSockLearning The more specific part you need for this particular project is understanding 3D transforms that you can learn at following page: https://greensock.com/docs/Plugins/CSSPlugin

I think by now you know this forum is an amazingly friendly place. We’re all trying to help you. Can you imagine any other online communities that would have let this thread go on for 4 pages and 80+ responses? I have been exactly where you are now. I had lofty goals and big JavaScript ambitions, but hadn’t put in the work. I had many false starts and a copy/paste mentality. I wrote a whole thread about my JavaScript journey in hopes that it would inspire others to do what I did. Make that decision to truly learn to code your own projects. I certainly don’t know everything, but I know so much more than I knew a few years ago and I can tell you from personal experience, the work is worth it. Once everything starts clicking for you, the coding frustration turns into fun and the possibilities are endless. I encourage you to follow the advice everyone has offered. Read the GSAP blog & docs and visit the learning area. Bookmark all the links @Jonathan has provided. Create your own simple demos. Reverse engineer the work of others. If you don’t possess the skills, knowledge and experience, you must admit that to yourself. I’d go so far as to say forget everything you know (or think you know) and start from scratch. Take the basic online JS and CSS classes and don’t move on to intermediate or advanced lessons until you completely understand every concept. All we can do is point you in a new direction and offer encouragement. The rest is up to you. Best of luck to you.

@Sahil Yes, you're right. The tweenLite approach is interesting and tweenMax is look much cleaner to work with. I intend to get it because for the moment I can not debug it in nwJs and vsCode, I need a license and i will get it when i will have time. thank you so much you are awesome and this will help me understand under the hood. ps: The only reason why i am still not have tweenMax is that greensock does not yet take paypal for transactions. My fund for the web are on paypal, but as soon as this possible, I will buy it.

It looked to me like your animationIndex variable was/is being incremented on click and then you use the modulus operator to see if it's odd or even. I assumed that was to set things to either visible or hidden. I was just saying that a variable with a value of either open or closed would negate the need for the animationIndex. I personally find it easier to check if a variable is open/closed, yes/no, true/false (or whatever you like) than to keep incrementing something on click and finding out if the click is odd or even. If you're using it for something else that I'm not understanding or just want to keep using it, feel free. That was just my two cents worth. In answer to your question about hiding the links, there are a few things to correct. First, I think you may be confusing how to call an onComplete function with the position parameter or the onCompleteAll in a stagger tween. The way you have that written won't call the finished function. You'd write it like this: for (let i = 0; i < letters.length; i++) { TweenMax.to(letters[i], random(1, 2), { x: random(-200, 200), y: random(-200, 200), scale: random(0.5, 2), opacity: 0, delay: random(0, 0.25), onComplete: finished }); } But that will still cause problems for two reasons. 1. The variable i will be undefined in the finished() function. To solve this, you could target this.target in the tween. 2. You're using a .to() tween to set the visibility, but you have no duration. To solve that, you'd use a set() tween. So you could write it like this. function finished () { TweenMax.set(this.target,{ visibility: "hidden" }); } The good news is none of that is even necessary. To hide the links after they fade out, you'd simply use autoAlpha instead of opacity. function flyAway() { TweenMax.to($(this), 1, { color: "#42a6e0", ease: Linear.easeNone }); letters = $(this) .siblings() .children(); for (let i = 0; i < letters.length; i++) { TweenMax.to(letters[i], random(1, 2), { x: random(-200, 200), y: random(-200, 200), scale: random(0.5, 2), autoAlpha: 0, delay: random(0, 0.25) }); } } autoAlpha is the same as opacity with one exception. Once the opacity hits 0, the visibility property is set to "hidden". https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha I've updated my pen to use autoAlpha. Happy tweening. PS When you're calling functions it's quite helpful to add a console.log() to the function to make sure it's working.

Sorry about the limited info, I've got it to work though thanks to you guys! In my case, it was Nuxt (SSR) related. if(process.browser) { CSSRulePlugin = require("gsap/CSSRulePlugin") } Thanks again!!

Hm, it sounds like you're doing this: //BAD: import { CSSRulePlugin } from "gsap"; //GOOD: import CSSRulePlugin from "gsap/CSSRulePlugin"; If I'm wrong, would you please post the EXACT import statement you're using? Or even better, a reduced test case that we could run? Also, what version of GSAP are you using? Hopefully the latest (2.0.2)

First of all, welcome to the forums (and GSAP), @madleo. I'm not quite sure what you mean by "CSSRulePlugin does not seem to be made available." Are you importing it like this?: import CSSRulePlugin from "gsap/CSSRulePlugin"; Or if you prefer, you could do this: import { CSSRulePlugin } from "gsap/all"; Does that help?

Problem here is that you are declaring tweens in both events with different delays, so lets say you click to make element visible and quickly clicked twice On first click, your element will start rendering after 0.1 second responding to 1st and 3rd click But after 0.9 seconds the tween with delay of 0.9 will start playing and disable rendering To avoid that you can call killTweensOf to kill tweens on sprite. But a better approach would be to disable rendering after your animation completes, Also if you want to use 0 duration tweens then you can instead use TweenLite.set method. Finally, if your animation just goes and back like that then you can define once and toggle it back and forth. Watch following video to know more about timelines and how you can take advantage of them to sequence your animations, there are more helpful videos on the channel.

Hello @DD77 I would suggest that you read and go over what @PointC, @Dipscom, and @Sahil advised in previous post replies in this topic. I noticed that they are having to repeat and answer the same questions over and over again. There is just not enough time in the day to help you build your entire project. Especially when most of the questions are not GSAP related, and it doesn't seem like you are reading their great advice. We love to help everybody but it seems to me that your not even reading all the great help they are providing you. Especially with all the time they have spent going above and beyond to help you with non related GSAP questions. Questions that are really more about javascript and CSS basics. It doesn't look like you are trying to take there advise to heart, or even appreciate all their hard work in helping you, on their free time. All I can do is hope that you will re-read this entire Topic from page 1. Please go over all the examples they provided, and visit the Mozilla Developer Network (MDN) to learn more about Javascript and CSS. MDN JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript MDN CSS: https://developer.mozilla.org/en-US/docs/Web/CSS This way we can focus more on the GSAP API and not keep repeating questions that have already been answered in previous pages and post replies in this topic by these great scholars and gentlemen. Thank you

An easy way to keep things random is to create a new animation when the current one finishes.

You could tween it back to the original color when you hover out or use clearProps. $("button").each(function() { $(this).hover( function() { TweenMax.to(this, 0, { backgroundColor: "red", ease: Power1.easeOut }); }, function() { TweenMax.to(this, 0, { color: "black", ease: Power1.easeOut }); TweenMax.set(this, { clearProps: "backgroundColor" }); } ); }); Happy tweening.

Hi guys, Just a little help. Guaranteed letter by letter hand coded by an old grasshopper. Happy scrolling ... Mikel

@bparticle Blake has provided you really great and robust demo which will work in all scenarios with zero to minor changes, it all comes down to how you will implement it in your project. And when CMS gets involved it just gets broader. Like, what if you have different elements from different parents that open modal on click? What if then you want some modal to auto-open? Then what if there is already another modal open? etc scenarios. You can take different approaches with most basic approach of creating two modal objects that will respond to two different click events and will present text from two different sections. More flexible implementation will be where you pass different parameters for color, section etc and just use single modal object that will be used throughout the site. Then third way I can think of will be by using data attributes that will be used to create/track all modals throughout the page. Following is very basic demo of two modals, that you can implement if have few modal objects on your site. Anything beyond that just becomes general programming and CMS related question which is way too broad and beyond this forum. Somebody else might take interest to help you if they find the topic interesting but chances are slim.

Yep. The trick is setting preserveAspectRatio="none" on the SVG. If the points are already set on the attribute, you can still use them. for (var i = 0; i < polygon.points.numberOfItems; i++) { var point = polygon.points.getItem(i); TweenMax.to(point, 1, { x: Math.random() * 100, y: Math.random() * 100 }); } It depends on the element and attribute, but you can usually access values like this. Just console.dir(element) an element, and explore some of the properties. var circle = document.querySelector("circle"); circle.cx.baseVal.value = 100; circle.cy.baseVal.value = 200; circle.r.baseVal.value = 50; var svg = document.querySelector("svg"); var viewBox = svg.viewBox.baseVal; viewBox.x = 100; viewBox.y = 200; viewBox.width = 1000; viewBox.height = 500; I use the viewBox object to drive all the dragging and zooming in this demo. Thanks. I've done that in other posts, so it's not totally new, but I'm going to start doing it more.

Aaaand a fancy new pen and now I'll stop spamming this thread. Thanks again everyone for the help!

There it is const dots = {}; function stipple(id, func, delay, throttle = false, leading = false) { if ( !dots.hasOwnProperty(id) ) { dots[id] = TweenLite .to({}, delay * ( throttle ? 2 : 1 ), {}) .eventCallback(( leading ? "onStart" : "onComplete" ), func); } if ( dots[id].progress() === 1 ) { dots[id].restart(true, false); } if ( dots[id].progress() > 0.5 ) { if ( leading ) { if ( throttle ) { dots[id].restart(true, false); } else { dots[id].progress(0.01, true); } } else { if ( throttle ) { dots[id].progress(1); } dots[id].restart(true, true); } } } And the codepen: There's a slight issue with the timing at the end of the non-immediate throttling version, I'm not sure if it's an easy fix and if it even really matters. Also, I had to use .progress(0.01, true); – using .restart() with suppressEvents = true seems to still call onStart? Maybe I'm missing something. This isn't the end of the thread btw, it would be great if others had suggestions on how to improve on this!

There was a topic posted a couple of weeks ago about not using ScrollMagic... http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860 I'm sure ScrollMagic is a great product, and I'm not trying to convince anybody otherwise, but this can be solved in 1 line of code. This normalizes the scroll value to a value between 0-1, a ratio. var progress = (scrollValue - min) / (max - min); Normalizing a value is key to figuring out most animation problems. Here are two different ways you can get the normalized value. Using scroll position... http://codepen.io/osublake/pen/c0d284a89ae1d15d5ec12ba4c9ee8f6b?editors=0010 Using client rect... http://codepen.io/osublake/pen/314e9c6f80001fd19dd0bf68d8fc292c?editors=0010

I might be misunderstanding something here about your goal, but couldn't you simply do this:? tree.set("#map-container", {className:"+=show-map"}); Remember, CSSPlugin allows you to animate between classes, and you can use "+="/"-=" prefixes to do relative values.