Leaderboard

I know this thread is now over a month old, but I wanted to share a fork of Zach's pen. I made a 6-sided die from the cube. To simplify/clarify, the 3d rotations are moved out of the CSS. Hopefully this demo is useful to someone... https://codepen.io/creativeocean/pen/qBRbNwa

Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010

I remember these two canvas based examples not GSAP specific. But each impressive none the less yielding similar result. https://codepen.io/waaark/pen/VbgwEM https://codepen.io/Zaku/pen/JNxKKY

My recipe a little trial & error and remove the ****. https://codepen.io/mikeK/pen/VwwwGrd Happy morphing ... Mikel

Hi Stefano, Glad you are enjoying the courses. Thanks for providing such a clear and reduced demo. There are a few ways to do this but I will start with a fairly basic approach to see if that works for you. To chain these 2 timelines together you can add them both to another timeline, often called a master or parent. GSAP 3 Beyond the Basics has some lessons on this. https://codepen.io/snorkltv/pen/abpaPEJ?editors=1010 notice your child timelines are no longer paused and they are added to master. your button now controls m

Nailed it.

Sometimes adding a slight rotation can help with the pixel snapping... and of course adding will-change. gsap.set(".gsap", { rotation: 0.01 })

Hi, Yeah, responsive vertical accordions are not the simplest thing, but they're not the hardest neither. It's just about wrapping your head around handling the content height changes and how GSAP works. This sample is not very elegant but it's a solid approach to this. I don't know if it's the best approach, but it works: https://codepen.io/rhernando/pen/ZbGeJd The code is quite commented so all the explanation and thought process is there. Hopefully is enough to get you started. Happy Tweening!!!

Seems like a good use case for registerEffect! ✨ docs here - https://greensock.com/docs/v3/GSAP/gsap.registerEffect() https://codepen.io/cassie-codes/pen/ab220568ec98f4a94ac2eaad6dc3eef6?editors=1010

Hey @Jakebogan For those types of animations I use the puppet warp tool in AI and usually get decent results with MorphSVG. It's all in how you set up the assets. Here's a really quick demo. https://codepen.io/PointC/pen/gOgGQrP Hopefully that gives you some ideas. Happy tweening.

Hi and welcome to the GreenSock forums. As far as I know, once you add an infinite instance inside a timeline that timeline's duration becomes infinite as well. As much as @GreenSock has spent many hours bending the construct of time-space (for example you can pass a negative time to a GSAP instance), I'm afraid He hasn't gone that far, yet. We have a new admin in the house that might be able to crack that In a serious note now, what you can do is add a label in a certain position and get that label's time, like that you'll have a notion of the duration of the timeline

Hi and welcome to the GreenSock forums. So glad you provided a demo with most of it working. Saved me loads of time! The trick here is that we are not going to add the stars scene1() animation to the main timeline. We are going to add a tween that does a tweenTo() on the stars animation for 5 seconds (or any time you want). Note that scene1() now just returns a timeline. I added GSDevTools so that you can see that the main timeline has a finite duration https://codepen.io/snorkltv/pen/JjErJvP?editors=0010 This video explains

this demo by @OSUblake may help with some of it. https://codepen.io/osublake/pen/XJQKVX it looks like you would have to add code that leaves the original in place. this pen by @Rodrigo shows how to make copies of the thing you are dragging, maybe it will help as well. Drag the numbered blue divs around. https://codepen.io/rhernando/pen/mJqwZq

I call this the Nesting Doll Timeline Technique: https://codepen.io/ryan_labar/pen/PoWxveg

I'd just do a recursive function call to reorder the cards and start again. Simple example.... https://codepen.io/osublake/pen/a5d8def52e58227c738898c4d01e774e

Throw in a radius animation, and then you can change how big the circle is. The allows for the height of the wave to be dynamic. For example, it can start out small, and then get bigger, or vice versa. https://codepen.io/osublake/pen/edbed4a5ee29e65a49cc60f9868e7d7b

This is the basis for a wave. Try playing with different values here... var delay = norm * 1.5; tl.to(obj, { angle: Math.PI * 2, ease: "power2.inOut", duration: 3 }, delay); https://codepen.io/osublake/pen/eb9ad45d903c076f2c47ee1ea3981b2a

Ahaha! I forgot about that one. ✨ *peers cautiously at the code*

You could maybe update this older example by @Cassie to GSAP 3 as a possible starting point to work from. 😉 https://codepen.io/cassie-codes/pen/bzXLOr

In case anyone else comes across this like I did, having trouble with GSAP animating from one clip-path to another: make sure both clip-paths are using the same units, including any zero values. For example, trying to animate from this: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); to this: clip-path: polygon(-100% 0, -100% 0, -100% 100%, -100% 100%) wasn't working, but when I changed the zero values to percentages, it worked perfectly. // From clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) // To clip-path: polygon(-100% 0%, -100% 0%, -100%

I've had thousands of timelines running at the same time without issue (with WebGL). As @Cassie said, it's more about what you having the timeline do. If you're animating font sizes, width, and height is probably going to have a greater impact on performance than animating transforms and opacity.

