Leaderboard

Sort of new, but a variable in preprocessor doesn't work the same way because they are static and cannot be changed at runtime. https://greensock.com/css-variables And if you want to see the future, fire up Chrome and check out these experiments. Chrome needs to be version 65 or higher. https://lab.iamvdo.me/houdini/background-properties

Here's another example. Corners can be a little tricky, so I give them a little wiggle room.

And I see some new experiments have been added. I love this one. https://lab.iamvdo.me/houdini/random-bubbles-mask EDIT: Actually, you might have to wait a couple of more versions to see that, or enable experimental web platform features in Chrome or Opera. Copy and paste this in your address bar. about://flags/#enable-experimental-web-platform-features

@Mantvydas Following example uses TweenLite's tick event that gets called on each frame, similar to requestAnimationFrame if you are familiar with that. Right now this example works with single parent only but you can make it work with multiple parent elements with little work. I have left a lot of comments explaining everything. There are some libraries out there that do parallax effects for you, parallax.js supports gyroscope as well so you can check that if you want. As for not being familiar with GreenSock and coding, I will suggest you to spend some time on forum every day, an hour or so. Start by looking at simple questions and try to solve them. It's great way to learn coding and get familiar with GSAP. Starting with something small is easy get learn and get answers as well.

Hello @Fakebook and welcome to the GreenSock Forum! @Carl is right that this is a browser rendering issue. Nice catch @Carl you brought to my attention the problem being the parent .textArea, and not the <span> staggered children This seems to be an old webkit anti-aliasing text bug when rendering font text using 3d transforms. I see the font shifting in Chrome, but only slightly in Firefox, but each have a different hack to get around this browser bug. For Chrome (the font weight and family might shift or collapse on it self due to webkit 3d transform text bug): You can set force3D: false on your from() tween. force3D: false Please see CSSPlugin Docs: https://greensock.com/docs/Plugins/CSSPlugin#force3D For Firefox (the font is shifting slightly, this is not really a bug but firefox requires other CSS properties to make it render correctly): You have to set CSS perspective on its parent .textarea .textArea { position: absolute; left: 300px; top: 100px; transform-origin: left center; background: brown; line-height: 100px; padding: 0 40px; display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 900; color: #FFF; font-size: 50px; -webkit-perspective: 1000px; /* add perspective to fix firefox text bug */ perspective: 1000px; /* add perspective to fix firefox text bug */ } Chrome uses webkit which has been plagued by this rendering anti-aliasing text bug for many years. To get around this poopy pants webkit text bug you have to tell the browser to render it using 2D transforms which is what force3D: false does. Firefox just needs some supporting CSS properties for 3D transforms so it can render properly, that's why its not a bug in Firefox just a case of missing CSS properties so it can know how to render correctly. You should see in your forked codepen, that we tell the browser to use force3D: false (which will make Chrome use 2D transforms to get around this browser text bug) and CSS perspective in your CSS for the parent .textArea for Firefox. I also changed top to x (translateX) so it animates more smooth, since top can trigger layout for bad performance. Does that help? Happy Tweening!

You can do that by using CustomBounce and CustomEase. Check docs and following video on how you can do it, https://greensock.com/docs/Easing/CustomBounce

For what it's worth ... ScrollMagic is a bit unnecessary here (unless the CodePen isn't displaying the entirety of the project). This could be handled with a simple paused timeline where the current scroll position progresses the Timeline. Also, using some X positions rather than "left" could help. Lastly, I'm a fan of using background images on divs and moving the divs (using X/Y) rather than moving the backgrounds because of the hardware acceleration. Here is a quick codepen taking ScrollMagic out of the equation and using the users scroll position to progress a Timeline. I didn't spend to much time on making sure the timings match up, but it should give you the idea.

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

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.

You can do that using a liveSnap function. Check out how you can use it with points. https://greensock.com/1-20-0 @GreenSock This demo is broke. Need to add a comma after the type.

