Leaderboard

Hi @friendlygiraffe, 'Afterwards' is not the point. The position is defined by ',0'. Please have a look in the DOCs //add a tween to the end of the timeline tl.add( TweenLite.to(element, 2, {left:100}) ); //add a callback at 1.5 seconds tl.add(func, 1.5); //add a label 2 seconds after the end of the timeline (with a gap of 2 seconds) tl.add("myLabel", "+=2"); //add another timeline at "myLabel" tl.add(otherTimeline, "myLabel"); //add an array of tweens 2 seconds after "myLabel" tl.add([tween1, tween2, tween3], "myLabel+=2"); //add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5); Kind regards Mikel

Nah, there's no need to re-do the entire function and have all that repetitive code in there. You could just put a simple ternary operator in there: //OLD: ... "-=.85" //NEW: ... (window.innerWidth < 737 ? "-=.5" : "-=.85") Is that what you're looking for? Another option is to use an object for various values that are dependent on the window size, like: var config = {}; if (window.innerWidth > 737) { config.position = "-=.85"; // add whatever you want. } else { config.position = "-=.5"; // add whatever you want. } tl.to(..., config.position); Hope that helps.

Hi @flubssen Welcome to the forum. You're targeting an array which contains all the .odd class elements. Since they are all part of the same target, they move together. You'll get the desired behavior by targeting like this: tl.staggerFrom(".odd", 0.5, {cycle:{x:[80,-80]}, autoAlpha:0, delay : 2}, 1.3); Happy tweening.

sorry, I wasn't exactly sure what you needed. all the letters changing to numbers with the motion was a bit distracting. to replicate your TweenMax example you would set the position to 0 on the staggerFromTo().

You can use a position parameter (0.5) on the staggerTo() so that it starts immediately after the first tween in the staggerFromTo() .staggerFromTo($(".menu_tile"), 0.5, {top:"-120px", opacity:0}, {top:0, opacity:1,onUpdate:onHeaderUpdate, onUpdateParams:["{self}"]}, 0.1) .staggerTo($(".menu_tile"), 1, {top:"0px", onUpdate:onHeaderUpdate, onUpdateParams:["{self}"], onComplete:onHeaderComplete, onCompleteParams:["{self}"]}, 0.16, 0.5); https://greensock.com/position-parameter https://greensock.com/docs/TimelineLite/staggerFromTo()

Hi @jiggles78 , Welcome to the GreenSock Forum. Your idea is great. To use this slider code, you could do it like this (only a quick approach!): The wonderfull construct of @OSUblake, each Slide triggers a separate animation, is also feasible. Happy tweening ... Mikel

Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.

Hi @nathanlord, Here is the old praise about @Carl: Only as a suggestion. And: Another try lip sync Happy tweening ... Mikel

If you're asking about throwing a draggable to a snap point, you can use the onThrowComplete callback.

Hi @friendlygiraffe, Could this be a solution ... You could position everything. and 'add' also Happy tweening ... Mikel

When a tween renders for the first time, that's when it records the starting/ending values and if they're the same (no change), it's skipped internally, yes. So, for example, if you try tweening to x:100 but x is already 100, it won't keep trying to set that value over and over again during the tween. But the tween itself will still run because other factors matter (like there could be an onComplete or onUpdate, plus if may need to take up space in a timeline, etc.) Does that answer your question? Even if GSAP didn't skip those parts, I highly doubt you'd ever notice a performance difference. It's super fast. Maybe if you literally had 50,000 tweens simultaneously running, you'd notice it. Good luck with the project!

I think I see what's going on... You've got mis-matched versions of various things loading, like in the "new" one you've got TweenLite 2.0.1 but CSSPlugin 1.19.0 (much older). It appears as though you've got a build system concatenating and minifying things which is fine, but it's somehow mismatching versions. The reason some of the animations are "failing" is that you've got BOTH css transforms AND attribute-based transforms applied, so the browser is choosing to prioritize one over the other. In other words: <path transform="matrix(1,0,0,1,0,0)" style="transform: matrix(2,0,0,2,0,0)" /> It obviously can't be both of those at the same time, so the browser must choose one. So in your file, GSAP is accurately applying the transforms via the "transform" attribute (see for yourself in Dev Tools), but since there are CSS transforms ALSO applied, the browser is basically ignoring the attribute and prioritizing the CSS, thus you don't actually see any of the animation taking place (even though the values are indeed changing under the hood). Originally (in very old versions), GSAP always applied transforms via the CSS style but then we noticed various anomalies, bugs and inconsistencies in how browsers interpreted those, so we changed to applying them via the "transform" attribute which is what the SVG spec suggests anyway. That delivered much more consistent behavior (and remember, one of the main things GSAP tries to do for you is solve various browser inconsistencies). Then we noticed that sometimes people had already applied CSS transforms in their raw code, so when GSAP applied things to the "transform" attribute, it created opportunities for the browser to get confused. In more recent versions, we applied workarounds to clear out those CSS values for SVGs. I bet that version 1.19.0 of CSSPlugin didn't have that fix in place yet. The moral of the story: don't mis-match versions, and make sure you've got the latest The version of CSSPlugin that shipped with GSAP 2.0.1 is 1.20.5 Does that resolve things for you?

Hm, that sure doesn't look GSAP-related at all because GSAP uses a time-based ticker that always updates the animations according to the current time (rather than moving a certain amount/pixels on each "tick"). In other words, it's resolution-independent time-wise. A 1-second tween will always take 1 second (although the very last update might be a tad late if the device is under tons of pressure). The video you showed had the whole animation slowing waaaay down and each update wasn't synchronized with the actual time. That tells me it's likely something with Ionic or the timing mechanism or something deeper, NOT GSAP. Unfortunately, I'm not really familiar with Ionic or what kind of idiosyncrasies it may have (or how to fix them). Oh, and if the thing you're animating is an SVG, it won't help anything to set force3D:true because browsers don't 3D-accelerate SVGs. It shouldn't hurt you either - it just won't help. I wish I had better news for ya. It may very well be a problem specific to that device, though I have no idea. It's a good sign that it runs so well in all the browsers.

Here's an article on stacking multiple images and using clip-path. (it uses CSS animations, but you can easily convert it to GSAP) https://tympanus.net/codrops/2017/12/21/css-glitch-effect/ Pixi has a glitch filter https://pixijs.io/pixi-filters/docs/PIXI.filters.GlitchFilter.html Happy tweening.

Hi @Chelle Service Capital Inc, Welcome to the GreenSock Forum. Have you researched on CodePen? Take a look at this example: Kind regards Mikel

God, that didn't ever occur to me to use the ternary operator. That was also useful to use on the duration value as well on a different timeline. Thanks ever so much. Paul

Welcome to the club! Yeah, if you're using Webpack and NPM check this out: https://greensock.com/docs/NPMUsage In your zip download, you should see a "bonus-files-for-npm-users" folder. You can just toss those in your project and install the main files via NPM with "npm install gsap" and you're good-to-go. Let us know if you need any other assistance. Enjoy!

Okay thanks. I purchased the Shockingly-green package. How do I use the Splittext.min.js in my project via webpack? place into a js folder within a subfolder named vendors? Thank you.

First of all, welcome to the forums! You don't necessarily need the Business Green membership to use it for client websites. If you're only doing one-off projects (where you only charge one client for the thing you build), that's covered under the standard "no charge" license. You need the commercial license if you use GreenSock tools in a site/app/product for which a fee is charged to MULTIPLE customers. For example, a web site that has part of it behind a pay wall (members-only) or an app that's sold in the app store or a theme that you sell on ThemeForest. See https://greensock.com/licensing for more details. And definitely check out https://greensock.com/why-license/ to understand WHY we do it this way. There are three primary reasons for joining Club GreenSock: To get the members-only bonus plugins which can take your animation skills to the next level (MorphSVGPlugin, SplitText, GSDevTools, and many more) To get the special commercial license that comes with the "Business Green" level. (As mentioned above) To support GreenSock's ongoing efforts to maintain and enhance the tools. It's a way of saying "thank you" and protecting against common frailties of open source. Does that clarify things adequately? Hopefully you'll find that the membership pays for itself very quickly and ends up making you a lot more profitable. But if you're not happy, don't worry - we'll gladly issue a refund. We offer a satisfaction guarantee - we're passionate about having happy customers around here.

Sure. That site uses GSAP, but it's not as if there's a canned effect that you can apply like that - GSAP can animate any property of any object. So to achieve that effect, you'd need to wire up JS logic to get the behavior (like the mouse tracking, the way the letters kinda split into different colors overlaid on each other, etc.) and you could certainly use GSAP for any of the animations. Does that answer your question?

The default behavior for a timeline is to run the tweens in succession. By adding the position parameter you can alter the start times of the tweens. Either with a label, relative time or absolute time. https://greensock.com/position-parameter If you had a collection of tweens that were not part of a timeline, they would all start at the same time (0) provided none of them had a delay or was put into a paused state. Hopefully that helps. Happy tweening.

Ah, add it afterwards. Nice and simple, thanks

Hello @Yaniv Nagar and welcome to the GreenSock Forum! This is not a bug, but your targeting a CSS Rule that does not exist in your compiled CSS. You must match the CSS Rule exactly, meaning use the same CSS Rule selector in your compiled CSS in your CSSRulePlugin getRule(). Your issue is that your asking GSAP CSSRulePlugin to find a specific selector, but your not giving the same selector as shown in your CSS. If you look closely your SCSS CSS when compiled show this as your selector: .header .level_number:before not .level_number:before which is why it fails // The CSS rule in your compiled CSS .header .level_number:before // But you are trying to target this CSS rule which is not exactly in your compiled CSS .level_number:before // They dont match that is why it fails. So please use like you were doing CSSRulePlugin.getRule(".header .level_number:before"); So you want to make sure that your GSAP selector for the rule is the same as whats in your CSS rule selector. As a rule of thumb when using the CSSRulePlugin you want to always use the exact CSS Rule selector since that is what your trying to animate, that exact CSS rule in your CSS. Happy Tweening!