Hi Paul! It seems to be firing ok for me - however you've got a lot of unnecessary code here. If you loop through all the sections you can then access the index of that section and use that index value to change out the src. https://codepen.io/cassie-codes/pen/a5afedb1be5eced5ffacc61ec147e9db?editors=1011 You also don't need to work out the height of the sections yourself! GSAP can do that for you. I've added a container around the section elements - If you define this container as the trigger element you can pin the tooltip until the bottom of the sections hit the bott

Hi Christian! For the accordion - this might be a cleaner solution. Opening each section one by one in a timeline and pinning the container while it plays out. https://codepen.io/cassie-codes/pen/a8f3c627b4d152fd68bb4055c5a9af68?editors=0010 You can 'snap' to certain sections in the animation but ScrollTrigger doesn't do any scroll jacking. iIt's a bit of a usability nightmare and it's very error-prone. You can read more here about snapping and scroll-jacking - https://greensock.com/docs/v3/Plugins/ScrollTrigger No scroll-jacking, so it can be combined with native technologi

Hey @eduardfossas, Welcome to the GreenSock Forum. I'm not sure what exactly you want to achieve. Sometimes a special ease for entire timeline helps - so tween the timeline ... https://codepen.io/mikeK/pen/RwNKBrB By the way: You are still using the old GSAP syntax. Happy tweening ... Mikel

Hey @zofia, Maybe this could be a way https://codepen.io/mikeK/pen/qBRxdEa Happy tweening ... Mikel

Welome to the forum @iCodeAyush There recently has been a thread about that same effect. Maybe the example by tailbreezy can give you another idea how to get it working in combination with what Cassie mentioned above about the images that will need to be hidden. Happy tweening.

Hi there! This looks great, good job. 🙂 I checked out the website and most images are disappearing offscreen, but for the ones that need to be hidden - you can change opacity after the image has resized by adding another tween to the timeline Tweens added to a timeline follow one after the other, so you could do something like this. LandingPageScrollTrigger.to('#wrapper #img7', { transform: 'scale(1.4)', x: "15%" }, 0) LandingPageScrollTrigger.set('#wrapper #img7', { opacity: 0 }) Or if you wanted more control over the time you could use a position paramet

I had to make it good. It's my Pixi comeback special. I haven't touched it in like over 6 months.

Sorry when you said you only wanted to increase the size of the div I thought that is all you had trouble with. if you want the line to grow as the orange panel scales you would then need a timeline with 2 tweens (1 for scale of panel, 1 for line). You would then attach a ScrollTrigger to the timeline https://codepen.io/snorkltv/pen/oNBGzOE?editors=0010 If you aren't familiar with building timelines please check my free GreenSock course GSAP 3 Express. It will help a lot.

Sorry, but there isn't much I can do with the sample you provide since there isn't a way to tinker with the code. You can create a sample in codepen using jQuery ajax and get some dumy images from unsplash: $.ajax({ url: "https://images.unsplash.com/photo-1548366086-7f1b76106622?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=624&q=80", crossDomain: true }).done(function(){ console.log("DONE!!!!"); }); I just tested that code in codepen and I don't get any errors.

Ok pal! I've simplified this down a lot for demo purposes. 1) You were trying to animate rectangles within clip paths. I assume you wanted to target and animate the actual elements themselves? This is why stuff was disappearing (the clipping area was moving). I've removed the c lip paths as they didn't seem to be having any other effect. Apologies if you were intending to use the clip paths in some way and I've misread this. 2) Tidy tidy tidy - There is so much going on - Inline styles, styles in CSS, styles as presentation attributes, inline transforms, base 64 stuff, unused clip paths,

I am loving this so far. I have limited time per day but what I have been able to soak in is amazing to me. I can't wait to keep upping my animations game one day at a time. Thanks for being here! https://jnutt367.github.io/gsap3/ This is the first thing I built with gsap. Hopefully more and better to come...

Hi Alex, You're right about the padding! By default, when you pin an element, padding gets added to push other elements down so that when it gets unpinned, the rest of the content flows in nicely. Your CSS is set up perfectly - I think the confusion comes in where you have two separate scroll-triggers unnecessarily. Here's a little example that (i think) does what you want? https://codepen.io/cassie-codes/pen/c49f9997ea9ec4b9b9d8dde1b444d16e

Hey @Bogomip The first parameter in your start always refers to your trigger-element; the second refers to the viewport; 'top top' meaning when the top of the trigger hits the top of the viewport. So when you need to calculate distances like in your example, you want to make sure that you calculate them from the same point. I changed all your 'top bottom' to 'top top' to keep the measurement consistant there. Also, for your first ScrollTrigger that does the pinning you'd want to use the div with the class of panel-one inside of that header-wrap as the trigge

Sorry, but I have no way of knowing what could be wrong. If your target isn't found my only guess is you are running your scripts before the DOM is present. Try loading your js at the bottom of the page in this order gsap scrolltrigger your custom animation code that you wrote

