Leaderboard

Might want to check someone’s history, skill set, and experience before you accuse them of trolling.

Have you tried using the Draggable instance's pointerX and pointerY values? That's one of the ways it smooths out cross-browser differences. And to be clear, the docs don't indicate that the event will always have pageX/pageY values - it has no control over that. It simply passes along whatever it gets from the browser.

Hi @Fakebook The issue is with the way some browsers display fonts. The issue you're talking about was discussed in some pretty good detail here: Here's a link to my pen with the closest solution: https://codepen.io/elegantseagulls/pen/bJpGog The CSS you'll need is: font-kerning: none;

Hey @lzy100p, Maybe you try the AttrPlugin: https://codepen.io/mikeK/pen/QXXNJj Happy tweening ... Mikel

Just to add (ha) to Zach's excellent advice. You'll often use the .add() method to add a label or a function (without parameters) to the timeline. The biggest use, at least for me, is building a master timeline and adding nested timelines to the master. Check out this great article for all the details. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.

Hey @lzy100p, Clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path Kind regards Mikel

I know it's solved, but just to chime in - if your goal is to add a perspective(999px) to the transform while it's animating, you could try doing an onUpdate: tl.tl(element, 2, {scale:0.7, onUpdate:function() { element.style.transform += " perspective(999px)"; } }); Just a thought. It could be made even easier with a helper function that'd automate some of that. Anyway, happy tweening!

Yep, very doable. In addition to Zach's excellent advice I'd offer the possibility of using the SVG clip-path too. Masks differ a bit and are great when you need strokes or gradients to be part of the mask. Here's a quick clip-path option. Maybe it'll give you some ideas. https://codepen.io/PointC/pen/xxKwZqQ Happy tweening and welcome aboard.

