Leaderboard

Hi @nate.ben welcome to the forum! React was fighting me, so I moved to Codepen. The simplest solution is to have ScrollTrigger control a timeline and in the timeline have the in and out animations directly. https://codepen.io/mvaneijgen/pen/RwORdVw?editors=0010 The scrub property makes it so you give control of the animation to the scrollbar of the user. If you in this case want nothing you happen on scroll up (see issue in below pen). You probably need to roll your own scrub logic, which you can do in the onUpdate for and then check which way it is scrolling and then update the progress of an external animation. This seems simple, but if you start building it you'll probably see you need more an more logic to make it work. I would go the first route, definitely when you're just starting out using the tools. What you can do is change the durations of the two tweens and make the duration of the first tween twice (or even three times) longer than the second tween. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/OJGXqzR?editors=0010

hi @dinchu you can separate the clear and the draw of the canvas inside a ticker func since now you are handling them inside the tween, here is one example with canvas to see the clearing, drawing, and animation of the stars https://codepen.io/ahmed-attia/pen/yLryMwK and another one with pixi https://stackblitz.com/edit/vitejs-vite-7ycqfl?file=main.js&terminal=dev

Hi Fatima, To get your PNGs to look sharp on high-density displays, you need to embed them at higher resolution. So, for a 300x250 png or jpg, make it 600x500, and position it to 300x250 in your html. For flat type, the file size should be okay as a png, but for photos, add more compression, and it will still look better than it would have at 1:1 dimensions.

@akapowl Thank you so much for this. I've been wracking my brains for the last couple of days trying to figure out why my scrolling animation was jumping at the end in WordPress Elementor however, I didn't realize the issue was a transition CSS effect being applied to the container by Elementor itself. I added selector { transition: none; } directly to the container with the GSAP ScrollTrigger animation and it resolved my issue. No more jumping!!

Hi, This not a simple task and is beyond what GSAP is built for. GSAP is an animation engine but not a collision detection + physics library. GSAP can provide some aspects of this with the Physics 2D plugin: https://gsap.com/docs/v3/Plugins/Physics2DPlugin Here is how collision detection works in is simplest state: But if I was you I'd look into Matter JS for this: https://brm.io/matter-js/ Happy Tweening!

Than don't include the first card in the selector and change the timing a bit, see JS comments https://codepen.io/mvaneijgen/pen/LYvZBjo?editors=0010

Yeah, that was an issue specific to rem units and it should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js (you may need to clear your cache). Sorry about any confusion there.

Yep, exactamundo. Imagine laying those tweens out on a timeline. Just think where each one's start time would be. Happy tweening!

Yep, that's because the default duration is 0.5 (you didn't set a duration, so it uses the default). Therefore, if each one animates for 0.5 seconds, and you stagger their start times by 0.5 seconds, that means they'd be perfectly sequenced. If you set the duration to 1 second, then you'd need a stagger of 1 to have them perfectly sequenced. See how it works? And yes, when you set scrub: true on a ScrollTriggered animation, it just squishes/stretches it to fit perfectly between the start and end scroll positions. I hope that clears things up.

Sorry, I read your last post a few times but I'm afraid I don't understand what you mean. Please provide a minimal demo that clearly illustrates the problem. For example your last demo has this: tlCards.to(slide, { x: () => -(slide.clientWidth - slide.clientWidth), ease: 'none', duration: 1, }); Can you see the problem here? You have this slide.clientWidth - slide.clientWidth which equals to zero, so nothing happens. I strongly suggest you to get something working like this first: https://codepen.io/GreenSock/pen/GRLZbYr Just forget about ScrollTrigger and get the animation working as you want/need first, then add ScrollTrigger back to the mix. Probably including ScrollTrigger is adding an extra layer of work that you don't have to worry about right now. Focus only in the animation and then add ScrollTrigger, that is the easy part. Happy Tweening!

Hi @smpa01 and welcome to the GSAP Forums! The reason you're seeing this is because you have this: gsap.to(this, { rotation: 360, duration: 2, ease: "none" }); Basically what happens is that the first time you click the element GSAP gets it's rotation and is 0, the it tweens it to 360, creating the animation. Then any subsequent click GSAP does the same, except this time the element's rotation is already 360 so GSAP tweens the rotation from 360 to 360, so nothing happens. This seems to work the way you intend: let rotation = 0; const rectTwoG = d3 .select("#rectTwo") .append((_) => rectOne.clone(true).node()) .attr("id", "two") .attr("y", function (d, i) { const y = parseFloat(this.getAttribute("y")) + 100; return y; }) .attr("stroke", "green") .style("pointer-events", "all") .on("click", function () { rotation += 360; gsap.to(this, { rotation: rotation, duration: 2, ease: "none" }); }); Hopefully this helps. Happy Tweening!

We usually don't code a custom solution for you in these forums, but I knew how to do this and figured it'd be fun challenge, so here you go: https://codepen.io/GreenSock/pen/PogzKNO?editors=0010 Is that what you're looking for?

Love the plumber analogy @akapowl, your post earned a Gif!

I know this is an old post, but this worked like a charm. Safari seems to have some differences in the way that it handles the scrollposition's values (given the way the viewport is calculated), causing the autokill: true to be forcibly called. I just set it to off for safari and now it works fine. I also want to mention a fix for a similar problem i had a month ago, and it's related to the metadata tags of the website. Certain gsap scrollTo features seem to break unexpectedly on Safari ( in my experience, using any of the features that use translate() ), but another forum member had written something along the lines of needing some specific metadata tags in your html head. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> Thanks again for the fix.

Welcome to the forum! In that video you attached, it very much looks like you have CSS transitions applied on elements that are affected by ScrollTrigger. Themes like Elementor often apply something like transition: all .3s to lots of elements - those will interfere with GSAP, so you'll have to make sure to overwrite them in your custom CSS. On top of that I would also make sure to overwrite the scroll-behaviour to auto because if I recall correctly, Elementor will by default set it to smooth, which can also interfere with your scroll related JS at some point. I hope this will help already. If it doesn't, unfortunatelly we won't be able to help without a minimal demo clearly demonstrating your issue. Good luck.