@Verdandi That is just a canvas rendering technique. The canvas isn't being cleared, so all the old pixels remain. On every render, it's drawing a slightly transparent black box over all the old pixels, creating a "trail" effect. When you set the fade to rgb(0,0,0), it's just drawing an opaque black box over all the old pixels, which has the same effect as clearing the canvas. // this is pretty much the same... context.fillStyle = "rgb(0,0,0)"; context.fillRect(0, 0, vw, vh); // ...as doing this context.clearRect(0, 0, vw, vh); Check out this thread. I g

Hi and welcome to the GreenSock forums. Sorry but your question is a little bit vague. What I can infer from the little information you're providing, perhaps the MorphSVG Plugin is what you're after: Check out the samples in there and the docs to see how it works: https://greensock.com/docs/v3/Plugins/MorphSVGPlugin This is a Club GreenSock benefit, but if you want to take it for a test drive, you can use this codepen in order to play around with it: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!!!

And now I've gone even further down the 3D cube rabbit hole –made a Draggable version: https://codepen.io/creativeocean/pen/poRyMLX?editors=0010

Hello @cr33ksid3 You can set the point you want to rotate your orbit-groups around inside your SVG in GSAP via svgOrigin - since you want to rotate them around the center of your SVG and your SVG is 800x800 that would be a svgOrigin of ' 400 400'. Then you'd have to think about what would be neccessary for the square/rect itself to remain in position during that rotation of the whole group - and that would be to rotate it in the opposite direction for the same amount of time around it's own center, countering the overall rotation. To set the rotation around its own center you'd wan

Hey @cr33ksid3, Its still the old GSAP syntax but a funny hint how to rotate 'planets'. https://codepen.io/mikeK/pen/xxbrKKQ?editors=1010 Happy rotating ... Mikel

You could use ScrollTrigger.matchMedia() for that. https://codepen.io/GreenSock/pen/e2d1d9084b18a67f9c90da7ea29a1509?editors=0010 I'm not sure what you need to do for LocomotiveScroll (if anything), but the CodePen above at least shows how you can handle the GSAP/ScrollTrigger stuff.

Hello @seanom Using a timeline certainly is the best way to approach this - but with your approach you are actually making one of the most common ScrollTrigger mistakes; nesting ScrollTriggers inside multiple timeline-tweens. You'd want to avoid that and instead set up the scrollTrigger on the timeline itself. You can use the position parameter of the timeline (more info on that right below the video on the linked docs-page) to properly adjust the timing for the individual tweens of yout timeline. But be aware, that durations and the position parameter on Scro

Hey @Jase For it to work with a smooth-scrolling library, you will first and foremost have to set the scroller appropriately on your ScrollTrigger. Using smooth-scrolling libraries will most likely have some caveats when it comes to layout/positioning things the right way - most often simply just related to how they handle the 'scrolling' - so the issue is not ScrollTrigger-related in the first place. I got the demo running with loco-scroll by additionaly to setting the scroller to the ScrollTrigger, removing the position: absolute, top and left from the #co

this seemed like an interesting challenge. hopefully the following will spark some ideas to help you get it to the finish line. First, it's important to note that GSAP has loads of API hooks and utilities to make seemingly complex effects fairly easy without doing any tough math. By using gsap.utils.distribute() and staggering from center you get stuff like https://codepen.io/snorkltv/pen/yLyqVWQ Rubberbander lesson from GSAP 3 Beyond the Basics Being that you are very particular about the middle letter staying in center and all the other le

The below codepen example from the ScrollTrigger Demos should help you based upon your description. https://codepen.io/GreenSock/pen/BaowPwo If not, you can find many other pinning examples and discussions throughout the forum.

I whipped together a helper function that was loosely inspired by Chris's work there, and it has the following tweaks: Improved performance in the way it handles scrubbing You can add any ScrollTrigger-related value to the object you pass in (trigger, start, end, onEnter, onLeave, onUpdate, markers, whatever.) so you get tons of flexibility https://greensock.com/docs/v3/HelperFunctions#lottie https://codepen.io/GreenSock/pen/QWdjEbx?editors=0010 👍

There are a few different ways, it boils down to what you are supporting and how your project is setup. The "modern" way of prevent the parse-blocking is to add `defer` to the <script> tag (or the `async` one). <script defer src="blah.js"></script> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script The old skool way is to have only a tiny, tiny script at the bottom of your body tag that runs only after the `DOMContentLoaded` and the `load` events have fired. This tiny script then adds the <script> tags to all of the rest of your J

thanks for the demo. there was an error saying ScollTrigger.scrollerProxy() was not a function. That is because you were using an old version. scrollerProxy() was added in 3.4. you also omitted the scroller property when you created a ScrollTrigger for each video. in order for the video to play on scroll without any prior user interaction it needs a muted property. I added this for you. https://codepen.io/snorkltv/pen/ExZjexm?editors=1010

Okay I think I understand. You want the dashed path to change color as the user progresses through the stop points, right? I think I'd create my base dashed path and a duplicate in a different color. The duplicate could then be masked and revealed with DrawSVG. Maybe something like this. https://codepen.io/PointC/pen/PoWwOLg I just did a copy and manual paste for each path in this demo, but the d attribute is the same so you could tighten this up a bit more by cloning the base path or just setting the d attribute. Hopefully this is what you meant and I'm not