Hey Doug and welcome to the forums, This is very doable! The first thing you need is the SVG mask (or clip path - I'd recommend a clip path for something like this). You should be able to export a mask like the one you're wanting from a vector editing software like Illustrator (or Inkscape). You could even generate it from a font file (if you have the font on your system, type the "N" using that font, then convert it to a path). Once you have the mask include the SVG with mask in your project and apply the mask to your images (I'd probably position the images with position: absolute). Then you just have to loop the image movement and opacity changes. There are a lot of ways to do this, but GSAP's timelines (like TweenMax.timeline) should make that part easy. Let us know if you have any other questions! We're happy to help, especially if you provide a CodePen of what you're stuck on. Happy tweening.

Ha, you're the king of super long, complicated posts today Are you just making suggestions for potential feature additions to Draggable? Or was there a problem/bug you wanted to report? I'm not 100% sure I follow all that you wrote, but I'll mention a few things (none of which may be helpful): If you need both x and y involved in a snap, that's supported and here's a demo: https://codepen.io/GreenSock/pen/wgapaY If you want to sense the direction of the drag, there's getDirection(): https://greensock.com/docs/Utilities/Draggable/getDirection() We didn't implement *= or /= or %= because they're just not that useful and implementing them would force ALL users to pay the performance and kb hit for something that probably 0.00001% of the users may actually tap into. It just didn't seem like a good tradeoff. Your demo showing that scale:+=0.5 affected scaleX and scaleY seemed to work exactly as I'd expect. Am I missing something? Why would you not thing it'd affect scaleX and scaleY (scale, after all, is just a shortcut to affect scaleX and scaleY). If you still need some help with something, yes, it'd be REALLY good if you provided as reduced a test case as possible and please keep the threads focused on one question at a time if you don't mind. It's totally fine if you open a few different threads - it's just too convoluted and confusing for people to follow when a whole bunch of things are mashed into one really long post Have a good night!

Vue's data system uses setters to detect changes, which is being triggered with this.timeline = new TimelineMax() in your mounted section because it's a different type than null. And you don't need reactivity for a timeline. Vue can't detect when you make changes to a timeline.

I'll take a look at it next week. I'm traveling right now. Luckyde, I'll also respond to your PM when I get back next week.

Hello @Andrew Harris and Welcome to the GreenSock Forum! The reason it is not animating is if you look at your compiled SASS CSS, the selector #t1:after does not exist. I only see #t2:after and #t3:after in your compiled SASS CSS. Once you add #t1:after CSS rule inside your CSS, then you should not get that console error. You must make sure that the same exact CSS Rule your animating with the CSSRulePlugin is also in your CSS, very important I changed #t3:after in your CSS to #t1:after and you can see no errors get thrown. https://codepen.io/jonathan/pen/EqPdXo Here is an example of the GSAP CSSRulePlugin. Notice how i also have the same CSS Rules I'm trying to animate already defined in my CSS, so the CSSRulePlugin can find those CSS Rules to animate? .. Does that make sense ? https://codepen.io/jonathan/pen/eMLogz Happy Tweening!

This sounds like you're talking about a "medium" sized website which can be a little awkward to handle because there's definitely not a "right answer" and a lot of it boils down to preference. When I see this type of situation, I immediately think: what needs to be loaded on every page (the overall framework) and what is more so specific to certain pages. Then I personally would put the general stuff in its own JS file, etc. and load page-specific JS files as needed. I may or may not use a static site generator to do this (it depends on the nature of the site). Another person might do roughly the same thing but use a component based framework to do so (which is essentially a more complex static site generator). It boils down to 1) what are your needs, 2) what are you most comfortable using, and 3) what sort of timeline are you working on (because if time doesn't matter so much you can play around with different ways or teach yourself a new way, etc.).

Hey, Not easy to say without seeing your markup. If your element is not part of the svg, you should not use value "all" but "auto". Read more here: https://tympanus.net/codrops/css_reference/pointer-events/

Well this is pretty ambiguous because technically this is like defining two different color values that you're asking the tween to animate to at the same time - one from the className and one from the "color" you're defining in the tween itself. Like @ZachSaucier said, we really don't recommend className tweens because it requires literally analyzing every single property, finding the ones that are different and animating those. It's much cleaner to just tell GSAP the specific properties/values you want to animate (plus I think that makes your code more readable and direct - less ambiguity).

Loops are your friends when you need to make several ScrollMagic scenes. I recently wrote a post about GSAP and ScrollMagic. Check out demo #4 and #7 as they show how to create multiple scenes with a jQuery loop. You can of course use a vanilla JS loop too. Hopefully that helps. Happy tweening.

If you need something to be sticky, just use CSS. https://codepen.io/osublake/pen/41a997ea6297132313629b608d0ba39f

Just about anything can be done if you put enough time and effort forth... It's called masking or clip-path and you can see a nice little video about it here: Regards

It's probably more complicated than you'd expect. It seems your statement was based on the assumption that start/end values are always stored cleanly in the vars object, but that isn't the case. For example, a bezier tween may contain an array of values with nested x/y pairs (or any property). And there are many other examples like that. Frankly, in all my years of doing this I can't remember anyone requesting this kind of functionality, nor have I needed it myself. Sure, there are times I may want to kill certain properties of a certain object from tweening, and that can already be accomplished with killTweensOf(). I totally appreciate your thoughtful suggestions and they're not without merit. However, when developing a product like GSAP, it's always a difficult balancing act between packing in as much functionality as I can while keeping the file size down and the performance way up...oh, and trying to prevent the API surface area from expanding like crazy to the point where it's just confusing/overwhelming for end users. I can't tell you how many times I've thought "well, in theory this feature might be cool..." or "oh, in this very specific use case, this feature would be nice to have..." and if I just keep cramming things in there, GSAP would end up becoming a monster. It's certainly possible to add code to the core to allow you to getTweensOf(target, property), but I'm struggling to convince myself that more than 0.01% of users would ever actually tap into that and I'm not sure it's worth the added complexity, kb, etc. Others are certainly welcome to chime in - if we get a lot of requests for that type of thing, I'd definitely reconsider it. But again, in all my years of doing this (and over 8,000,000 sites using GSAP including most award-winnings sites), I can't remember anyone else asking for that type of functionality. (That doesn't mean it's without merit). Again, I sure appreciate the thought you've put into these posts and your desire to help us make GSAP even better. I'm working hard on GSAP 3.0 and I think you're gonna really like it.

You can put all the functions you want inside the function you call with delayedCall(). Does that help?

Hey @hando, If it should be a simple animation ... https://codepen.io/mikeK/pen/eqVzRW Happy tweening ... Mikel

Hey @five.design, <button>: I moved the button in the html to activate it. Here is another suggestion: one of my first steps with GSAP - @OSUblake and the Forum team helped me a lot. https://codepen.io/osublake/pen/ZbPxjN Maybe it will help you - especially the matchMedia effect. Happy tweening ... Mikel

HI @lzy100p and welcome to the GreenSock Forum! Also keep in mind that you should also target for clipPath (clip-path), not just webkitClipPath. So you cover your bases for non webkit browsers.

Is the window loaded and DOM ready? Sir @Jonathan has written about this several times. Here's a bit of his wisdom. Does that help?

Hey Andres and welcome! As mikel said, using an equation to set the speed based on the distance is a good idea. On the GreenSock website we use this same approach but also set a maximum duration to make sure that long animations aren't too long: var dur = Math.max(0.25, distance / speed);

Yes, but it's very choppy because it can't animate the in-between values. To animate font weight using font-variation-settings, which can fill in the in-between values, you have to use a compatible font. Here's a good place to find some. https://v-fonts.com

I'm a little confused - do you have what you need now or were you still looking for some help? I thought you were gonna post something of your own that you were trying to add anchors to, but it looks like you just copied one of our codepens that already had anchors showing. If you need some help with something of your own, just let us know and we'd be glad to take a peek. Otherwise if you're all set, even better!

Hello sharik and welcome to the forums, There are a few different ways to do this. I would recommend looking at GSAP's SplitText and our timeline. The core of it is: have an array of words that you want to change out. Make sure the there are <span>s or something surrounding all words that you want to replace (and replace with). After a certain amount of time, fade out the old word, place the new one in the DOM (without being visible), get the width of the new word and adjust accordingly, then fade in and slide down the new word. Then repeat that process as needed. Does that makes sense? Let us know if you run into any issues and we can help with those. Here's some more information about SplitText and TimelineMax. P.S. Are you sure you want to make a direct copy of that group's website? It does not make your company stand out if you are just copying another company completely. I suggest that you change things up a bit more. Maybe include things from other site's designs so that the mix the sites becomes your own.

Hey @sumith, One of my favorite magazines TheNewYorker uses this technique and has kindly provided the code on Github: uturn - detect scrolling behavior with a requestAnimationFrame debounce Happy debounced scrolling ... Mikel

Hello Zach, I was able to arrive at a solution. Between your comments and OSUBlake's and Diaco's codepens for multiple drag objects and multiple targets I was able to piece together some code that worked. Thank you all for your time in helping all of us grateful GSAP users.

You'd use this.x in the callback. this inside of Draggable callbacks returns the Drabble object itself unless you specifically set the scope using one of the on____Scrope (like onDragScrope) functions. Modifying your code from above, you could get the values like so: Draggable.create("#firstNamedQuanDragImage1", {type:"x,y", bounds:"#nQL_DragDropGrid1", edgeResistance:0.5, cursor: "pointer", onDragEnd: function(e) { console.log("x: " + this.x + ", y: " + this.y); } });

Hey @sumith, Some pointers: //create a timeline instance var tl = new TimelineMax() //the following two lines do the SAME thing: .add( TweenMax.to("#id", 2, {x:100}) ); .to("#id", 2, {x:100}); //shorter syntax! By default, animations are inserted one-after-the-other, but it's easy to control precisely where things go using the position-parameter. I still do not understand, what do you mean by 'scroll 5 time', but here's a fork of your case: https://codepen.io/mikeK/pen/NWKNQwW Happy tweening ... Mikel

Another option is not using ScrollMagic on small screens. Here's a thread from yesterday that shows how you can either enable/disable scenes or create/destroy the controller at certain widths. Maybe that'll give you some ideas too. Happy tweening.

Your approach would only work if the images are loaded before the intersection occurs. In the case that the intersection occurs and the images aren't loaded, there is no logic to tell the browser to check again later if the images have loaded since the intersection. So if a user scrolled down to where the images should show but they're not loaded, they would never show (unless they scroll again and the intersection observer event fired again after the images had loaded). That's why you've got to use an approach more similar to the one I outlined above. We were all newbies at some point! No reason to be sorry.

Welcome to the forum. Two things: You need to target the path rather than the whole SVG. There is no stroke on the path. DrawSVG only works on strokes rather than fills. I forked your pen and added a red stroke for illustration purposes. https://codepen.io/PointC/pen/pMxOJQ Hopefully that helps. Happy tweening.

On top of Zach's great advice, try to avoid using regular selectors and use $refs instead: https://vuejs.org/v2/api/#ref

It wouldn't be a true "repeat" if it wiped out values and used new ones. But @PointC gave a great solution, and here's another alternative: https://codepen.io/GreenSock/pen/482b8b02df7d5f3b970861163bdb17a0?editors=0010 TweenMax.to("#box", 2, { rotation: "+=120", transformOrigin: "50% 50%", onComplete: function() { this.invalidate().delay(2).restart(true); } }); Does that help?

Hey everyone, I'll try my best to keep it as light and yet as detailed as possible, But i feel i need help after 7 months of trial to make a portfolio that describes the creative innovative well-performed master-crafted art of the builder itself! (That's a lot of adjectives i know, But it says it all) Not gonna bore you to death with my motivations so let's get to the point... This portfolio is a rocket, built to surf between the dimensions of this homemade space that i'm creating. As it may already seem impossible to your negative mind, Well i did it! But it's not so smooth (duh). You see there is a LOT of flying in this project and you guessed it, I use scales, rotations, x, y, opacity and such to deliver that flying effect to a few different elements (so far maximum of 26 different animations at once). Considering what GSAP's examples shows 26 animations at once may not seem that much big of a deal, but we're not talking little green dots here, we're talking 2 giant planets with floating particles around it and another giant thing with different parts floating in your monitor, not to even mention, they're all detailed!! These designs i'm talking about are SVGs & before you get the idea that they're not optimized i gotta say i learned my lesson, the designs weighed around 27 MBs before i optimized them all to roughly 3 MBs, so we're good on that part. Now there maybe a lot of different scenarios i did wrong here, But i don't do maybes so i try to express the parts that i feel are the stick through the progress's wheel! I'm numbering them so it's easier for you to point them out for me: 1. SVGs are embedded to the CSS's background property, Optimized and compressed. The desired CSS properties are given to the element and finally the animation is done either to this element DIRECTLY or to the parent that may contain a few of elements like this one (so far maximum of 7) 2 . The HTML tags linked to these CSS ids are mostly divs. 3. I DID NOT use any images whatsoever. Even the blurred parts or shadows were done by SVG filters (if you didn't know SVG can't handle blurry like designs and so your designing app turns them into image and embeds them in your SVG!) 4. The lagging usually happens when objects are scaling bigger (another duh) OR when the browser is animating any elements that has SVG filters are included in it! However my greatest suspicion is scaling... It's also worth mentioning that when not scaling, everything, even the most detailed elements work smooth! 5. I DO NOT use canvas or flash for any of the purposes i expressed so far am only using JS, JQ, GSAP, CSS, HTML. My aim was to hit a project like this only with the knowledge of these programming languages and frameworks that i know i'm good at.. 6. I'm aware of GPU accelerated animations so i didn't use anything other than transform and opacity on my main animations. 7. When flying, ALL other animations are stopped to help the performance of fly-related animations. 8. This project IS NOT 3D by nature, what i mean by that is i scale & position elements in a way that makes totally 2D divs look 3D (not sure if that made any sense) That's all i could come up with. I gotta say i'm grateful to GSAP's team and it's community cause you guys made something this powerful and now i'm using it to make something cool which i'm pretty sure can be a great example among other examples of how good GSAP really is... I really LOVE to learn new things so don't hesitate to share your knowledge with me if you want to. Have a great life & Good luck on your own projects