I don't know if there is a reason to avoid them. From a styling point of view they're safe to use because CSS just skips stuff it doesn't understand. .foo { background-color: green; // fallback background-color: var(--myColor); } IE is the only browser that doesn't support them, so the animation won't work, but it won't throw an error. But I would just disable all the animations in IE. Don't worry, your client won't check.

Such an old but good thread. I really should make a new version of that slider. Look at how I'm changing the positioning in the setAbsolute/setRelative functions here.

Why are there two declarations for .green-state and .red-state in your CSS? Why does a box with both .red-state and .green-state become red, not green? I mean, I understand the CSS, but isn't is it way less intuitive to do it that way? If I want a box to go from green, to red, to blue, to yellow, to purple... would I have to write 5 nested classes? Just wondering if I missed something (Also, I feel like there's a lot of unneeded aggressiveness in this thread – could use some humility... but I'm no mod)

It wouldn't be horribly difficult to make the content animate too (like drop does), but I'm a little concerned that this could turn into a beast because of all the customizations folks might want. "Can I make it drop more? Can it wiggle too? Can we apply custom physics?..." Then again, it seems like at least a nifty utility for creating these types of effects. I think a lot of people may struggle with getting the bendiness on their own, but they wouldn't find it horribly difficult to add the other (more standard) animated effects.

Hi, Does this comes close to what you're trying to do?

Nice job @Sahil! A while back I was toying with the idea of releasing a tool that'd make this sort of thing easier but I put it on the backburner for a while. I called it "BendyBox" - it basically lets you convert any DIV or RECT into an object thats bendable in various ways. It swaps in an SVG to create those effects and you can register various animation effects that you easily call later, like "drop", "spin", etc. Advanced demo: Basic (with quasi-documentation in comments): Again, not sure if we'll make it an official GreenSock tool yet, but I figured this is a good place to share about it. Feedback is welcome.

Great detective work, Jonathan. Thanks for all the juicy details!

That's just an order-of-operations thing which I explain here: If you NEED that non-standard order-of-operation, you could just animate to the "transform" property instead of the component shortcuts (rotationX, rotationY, etc.), like: TweenMax.to('.gsap-box', 1.3, {transform: "rotateX(36deg) rotateZ(331deg)"}); Just beware that it's typically more efficient (uses fewer resources) and allows rotations beyond 180 degrees if you use the component shortcuts. The "transform" method basically converts things into a matrix3d() under the hood using the browser itself, and parsing those is inherently ambiguous math-wise. Does that explain things? Let us know if you need anything else. Happy tweening!

If you can convert your animations into a transparent png sequence - like img0001.png, img0002.png, etc. - you can use FFMPEG to overlay the image sequence onto your video. That's how I've been doing it. FFMPEG can use an image sequence as a single input parameter. https://en.wikibooks.org/wiki/FFMPEG_An_Intermediate_Guide/image_sequence

@shubich You will need to calculate and save percentage to variables every time slider is moved so you can recalculate them on resize. A better way would to create everything as object so even if you end up using more then one slider you won't have to code everything again. Plus using objects will make it easy for you to organize properties. Not sure what your code does, I think you are confusing it with @OSUblake's approach of setting bounds. When you drag something, the left property doesn't animate. Draggable changes x/y translate of the target element. So you will need to use this.x to retrieve x translate inside the onDrag event callback. Then you can use that value to calculate percentage and on resize you can calculate new position of slider handles. Does that help?

I read it couple of times, but not sure what you are trying to do. Check the discussion in following similar thread, Animating 100 elements will be overkill, you will probably be better using canvas.

If you mean you want the draggable to snap with mouse whenever you click, following demo will help you. I am using onPress event instead of onClick because to click you need to lift mouse. It also snaps at every 90 degrees but you can remove that logic or change it. if you want to use throwProps plugin then check demo in following thread, For explanation about this entire effect, check comments in demo from following thread,

In your example you are trying to get 'content' attribute but I think you are trying to retrieve text of your li tags. You can do that using text method of jQuery. To use it to Tween, you need additional class to your tabs, like contentOne, contentTwo. Though your example is way too complex, you can simplify it as follows,

Thanks! It should be noted that animating CSS variables like that just changes the inline style, so it will work with multiple elements.