Leaderboard

Hi there @liamny Welcome to the GSAP forums! ? FYI - I made a little tweak to the CSS in your pen so I could scroll on my device. Setting the container to 200vh instead of a pixel value. You weren't far off a solution! I couldn't recreate the issue you were having with the button but the syntax you currently have can be simplified a little, maybe this will help? gsap.timeline({ scrollTrigger: { trigger: ".button", end: 'bottom', toggleClass: "blockDiv", } }); For the tip - the magic is all in toggleactions - This determines how the animation is controlled as it toggles in and out of view. You're looking for toggleActions: "play reset none reset" This will play when it enters the viewport - reset when it leaves, take no action when scrolled back into view, and reset when it leaves again (scrolled all the way back). Here's an adjusted codepen. Hope this helps! https://codepen.io/cassie-codes/pen/25cc28b1d8952dd12f460a7fd63cf807?editors=0010

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...

Have you tried anticipatePin? anticipatePin Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. That's caused by the fact that most modern browsers handle scroll repaints on a separate thread, so at the moment of pinning the browser may have already painted the pre-pinned content, making it visible for perhaps 1/60th of a second. The only way to counteract that is to have ScrollTrigger monitor the scroll velocity and anticipate the pin, applying it slightly early to avoid that flash of unpinned content. A value of anticipatePin: 1 is typically fine, but you can reduce or increase that number to control how early it does the pinning. In many cases, however, you don't need any anticipatePin (the default is 0). https://greensock.com/docs/v3/Plugins/ScrollTrigger

I was referring to the codepen. On your site: Re the video I'm a little confused what to you want it to be doing, currently it's sitting up at the top overlaying everything because you have position fixed on it. If you want the video to sit in its container try setting the video to: position: absolute and add to the row that contains it: position: relative At this point containing row with the absolute child element has no inherited height, if you want to set this and have video overflow hidden give it a height and set it's overflow properties accordingly. such as: height: 50vh; overflow: hidden; Then I suppose you'll have to adjust how you have the scrollTrigger setup to make it react at the appropriate time.

Good job @jnutt367 keep at it you'll be a pro in no time! And welcome to the forum.

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

Hi nurlan, Welcome to the forum, if possible please make a simplified example of the issue on codepen so we can have a look. It's very difficult to troubleshoot a live website.

Check the console... 404 error on the video (Failed to load resource: the server responded with a status of 404 () } and I don't think you have gsap loaded (Uncaught ReferenceError: gsap is not defined)

Hey @Forpee Here is a thread using react and gsap modifiers Does that help? Happy looping ... Mikel

Query 2: I'm not sure if there is any more updated info but this post contains info on using with dynamic content:

Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.

If you go to the settings panel you can add libraries Here's a starter pen with all the links - https://codepen.io/GreenSock/pen/OPqpRJ Also, I would start off by getting rid of the base 64 image and adding a image tag in the SVG, it'll be a lot less confusing to work with - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

@Cassie - thank you so much. It looks great!

Welcome to the GreenSock community, @Thepaulcollett! We really try to keep these forums focused on GSAP-specific questions - we just don't have the resources to offer free general consulting services especially with troubleshooting live web sites, but maybe try adding a z-index to the other content that's getting covered up so that it's in front? Position: fixed elements and transforms can make browsers stack things in ways that you may not expect We'd be glad to answer any GSAP-related questions, though.

I just modified your pen and posted it. Have a look and see if that's what you mean.

Hi there! I would love to help with this. Would you be able to make a stripped back demo in codepen so we can help you debug?

Oh ok I think I get you. Like this? https://codepen.io/BrianCross/pen/wvgdXMo

Welcome to the GreenSock community, @XM624 There's a search icon in the upper right corner (magnifying glass) - just click that, type in your terms, and hit submit What you're asking is totally doable. Have you read the docs yet? https://greensock.com/docs/v3/Plugins/Draggable There are links in the docs to "how to" demos and showcase ones too. Maybe this one can get you going in the right direction: https://codepen.io/GreenSock/pen/JvjLyg Good luck!

Hey there. I'm not 100% sure what you're asking. To put the spritesheet in the top left corner just get rid of: top: 50%; left: 50%; transform: translate(-50%, -50%); Then you want to trigger it somehow? Currently it's tied to the scroll position using ScrollTrigger. You're wanting to trigger the animation differently?

Wow thank you so much!! @Cassie @akapowl

