Leaderboard

Well as @PointC mentions above you can use ScrollMagic, he actually wrote a guest article (tutorial) on it which can be found here. But ScrollMagic appears behind regarding support for IntersectionObserver and GSAP 3 as seen in these few examples. https://github.com/janpaepke/ScrollMagic/pull/920 — GSAP 3 https://github.com/janpaepke/ScrollMagic/issues/918 — GSAP 3 https://github.com/janpaepke/ScrollMagic/issues/751 — IntersectionObserver Alternatively there is scrollama which does use IntersectionObserver. It is quite similar to ScrollMagic and continues to recieve updates. I have not tested it yet with GSAP 3, so do let us know how that goes if you (or anyone else) do so. I’m slightly surprised @GreenSock hasn’t just made one of his infamous and clever ’whipped up” helper functions leveraging IntersectionObserver for passing in GSAP timelines or tweens. So the staff can stop saying "ScrollMagic is not a GSAP product" here on the forum and that it might not be the best option (ha, ha), instead just point all references to that in house approach. ? You can also simply use vanilla IntersectionObserver on your own without the need for a library, you will find plenty of examples here within the forum.

For future readers: Note that if you need to animate only some of the border radiuses or animate the radiuses in different ways, you can do so by animating the specific properties like borderTopLeftRadius, borderBottomRightRadius, etc.

Hey MeLight and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. The main issue here is that elements with display: inline (like spans by default) aren't affected by transforms like your attempt to animate the x property. If you use GSAP to set the display to inline-block instead, it will animate in the x direction. However, you need to make sure the spaces between elements are retained, so I also added spacer elements in the demo below. https://codepen.io/GreenSock/pen/wvBxWJx?editors=0010 Side note: .innerText is more performant than .innerHTML if all you're doing is changing text

Hey @Sangam Basnet, Here is an option. Pay attention to the new structure. https://codepen.io/mikeK/pen/QWwQagQ Happy tweening ... Mikel

Hey @wcomp, Let GSAP do all transform jobs: clearer and more practical https://codepen.io/mikeK/pen/vYEWNPy Info to transforms and transformOrigin e.g.: here. Happy tweening ... Mikel

Hi, Welcome to the GreenSock forums and Happy New Year!!! I actually never dealt with something that specific such as checking for a single value in such way. When dealing with TDD I try to keep GSAP instances out of it because is not actually that trivial to do it. Keep in mind that React is basically used to create UI's, hence any TDD using it should consider that there is an effect to any update in the app state that can be checked. In this particular case you're checking an attribute of an SVG element so you can use the toHaveAttribute expectation given by jest-dom, all you have to do is query the target element and check the attribute value. Also in your code you have this for the initial set up: { value = false, onClick, scale = 1, radius = 16, length = 120, borderWidth = 1, borderColor = '#333', knobColor = '#c0c0c0', onBackgroundColor = '#228b22', hasBoldText = false, onTextColor = '#ffffff', offBackgroundColor = '#b22222', offTextColor = '#ffffff', duration = 0.5, style = null, } And this for rendering the text element: <text ref={onTextRef} id="on-text" x={-(length * 0.5)} y={radius * 1.42} fill={onTextColor} fontSize="20" fontWeight={hasBoldText ? 'bold' : 'normal'} stroke={borderColor} strokeWidth={borderWidth / 2} > OPEN </text> So the initial position is -(length * 0.5) and that is -60. Nowhere in your code I see anything that changes the initial position of onTextRef to a positive value. Please try to create a Codesandbox sample since you can include testing there as well, in order to get a live editable code that we can look at. Finally I'm not very fond of TDD everything in React since it forces to add a bunch of extra code and boilerplate in the JSX and sometimes the logic of components that is not really necessary beyond testing that some part of the component is rendered or not due to some data received from a server request or a specific user interaction. Honestly I'd like to think that the fact that you can encapsulate your components (even re-usable ones) should be enough for securing that extending a component doesn't create issues. As a personal opinion I'm not really a big fan of TDD since a code that is well written doesn't need a safety net to work, but is a trend now a days so we're forced to follow it whether we like it or not. Happy Tweening!!!

