Leaderboard

@enkicoma here is another example https://codepen.io/noeldelgado/pen/BaogqYy?editors=0010 ?

Hello @enkicoma , you can check this Pen https://codepen.io/GreenSock/pen/xxqdyqO

check this post

Heya! The scrollTrigger docs are a good place to start. You'll be looking at something along these lines though... gsap.to(".section", { scrollTrigger: ".section", // start the animation when ".section" enters the viewport (once) backgroundColor: 'red' }); If you'd like any more help please create a minimal demo so we can see what you've tried. p.s. - There's a bunch of scrollTrigger demos here that are pretty useful to dig through and learn from - https://greensock.com/st-demos/

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.

Woah thank you so much @akapowl!

Hello Everyone, In a previous post @Cassie kindly helped me to fix a symmetrical animation that I'm trying to convert as an infinity (symbol) animation, it's kind of work but I can't make the each of the 10 circles scale down smoothly in the middle of the symbol and then scale up on the 2 extremities. @Cassie if you stop by, love would your help on this ? Many thanks Awa

cristal clear thank you ??

I don't know of a way to magically make the CSS work differently and get around the position: fixed + transforms thing, but what if you just changed from type: "x,y" to type: type:"left,top"? In general I prefer x,y because transforms perform better but if you're mostly focused on getting around a CSS limitation, perhaps that'd work for you. Or rework your CSS/HTML

zIndex can only be integers and you're only having it tween from 0 to 2, thus there are really only 3 options (0, 1, or 2) over the course of the whole animation but you have 10 elements. So try animating to a bigger zIndex so there are more variations. Like 20 or 200. Does that help?

A few things: Don't animate the literal "transform" property, like transform: "scale(0)" - it's much better/faster and more accurate to do scale: 0. Don't use jQuery.show() or .hide() - GSAP is up to 20x faster than jQuery and FAR more capable. Just use a gsap.to() tween. You mentioned using Flip but I didn't see it anywhere in your demo. There was a lot of text to read through in your description and I had a hard time visualizing exactly what you mean, plus I don't have a lot of time right now but here's how I'd use Flip: https://codepen.io/GreenSock/pen/rNyvpVP?editors=0010 Does that help?

Yeah, thanks for the clarification. Got to invest some time into reading docs ?

I'm not entirely sure I understand your question, but the issue you're running into may simply have to do with the fact that you've got the child element set to position: fixed but if an ancestor element has ANY transform applied (which is what Draggable is applying), that will make position: fixed relative to that container element, NOT the viewport. It has nothing to do with GSAP/Draggable - it's how CSS works. So as soon as you start dragging and the transform is applied, the image is no longer filling 100% of the viewport, it's filling 100% of the containing element (the one that's draggable). Perhaps I misunderstood your question, though.

Hi Makavel1! I think you just might need to control the zIndex. Try adding zIndexBoost: false to your draggable.

@bubenko we'd be happy to look at a minimal demo - can you provide one please? Strip everything out except the absolute essentials to reproduce the issue. It doesn't need to use the real assets - just simple <div> elements or whatever is fine. I'm relatively confident it's something related to your CSS or the way you set things up. Once I see the minimal demo, I'm sure we'll be able to better assess.

Many thanks to both of you @GreenSock @PointC much appreciated it, this community is just amazing ?

Whoops. Looks like Jack already posted.

Is this what you needed? https://codepen.io/PointC/pen/506ed5bf29a6104fde94660ba316da90 Happy tweening.

You could create 2 separate tweens for the scale and just repeat: 1, yoyo: true to make it go up and then back down twice: https://codepen.io/GreenSock/pen/QWprqjR?editors=0010 Is that what you're looking for?

Hey @Forpee I made a demo some time ago that might help you get started with this. https://codepen.io/akapowl/pen/85fd1433b311d0197397addc90617a77 What I'm doing there is pinning the relevant section for a specified amount of scroll ( happening in the lineTimeline - of course you wouldn't need an animation attached to that if you don't need one) and then forEach of the text/headline-elements create a ScrollTrigger with an equal scroll-duration (the afore-mentioned specified amount of scroll for the pinning devided by the number of texts/headlines) offset in their starts by that amount times the index of each text/headline-element.

Thanks appriciate your help.

? Well, I'm also not sure what the desired outcome is here. But since you are moving things in a 3-dimensional space and using the PerspectiveCamera here, there is no need to 'apply' a parallax effect in any special way between different 3D elements - it is already there. If you'd want it to feel parallax(ish) in relation to the background, I guess you'd just have to make sure that your elements move faster than the background does. In the end what exactly you want to achieve comes down to camera positioning and movement of either the elements or the camera ( one might be better suited than the other, depending on what you want to do, I guess). Here is an example with ScrollTrigger's smoothScroll() helper-function included for the smooth-scrolling effect (first example pen on the .scrollerProxy() documentation page). Maybe that helps get in the right direction https://codepen.io/akapowl/pen/d48ab3a40f7f8614db9e6f460c331704

Hey Piet. I'm not sure what you're expecting the .play(0) to do besides make the animation go to its start point. That's all it does To get things working on resize you need to update the distance and thus the tween: https://codepen.io/GreenSock/pen/gOPKGjo?editors=0010