I'm on mobile right now so it's hard for me to give detailed advice. Using imports for premium pluguins and a cdn for gsap is going to cause problems because the plugins will try to import GSAP. To avoid mixing modules I would just copy the pluguins into your GSAP folder in node_modules and try following the advice in the docs. https://greensock.com/docs/NPMUsage However, Nuxt might have issues with importing es modules. Well it did last time I checked, but I can't really investigate right now. I'm out of town at the moment.

@PointC Who needs SVG for that? https://codepen.io/GreenSock/pen/ZgKbgW

Hey @Zhiyi Zeng, Well, what your computer does that may be questionable. But GSAP SplitText runs properly ... https://codepen.io/mikeK/pen/PMzddE Best regards Mikel

Hey Kenno and welcome to the forums. I think you need to a conditional check similar to this: $('.sidebar__menu').on("click", function(){ if(!tl.reversed()) { tl.reversed(true).timeScale(2); } else { tl.reversed(false).timeScale(1); } }); And you can remove the t1.reverse().timeScale(2); line above. It'd be helpful for me to test with some actual HTML included in your demo.

Welcome to the forums. I think this has more to do with your understanding of positioning in CSS than it does issues with GSAP. Maybe reading an article like "Scaling Responsive Animations" can help you even though the article doesn't mention GSAP specifically. It would be very helpful to us if you reproduced a minimal version of your positioning issues in a CodePen so that we can see the code more easily and it didn't get constantly updated like your live site likely will. You can read about doing so here: But from looking at your code, it seems that you have a mix of using top, left, x, y, and xPercent and yPercent. It's generally a good idea to try and stick to animating only one of these pairs because otherwise it can get confusing.

In addition to the great advice from Craig, if you could post a minimal version of your issue online to a site that we could access we might be able to help more with debugging.

Hey vanSk, You should be able to do this by adding a delay after the staggerFromTo that you're using there, then adding another animate to the timeline to show the button, and then it will loop indefinitely since you set the repeat to -1 on the timeline. Is there a particular part of the process that you're running into trouble doing?

Yep, I think @OSUblake was right on regarding the extra M0,0 command at the end, but I can add some code to MorphSVGPlugin to sense that condition and just throw those values away. Thanks for your thoughtful and thorough post, especially the reduced test case

Hi mikel, thanks for your solution. I already thought about that. The only point why i would not like to use this is: each of my DIVs has the values stored inside. To use your approach i first have to iterate through the DIVs and fill the array and then tween them and i would like to do this without this extra step. I thought: "OK, if GSAP iterates through my DIVs to tween them, i could get the tween values in the same step". But I will give it a try, its the best way so... THX a lot! 👍

@mikelsweet, yes that's it. Thanks, cheers man!

Was it ever the best option for scroll based animations? It just makes certain things more simple to do on scroll. Doing some things on scroll is fine. You need to be mindful of what you're doing on scroll though. And often times it's a good idea to throttle the scroll event.