Hi @Hossein Rahimi, I'm not entirely sure what you have happening in your animation, but I believe the slow/delayed feel you're getting may be because of your tween's duration is causing the tweens to stack up (you're telling it to do a new 0.5s tween to a new value on every tick). Instead of this, you may want to consider using gsap's quicksetter method for this: https://greensock.com/docs/v3/GSAP/gsap.quickSetter() The other way would be to define your animation first, and use scroll position to update the tl.progress() I also prefer to use gsap's ticker (https://greensock.com/docs/v3/GSAP/gsap.ticker) over requestAnimationFrame(), but that's a personal preference thing (performance will be very similar)

Seems like GSDevtools was causing some conflict, removing it fixed the issue. https://codepen.io/Sahil89/pen/VwYWeZX

Ok - here's a quick try https://codepen.io/mikeK/pen/xxbrKKQ Happy tweening ... Mikel

Like this. .to('#panda *', { duration: 2, scaleX: 1.2, scaleY: .85, y: -18, rotationX: 15, rotationY: -15, rotationZ: 2, ease: "elastic", stagger: 0.015 }, 0.2) .to('#panda *', { duration: 2, scaleX: 1, scaleY: 1, y: 0, rotationY: 0, rotationX: 0, rotationZ: 0, ease: "elastic", stagger: 0.015 }, 0.4) More advanced stagger options. https://codepen.io/GreenSock/pen/vYBRPbO Simplified easing using strings. https://greensock.com/docs/v3/Eases

@ZachSaucier that's because there was literally no color applied at all, so it's treated as transparent. Here's a simplified version that seems to work for me (unless I'm misunderstanding the goal): https://codepen.io/GreenSock/pen/mdyzBXN?editors=0010 There are actually a ton of other ways to do this, @shanemielke. Does the above example work well for you or would you like some other options? You probably don't need an onUpdate, though that's perfectly acceptable if you prefer to go that way.

No. You likely don't need to register the plugins at all since you're just using plain HTML files. You need to load all plugins in their own script tags after GSAP is loaded but before your build file.

Hey kailin and welcome to the GreenSock forums. Good work converting most of it to GSAP 3! The biggest issue is that .progress() can't be negative in GSAP 3. So you should use GSAP's .wrap() utility method to keep it in the range of 0 and 1. I went ahead and straight converted the pen you used as a reference to GSAP 3 because I thought it'd be simpler for me to debug: https://codepen.io/GreenSock/pen/JjomKjq?editors=0010 Just applying that fix to your demo makes it function well: function updateProgress() { animation.progress(gsap.utils.wrap(0, 1, transform() / entireSize)); } Keep in mind that InertiaPlugin requires at least a Shockingly Green Club GreenSock membership. We'd love to have you join the club!

It's working correctly. I think your understanding of how animations work is a little off. An animation will update about every ~16.67ms, so the chances of it updating on every number change are practically 0. You would have better luck playing the lottery. To get it working like you want might take some work. You will need to make sure a number is not already in the array, and fill in any missing numbers between the last number in the array and the current number.

That's not true - we recommend that people put the duration inside the vars parameter in GSAP 3 but they are allowed to put it as the second parameter if they want. Anyway, it's unrelated to this issue in Firefox. Your pen is still not working the same as other browsers for me at least (on Catalina). Your misreading my post and whats in my code block. The 2nd parameter for GSAP 3 gsap.to() is the vars parameter. That is what i wrote and what's in my codepen. I have the duration parameter in the vars, which is the 2nd parameter of the gsap.to() method! I see it animating in latest Firefox Windows 10 with that change.

Many thanks Mikel. You are awesome. 5 Star for your work and reply. Regards, Sangam Basnet