I just quickly peeked at your code on my phone and one thing I see is you’re not actually cloning the DOM node. You’re just setting clone to point to the existing node. Use const clone = cloneRef.current.cloneNode(true); to clone the node and its child text node.

The config seems to be fine on your local machine. But to deploy to netlify you need to use environment variables. Here's a detailed guide how you can do the same: https://answers.netlify.com/t/support-guide-using-private-npm-modules-on-netlify/795 (Apologies for the delay in my response. I forgot to hit the submit button ?‍♂️)

Cheers Jack! No worries about the typo's, 90% of my bgus bugs are spelling mistakes... Thanks for the extra approaches there, makes sense. I'll adjust my snippet to match up - always good to know of some alternatives. My pleasure, easily the most "bang for buck" paid software that I use.

Fixed. All the "duration" values had a typo ("duratoin"). ? Good catch. It's fixed in the next release which you can preview on CodePen at https://assets.codepen.io/16327/GSDevTools3.min.js (the same file you linked to, so just clear your cache). It'd only be an issue if you don't define an "animation" for the GSDevTools instance (thus it uses the globalTimeline) AND the selected animation had a delay applied. Thanks again for pointing that out. And you get major bonus points for even providing a video! ? And yeah, you can just kill() the instance and create a new one. The method you used looks great. If it's easier (and I can't imagine it would be), you could also just use id values. Like you can set an "id" in the config, and then to snag it you can use GSDevTools.getById(id) and then just kill() it there. I'm not suggesting a change - I'm just being thorough about your options. Thanks for being a Club member, @Chris7777 ?

Let's say you wanted it to pause between frame 50 and 100 - you'd create one tween that goes from frame 1 to 50, and then a separate tween that goes from 100 to the end frame, and just place those tweens on the timeline accordingly (with space between them for the pause).

Hi @DN-SF Welcome to the forum and thanks for joining Club GreenSock. I just pasted your markup into a quick CodePen demo with some spacer divs & ScrollTrigger so you could see it all working as expected. https://codepen.io/PointC/pen/f1fb5edb2d0fd16c147ae49432335b39 Hopefully that helps. Happy tweening and welcome aboard.

All right, after about 7 hours I tracked down that pesky bug - it should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js (it was in the GSAP core, not ScrollTrigger). It seems to work well in your demo, but please let me know if you notice any other issues. Thanks!

Hi akapowl, Thanks a lot, that does look a significant amount neater than what I had before. The timelines look much tighter than having the multiple calls as well. I appreciate both your time on this - bit by bit im learning Alex

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

Hey @embrion - welcome to the forums. You've got quite a lot going on in your demo and from what it looks like to me, you have ScrollTriggers set up that on toggle and every other callback create tweens that have ScrollTriggers attached - so there is probably a lot of fighting going on about what should take control over your animations, which would explain the stuttering/lagging. Also you will notice your page becoming longer and longer the more you scroll down. I think you could go about this a whole lot easier by simply creating one fromTo-tween for each of your elements with a scrollTrigger attached. Depending on how exactly you wanted things to be tweened (especially when you want it to be scrubbing) you should also be careful about your end-values. As of now it looks to me, like you have them set up (on the actual tweening ScrollTriggers) that the end-point would have already been passed before the start would have even been reached - so there wouldn't be any room for scrubbing. Here is a demo of how you could tackle what I think I understood it is you want to achieve. I tweeked your ends and starts a bit so they more or less 'hook' to your elements (visualized by the :before I added to each h3 and setting the scrub to true instead of 2) https://codepen.io/akapowl/pen/5ded63fafec501ba565cb6ec28b8da2a And since I am not entirely sure if you want the scrubbing, here is a version using toggleActions to trigger the animations https://codepen.io/akapowl/pen/b4edbbda992c9aa7d8b83a35ad791369 That part could be achieved by setting all but the one you want to be visible to invisible beforehand and then eiter use the onEnter-callback of one of your existing ScrollTriggers for triggering a tween that makes the others visible or setting up an individual ScrollTrigger for whenever you want them to become visible. But (and I don't mean this offensive in any way) I think, that maybe you should try and tackle one bit at a time because what you want to do takes quite some thinking in the first place. I hope this was a bit helpful though. Cheers.

You're adding a new tween to the timeline every event. That's no good. In GSAP 3 we recommend using .quickSetter(): https://codepen.io/GreenSock/pen/WNNNBpo