Hey @bootstrap007, this could be an option function resizeCheck(){ var progress = action.progress(); //record the progress so that we can match it with the new tween (jump to the same spot) action.kill(); //rewind and kill the original tween. bezier().progress(progress); //create a new tween based on the new size, and jump to the same progress value. } https://codepen.io/mikeK/pen/poveLRo Happy tweening ... Mikel

I assume it's because you've got a quickSetter() that's setting the "x" and "y" directly, and then you're ALSO creating a tween in a "mousemove" that's trying to make x/y go to other values instead. x and y can only be one value at a time Maybe you should create a wrapper and then just tween the inner element to control the relative position (side flipping), and the container for the overall position.

Hey @bootstrap007, try this var wh = window.innerHeight; tl.to('#ball', .50, { width:wh, ease: Power2.easeOut }); // and a separate tween TweenMax.to('#ball', 2, {rotation:360, transformOrigin:'center', repeat:-1, ease: Linear.easeNone}) and please use the new gsap 3.0 Happy tweening ... Mikel

Looks like that was already fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js. Sorry about any confusion there. And yes, @ZachSaucier is working on a fix for that codepen embed issue. ?

You have to change the mod values to ones that you want, the ones I made are just for example. https://codepen.io/GreenSock/pen/KKwXVBw?editors=0010 It would be good for you to take a few minutes and try to understand my approach. I'm happy to help.

Hey BFreakout and welcome! There are several methods that you can use to do this. The first that came to my mind is to use MotionPathPlugin, especially if your conveyor belt and items are all SVG (but they don't have to be - it just makes resizing easier). Motion paths made with it aren't responsive by default, but you can kill and old instance and re-create it when you need to. I recommend fake physics rather than trying to use real physics. By that I mean use a motion path that doesn't go straight down and you could use a separate tween (applied to a container <g> most likely) that adds some rotation if you want to as well. If you really and to do something with physics, you could look into this library: https://github.com/subprotocol/verlet-js

Sure, you could use MorphSVGPlugin's stringToRawPath() method to convert a path data string into a RawPath (which is always cubic bezier based) and rawPathToString() to convert that back into a path data string. Like: var pathData = "M0,0 C10,20,15,30,5,18 M0,100 C50,120,80,110,100,100"; // any valid path data, not limited to cubic beziers var rawPath = MorphSVGPlugin.stringToRawPath(pathData); var cubicPathData = MorphSVGPlugin.rawPathToString(rawPath); Is that what you're looking for?

Yes, I'm certain. You can tell from the text in your pen. Here's a minimal demo that shows it very clearly: https://codepen.io/GreenSock/pen/povQKxR?editors=0100

@ZachSaucier I can't repro it on CodePen using the same library versions. I suspect that there's another instance of gsap bundled in my client's global js package. Sorry for not catching this earlier and thanks for your patience!

Ah, I understand what you mean now that you've added the image. You're saying that sometimes in the very last event caused by clicking the button (without the user manually scrolling them self) scrolling is false. This is actually kind of tricky. What I believe is going on (I could be wrong): The window checks for scroll changes even n milliseconds (because it can't check every 0 milliseconds, that's impossible). This is somewhat asynchronous to GSAP's updates. Sometimes that check falls right between when GSAP updates the scroll position for the last time and the onComplete when scrolling is made false, which would report that scrolling is true. Other times, that check falls right after GSAP calls the onComplete callback, in which case scrolling is false. I don't think there's really a way to work around this using the current setup. However, I would do something like the below where GSAP is fully in control of reporting the status of scrolling because it's guaranteed to be in order like you expect. https://codepen.io/GreenSock/pen/WNbgeZj?editors=0010 If, for some reason, you also need to have the scroll being listened to and that variable checked you could enable and disable it during the tween: https://codepen.io/GreenSock/pen/YzPOKaP?editors=0010

I'd do something like this, no need for ScrollMagic. https://codepen.io/GreenSock/pen/KKwBYwP?editors=0010 Notice that you don't need to put quotation marks around numerical values.

Hey jsco, This is the issue. If you try to animate the rectangle along the paths it will be jumpy and not a smooth animation because the paths are poorly formed and their endpoints don't match up. There's no way to fix the jumpiness without editing the paths. The first thing you should do is improve (or have someone improve) the exporting of the lines. This sort of line should optimally be done using one path with only two points and then an arc.

@ZachSaucier is correct - GSAP just uses Math.random(), so unless I'm misunderstanding your goal I don't think seeding is possible.

Yes, it animates. But it animates from 0px to 10px, not 50px to 10px.

Hey @Zahir Rafiq, Another concept. https://codepen.io/mikeK/pen/abzGjJJ The first run (Rerun codePen) is sometimes not as expected. I do not know why. Happy tweening ... Mikel

3.0.5 is officially out now, so you don't need to wait at all Enjoy!

hey ! Many thanks ! I'll try that

Hey @michaeljohansen. Why not pass it as a hex string? like "#228200" https://codepen.io/GreenSock/pen/PowQmVV?editors=0010

Math and physics have never been my strength. So just a little trial and error. https://codepen.io/mikeK/pen/bGNajzW Maybe I should do a course at @OSUblake. Mikel

Hey @Sangam Basnet, Another arrow is now in the SVG, hidden in CSS. Then simply hide or show the arrows with 'autoAlpha'. https://codepen.io/mikeK/pen/GRgyMRd Happy tweening ... Mikel

Hey @Warren_A, Welcome to the GreenSock Forum. GSAP 3.0 is so convenient: var tl = gsap.timeline () .to('.ball',{ x: "random(-20, 20, 5)", //chooses a random number between -20 and 20 for each target, rounding to the closest 5! y: "random(-20, 10, 3)", duration:1, ease:"none", repeat:-1, repeatRefresh:true // gets a new random x and y value on each repeat }) https://codepen.io/mikeK/pen/vYEWqJY Happy tweening ... Mikel

Sorry for the bothering. I found out that I can just ignore the warning. It seems that Google Fonts have already allowed Cross Origin in their headers: access-control-allow-origin:* The issue might be caused by other elements.

I think the approach I have above is good. You can spend more time playing with the value or try to figure out a way to get the exact number using dimensions to further reduce the chance of a jump.

Hey pkid and welcome. This effect is done using WebGL. The pen you linked to above just uses <canvas>. If you are trying to recreate it completely from the ground up it will probably take a while to create because you need to understand WebGL, especially shaders. However, you could modify other similar effects to do that sort of effect like these: https://tympanus.net/codrops/2019/10/23/making-gooey-image-hover-effects-with-three-js/ https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/

While snap is obviously a lot shorter, I don't think it communicates that the value repeats as clearly as increment. And on a much more subjective level, seeing the word snap twice that close to each other in the same function feels weird.

Thanks for sharing, @benoit!

That sounds pretty complicated because the scroll speed of the user isn't predictable. And a scroll event might fire every 16ms (it might be much faster than that with touch), so a lot of what's on the screen can change during those intervals. You would be adding animations to a queue for elements that might be out of view on the next tick, which would be delaying animations that do need to play. To trigger animations when they are in the viewport, I've been using the Intersection Obsever API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API This demo is set up to animate elements by the row: https://codepen.io/osublake/pen/6fd214ecd74e7091ec7b609bb0270f97

I don't see any issues on my machine, however... It doesn't seem to be as much of an issue these days but in the past having objects on different layers (z-indexes) animating often affected text rendering particularly in Safari, this usually meant you had to play with font smoothing or other font rendering options to fix it. You mentioned you're on an older mac which suggests that maybe it's an older browser as well, that is displaying this type of bug. An article from a few years ago discussing something similar. https://www.lockedownseo.com/webkit-bug-slider-causes-font-weight-changes-on-page/

An even easier way to do this is to make the stagger value negative .staggerFrom(".box", .8, {y:60}, -0.15)

Assuming it does not impact performance I would say it be would desirable. It is rather counter intuitive the way it needs to be handled now and likely to trip up a lot of people. And the resulting code would be simplified and easier to follow when things get complex.

Scale is actually 2 different calculations. var tween = TweenMax.to('.red', 1, { //this value won't matter scale: 2, modifiers: { scaleX: scaleModifier, scaleY: scaleModifier } }); function scaleModifier(scale) { if (scale > 1.5) return 1.5; return scale; }

Hi phillip_vale Your pen had some errors so I just made a new one for you. http://codepen.io/PointC/pen/QEyxLY/ Hopefully that helps a little bit. Happy tweening.

Hi all, It seems the default value for transformOrigin has changed (but not the documentation). It broke some of my older animations that expected the origin in the center. While TweenMax 1.11.8 was fine, my animated bicycle was shattered all over the screen with version 1.15 (or gsap/latest). I thought I'd let you know

Hi potatoDie you can change the transformOrigin with this : TweenMax.set(element,{transformOrigin:"50% 50%"}); pls read the CSSplugin Docs : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ http://codepen.io/MAW/pen/MYyzpv